Scribd
Upload
6 views29 pages

CSS (Cascading Style Sheet) 8

Uploaded by

muhammad uzair
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views29 pages

CSS (Cascading Style Sheet) 8

Uploaded by

muhammad uzair
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

CSS

(CASCADING
STYLE SHEET)
SAQIB SARWAR
by Techsol Media JLT Dubai
CSS (VERSION HISTORY)
CSS comes in different version

CSS1 1996
CSS2 1998
CSS3 2011
WHY LEARN CSS
HTML used for build structure
but
CSS used to do modification and
styles on HTML elements
Responsive Website
Animation on Websites
2D and 3D transformation of HTML
Website development process fast
HTML VS CSS
CSS IMPLEMENTATION WAY
There are 3 Ways to Implement CSS
• Inline Style
• Internal / Inpage Style Tag
• External Style Sheet
INLINE STYLE
We Implement Inline Style sheet by attribute
<article>
<h1 style=“color:red;font-size:15”> </h1>
<p>abcdef…..</p>
</article>
• If 100 article so we have to write color red 100 times
so inline approach fails here.
• And if you need responsiveness, inline not recommended way
INTERNAL /INPAGE STYLE TAG
<head>
<style></style>
</head>

Here we Need to Understand selector


Because Selector helps to select the Tag!!!!!!!!!
SELECTORS
Selector Targets Element / Select the Element

• By Tag Name
<style>

h1{
color:red;
font-size:15px;
}

</style>
INTERNAL /INPAGE STYLE TAG
<head>
<style></style>
</head>

Here we Need to Understand selector


Because Selector helps to select the Tag!!!!!!!!!
EXTERNAL CSS
External css don’t need Style tag because css file itself is acess file

<link type=“stylesheet” href=“ css/style.css”>


Here we Need to Understand selector
Because Selector helps to select the Tag!!!!!!!!!
SELECTORS
Simple Selectors
• Type/Name
• Id
• Class
• Universal
Combination Selectors
• Descendant Selector
• Direct Child
• Adjacent Sibling Selector
• General Sibling Selector
TYPE SELECTOR
Selector Targets Element / Select the Element

• By Tag Name / By Type


<style>

h1{
color:red;
font-size:15px;
}

</style>
UNIVERSAL
Selector Targets Element / Select the Element

• Universal Selector
<style>

*{
color:red;
font-size:15px;
}

</style>
ID

• id
<style>

# paragraph{
color:red;
font-size:15px;
}

</style>

<body>
<p id=“paragraph”>
</body>
CLASS

• Class
<style>

.paragraph{
color:red;
font-size:15px;
}

</style>

<body>
<p class=“paragraph”>
</body>
ADVANCE SELECTOR

Descendant Selector

.mydiv .more-innerdiv
{
color: red;
}
ADVANCE SELECTOR

Direct Child Selector

.mydiv > .inner-div {


color: red;
}
ADVANCE SELECTOR

Adjacent Sibling Selector


Will change color of very Next Sibling/very first P

div + p{
color: blue;
}
ADVANCE SELECTOR

General Sibling Selector


Will change color of very all Sibling those are P

div ~ p{
color: blue;
}

https://flukeout.github.io/
ADVANCE SELECTOR

Attribute Selector
ADVANCE SELECTOR

Attribute Selector A[attr]


• Element with specific Attribute

<Img src=“flower.png” title=“Pakistan’s Flower” />

<Img src=“animal.png” alt=“Pakistan’s Animal” />

<input type=“” />

Img[title]{
Border:2px solid green;
}
ADVANCE SELECTOR

Attribute Selector A[attr = value] Must define complete value


Element with specific Attribute

<Img src=“flower.png” title=“Pakistan’s Flower” />

<Img src=“animal.png” alt=“Pakistan’s Animal” />

<input type=“text” />


<input type=“password” />

Input[type=‘text’]{
Border: 3px solid Orange;
}

Input[type=‘password’]{
Border: 3px solid Pink;
ADVANCE SELECTOR

Attribute Selector A[attr ^ = value] starting exact from that


value
• Element with specific Attribute

<Img src=“flower.png” title=“Pakistan’s Flower” />

<Img src=“animal.png” alt=“Pakistan’s Animal” />

<input type=“text” />


<input type=“password” />

img[title^=‘Pakistan’s’]
{
Border: 3px solid Orange;
ADVANCE SELECTOR

Attribute Selector A[attr |= value] must declare starting value


but using dash
• Element with specific Attribute

-
<Img src=“flower.png” title=“Pakistan’s Flower” />

<Img src=“animal.png” alt=“Pakistan’s Animal” />

<input type=“text” />


<input type=“password” />

img[title |=‘Pakistan’s’]{
Border: 3px solid Orange;
ADVANCE SELECTOR

Attribute Selector A[attr $= value] Attribute Ends with value


Element with specific Attribute

<Img src=“flower.png” title=“Pakistan’s Flower” />

<Img src=“animal.png” alt=“Pakistan’s Animal” />

<input type=“text” />


<input type=“password” />

<a href=“images\flower.jpg”>

a[href $=‘.jpg’]
{
border:3px solid green;
}
ADVANCE SELECTOR

Attribute Selector A[attr *= value] value occurs anywhere in


Attribute.
Space doesn’t matter, it will find.
Element with specific Attribute

<Img src=“flower.jpg” title=“National Flower of Pakistan” />

<Img src=“animal.png” alt=“National Animal of Pakistan” />

<a href=“images\flower.jpg”>

a[href $=‘.jpg’]
{
border:3px solid green;
ADVANCE SELECTOR

A[attr ~= value] value matches attribute in


Attribute Selector
space separated list. value must having space both side then
it will work. Not like *
Element with specific Attribute

<Img src=“flower.jpg” title=“National Flower of Pakistan” />

<Img src=“animal.png” alt=“National Animal of Pakistan” />

<a href=“images\flower.jpg”>

img[title ~=‘of’]
{
Border: 3px solid Orange;
CSS SELECTORS CATEGORY:
Simple Selectors
Combinators Selectors
Attribute Selector
Pseudo Classes & Pseudo elements
PSEUDO CLASSES :
• : first child • : not()
• :last child • :lang()
• :nth-child() • :link
• :nth-last-child() • :hover //must declare after visited in CSS
• :nth-last-of-type() • :visited
• :nth-of-type() • :active
• :only-child • :checked
• :only-of-type • :disabled
• :first-of-type • :enabled
• :last-of-type • : required
• :empty • :root

You might also like