Introduction to CSS

What is CSS ?
➢CSS stands for Cascading Style Sheets.
➢If HTML is the structure of the house then CSS is the look and feel of
the house.
➢It’s the language to make our web pages presentable.
➢Designed to make style sheets for web.
➢Now let’s try to break the acronym:
▪ Cascading: falling of Styles
▪ Style: Adding designs/Styling our HTML tags
▪ Sheets: Writing our style in different documents
 History of CSS ?
➢1994:First proposed by Hakon Wium Lie on 10th October
➢1996:CSS was published on 17th Nov with influencer Bert Bos
➢Later he became co-author of CSS
➢1996:CSS became official with CSS was published in Dec.
➢1997:Created CSS level 2 on 4th Nov
➢1998: Published on 12th may
 Basic Structure of CSS
• Selector {
Property1:value;
Property2:value;
Property3:value;
}
➢Selector :selects the elements you want to target.
➢There are few basic selectors like tags, id’s and classes.
➢All forms this key-value pair.
➢Keys: Properties,like color,font-size,width,height etc.
➢Values:value associated with properties
➢Always remains same whether we apply internal or external styling.
 Types of CSS
• There are 3 ways to write CSS in our HTML file.
➢ Inline CSS
➢ Internal CSS
➢ External CSS
<link rel=“stylesheet” type=“text/css” href=“[Link]”>
• Priority order
o Inline > Internal >External
 Inline CSS
• Before CSS this was the only way to apply style
• Not an efficient way to write as it has lot a redundancy
• Self contained
• Uniquely applied on each element
• Idea of separation of concerns was lost
• Example:-
<h3 style=“color:red”>Have a great day</h3>
<p style=“color:green”>I did this,I did that </p>
 Internal CSS
• With the help of style tag we can apply styles within the HTML file.
• Redundancy is removed
• But idea of separation of concerns still lost
• Uniquely applied on single document
• Example:-
<style>
h1{
color:red;
}
</style>
 External CSS
• With the help of <link> tag in head tag we can apply styles.
• Reference is added
• File saved with .css extension
• Redundancy is removed
• Idea of separation of concerns is maintained
• Uniquely applied on each document
• Example:-
<link rel=“stylesheet” type=“text/css” href=“[Link]”>
h1{
color:red;
}
 Types of Selectors
• Selectors are used to target elements and apply css
• Five simple selectors.
➢ Element Selector (type)
➢ Id Selector (#)
➢ Class Selector (.)
➢ Group Selector (,)
➢ Universal Selector (*)
• Priority order
o Id > Class >Elements
 Element Selector(type)
• Used to select HTML elements by its name
• How do we do it.
h1
{
color:red;
}
• We selected the heading tag and then changed the color property i.e
text color to [Link] whatever is written in this tag(content) will
have the text color as red
 Id Selector(#)
• Id attribute is used to select HTML elements by its ids
• Used to target specific or unique element
• How do we do it.
#unique
{
color:red;
}
<h1 id=“unique”>Hi</h1>
• We select id and then changed the color property i.e text color to
[Link] whatever is written in this tag(content) will have the text
color as red
 Class Selector(.)
• Class attribute is used to select HTML elements
• Used to target specific class of element
• How do we do it.
.group
{
color:red;
}
<h1 class=“group”>Hi</h1>
• We select class and then changed the color property i.e text color to
red. Now whatever is written in this tag(content) will have the text
color as red
 Group Selector(,)
• Used to select Multiple HTML elements
• Used to target group of elements
• How do we do it.
h1,h2,p
{
color:red;
}
<h1>Hi</h1>
<p>Paragraph</p>
• We select different types and then changed the color property i.e text color
to red. Now whatever is written in this tag(content) will have the text color
as red
 Universal Selector(.)
• Used to select all HTML elements
• Used to target all elements
• How do we do it.
*
{
color:red;
}
<h1>Hi</h1>
<p>Paragraph</p>
• We select all types and then changed the color property i.e text color to
red. Now whatever is written in this tag(content) will have the text color as
red
 Universal Selector(.)
• Used to select all HTML elements
• Used to target all elements
• How do we do it.
*
{
color:red;
}
<h1>Hi</h1>
<p>Paragraph</p>
• We select all types and then changed the color property i.e text color to
red. Now whatever is written in this tag(content) will have the text color as
red
CSS Color
 CSS Color
• There are different coloring schemes in CSS
• 2 widely used techniques are as follows:-
❑ RGB
• This starts with rgb and takes 3 parameter
• 3 parameter basically corresponds to red ,green and blue
• Value of each parameter may vary from 0 to 255.
• Eg: rgb(255,0,0);means color red
❑ HEX
• Hex code starts with #and comprises of 6 numbers which is
further divided into 3 sets
• Sets basically corresponds to Red ,Green and Blue
• A single set value can vary from 00 to ff
• Eg:#ff0000;means color red.
 CSS Background
• Background –image
The background-image property is ued to set an image as a background
of an element . By default the image covers the entire element .
• Background –repeat
By default ,the background –image property repeats the background
image horizontally and vertically .Some image are repeated only
horizontally and vertically.
• Background-position
The background-position property is ued to define the initial position of
the background image .By default the background image is placed on
the top –left of the webpage.
 CSS Background
• <style>
• Body{
background:url(images/[Link]);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
• </style>
 CSS Text and Font
• Text Color:
• The color property is used to set the color of the text.
• Text Alignment:
• Text align property is used to set the horizontal alignment of a text .
• A text can be left or right aligned, centered, or justified.
• Text Decoration:
• The text-decoration property is used to set or remove decoration from text.
• The value text –decoration :none ; is often used to remove underlines from
links.
• i.e underline , overlines ,line-through , none.
• Text transformation:
• The text –transform property is used to specify uppercase and lowercase
letters in a text.
• i.e uppercase , lowercase ,capitalize etc.
 CSS Text and Font
• CSS Font property is used to control the look of texts
• The font-style property is mostly used to specify italic text.

CSS Font Color: This property is used to change the color of the text .
CSS Font family: This property is used to change the face of the font.
CSS Font size:-This property is used to increase or decrease the size of the
font.
CSS Font style: This property is used to make the font bold , italic,or
oblique.
CSS Font variant : This property creates a small – caps effect.
CSS Font weight: This property is used to increase or decrease the
boldness and lightness of the font.
 CSS Text and Font
Font family:
Serif: Serif fonts include small lines at the end of [Link] od
serif :Times new roman, Georgia etc.
sans:-serif : A sans-serif font doesn’t include the small lines at the end of
characters .Example of Sans-serif: Arial, Verdana etc.
CSS Font style:
The font –style
Font size:-This property is used to increase or decrease the size of the
font.
 CSS Text and Font
Font variant:
CSS font variant property specifies how to set font variant of an [Link]
may be normal, and small-caps.
Code for thr editor:

CSS Font weight:

CSS font weight property defines the weight of the font and specify thet
how bold a font is ,The possible values of font weight may be normal,
bold, bolder , lighter or number (100,200,300,…upto 900).
 CSS Text and Font
#demo
{
Color:red;
text-align:left; //left,right,center,justify
text-decoration:none; // underline,overline,line-through
text-transform:capitalize; //lowercase ,uppercase,captalize

#demo1{
font-family: sans-serif; //cursive,fantasy,unset
font-style:oblique; //italic,oblique
font-size:32px;
font-variant:small-caps; //normal,small caps
font-weight:bold; //bold,bolder,lighter
}
CSS Border
 CSS Border

CSS Border Style

The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
 CSS Border
• Example
• Demonstration of the different border styles:
• [Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
 CSS Border
• Example
• Demonstration of the different border styles:
• [Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
 CSS Border
CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
Example Example
Demonstration of the different border widths: [Link] {
[Link] { border-style: solid;
border-style: solid;
border-width: 5px;
border-width: 5px 20px; /* 5px top and bottom, 20px
} on the sides */
}
[Link] {
border-style: solid; [Link] {
border-width: medium; border-style: solid;
} border-width: 20px 5px; /* 20px top and bottom, 5px
[Link] {
on the sides */
border-style: dotted; }
border-width: 2px;
} [Link] {
border-style: solid;
[Link] { border-width: 25px 10px 4px 35px; /* 25px top, 10px
border-style: dotted; right, 4px bottom and 35px left */
border-width: thick;
}
}
 CSS Border-color

CSS Border Color

The border-color property is used to set the color of the four borders.
The color can be set by:
•name - specify a color name, like "red"
•HEX - specify a HEX value, like "#ff0000"
•RGB - specify a RGB value, like "rgb(255,0,0)"
•HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
•transparent
Note: If border-color is not set, it inherits the color of the element.

Example
Demonstration of the different border colors:
[Link] {
border-style: solid;
border-color: red;
}
 CSS Border

CSS Border - Individual Sides

From the examples on the previous pages, you have seen that it is possible to
specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
 CSS Border

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing
with borders.
To shorten the code, it is also possible to specify all the individual border properties in
one property.
The border property is a shorthand property for the following individual border
properties:
•border-width
•border-style (required)
•border-color

Example
p {
border: 5px solid red;
}
 CSS Border

Example
p {
border: 2px solid red;
border-radius: 5px;
}
 CSS Box Model
▪ Every element in CSS can be represented using Box Model
▪ It helps developer to develop and manipulate the elements
▪ It consist of 4 edges
o Content edge- It comprises of the actual content
o Padding edge-It lies in between content and border edge
o Border edge-Padding is followed by the border edge
o Margin edge-It is outside border and controls the margin of the elements

▪ Example:-
#styled{
border:2px solid blue;
margin:5px;
padding:20px;
Content:50px;
}
CSS Box Model
CSS Box Model
CSS Box Model
 CSS Margin
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
•margin-top
•margin-right
•margin-bottom
•margin-left
All the margin properties can have the following values:
•auto - the browser calculates the margin
•length - specifies a margin in px, pt, cm, etc.
•% - specifies a margin in % of the width of the containing element
•inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.

Example
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
 CSS Margin
If the margin property has four values: If the margin property has two values:
•margin: 25px 50px 75px 100px; •margin: 25px 50px;
•top margin is 25px •top and bottom margins are 25px
•right margin is 50px •right and left margins are 50px
•bottom margin is 75px
•left margin is 100px
Example
Use the margin shorthand property with two values:
Example p {
Use the margin shorthand property with four values: margin: 25px 50px;
p { }
margin: 25px 50px 75px 100px;
}

If the margin property has three values: If the margin property has one value:
•margin: 25px 50px 75px; •margin: 25px;
•top margin is 25px •all four margins are 25px
•right and left margins are 50px
•bottom margin is 75px
Example
Use the margin shorthand property with one value:
Example p {
Use the margin shorthand property with three values: margin: 25px;
p { }
margin: 25px 50px 75px;
}
 CSS Margin
The auto Value
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent
element (<div>):
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
 CSS Padding
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
•padding-top
•padding-right
•padding-bottom
•padding-left
All the padding properties can have the following values:
•length - specifies a padding in px, pt, cm, etc.
•% - specifies a padding in % of the width of the containing element
•inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
 CSS Padding
If the padding property has four values: If the padding property has two values:
•padding: 25px 50px 75px 100px; •padding: 25px 50px;
•top padding is 25px •top and bottom paddings are 25px
•right padding is 50px •right and left paddings are 50px
•bottom padding is 75px
•left padding is 100px
Example Example
Use the padding shorthand property with four values: Use the padding shorthand property with two values:
div { div {
padding: 25px 50px 75px 100px; padding: 25px 50px;
} }

If the padding property has three values:

•padding: 25px 50px 75px; If the padding property has one value:
•top padding is 25px •padding: 25px;
•right and left paddings are 50px •all four paddings are 25px
•bottom padding is 75px
Example Example
Use the padding shorthand property with three
values: Use the padding shorthand property with one value:
div { div {
padding: 25px 50px 75px; padding: 25px;
} }
 Pseudo classes
CSS pseudo-classes:
A pseudo-class can be defined as a keyword which is combined to a selector that
defines the special state of the selected elements .It is added to the selector for
adding an effect to the existing elements based on their states .

Syntax:-
A pseudo –class starts with a colon(:),let’s see its syntax;

Selector : pseudo-class{
property : value;
}
 Pseudo class
.active – it is used to add style to an active element .

.hover - It adds special effects to an element when the

user moves the mouse pointer over the
element.

.link – It adds style to the unvisited link.

.visited – It adds special effects to an element , when

is the first child of another element.

first-child – It adds special effects to an element ,which

is the first child of another element.
 Pseudo class
Anchor Pseudo-classes
Links can be displayed in different ways: CSS - The :first-child Pseudo-class
Example The :first-child pseudo-class matches a specified element that is the
first child of another element.
/* unvisited link */
a:link { Match the first <p> element
In the following example, the selector matches any <p> element that is
color: #FF0000; the first child of any element:
}
Example
p:first-child {
/* visited link */ color: blue;
a:visited { }

color: #00FF00;
}

/* mouse over link */ Match the first <i> element in all <p> elements
a:hover { In the following example, the selector matches the first <i> element in all <p> elements:

color: #FF00FF;
} Example
p i:first-child {
color: blue;
}
/* selected link */ Try it Yourself
a:active {
color: #0000FF;
}
<html>
<head>
Pseudo class
<title>Pseudo Class</title>
<style> div h2:first-child{
h2:hover{ color:white;
color:red; background-color:black;
} }
a:link{ </style>
color:red; </head>
background-color:#BED4FA; <body>
<div class="div">
} <h2 >Home</h2>
a:hover{ <h2>About</h2>
color:white; <h2>Contact</h2>
} </div>
a:active{ <h2>This our heading tag.</h2>
color:#28B463; <a href="##">Facebook</a>
background-color:yellow; <a href="####">Yahoo</a>
} </body>
a:visited{ </html>
color:blue;
background-color:#CC0EB5;
}
 Pseudo class

Note:
a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective!

a:active MUST come after a:hover in the CSS

definition in order to be effective!

Pseudo-class names are not case-sensitive.