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
