CASCADING STYLE SHEETS
CSS are used to apply or specify
styles to the HTML documents.
CSS Property Groups
(i) Color
(ii) Background and Borders (xv) Multi-column
(iii) Basic Box (xvi) Paged Media
(iv) Flexible Box (xvii) Generated Content
(v) Text (xviii) Filter Effects
(vi) Text Decoration (xix) Image/Replaced Content
(vii) Fonts (xx) Masking
(viii) Writing Modes (xxi) Speech
(ix) Table
(x) Lists and Counters
(xi) Animation
(xii)Transform
(xiii)Transition
(xiv)Basic User Interface
CSS Property Group Name : Text
Property Description Values Examples
Name
Color It sets color of (i) Color name like Color : red
text. red, green, blue. Color : green
(ii) Hex value like Color : blue
#FF0000.(# is Color : #FF0000
optional) Color : FF0000
(iii) RGB value Color : #C0C0C0
rgb(255,0,0). Color : rgb(255,0,0)
Color : rgb(0,255,0)
Color : rgb(0,0,255)
Text-align It sets horizontal Left, right, center, Text-align : left
alignment of text. justify. Text-align : right
(Note: justify means Text-align : justify
every line is stretched Text-align : center
with equal width, left
and right margins are
straight.)
CSS Property Group Name : Text
Property Description Values Examples
Name
Text-decoration It sets or None, underline, Text-decoration: none
removes over line, line- Text-decoration : underline
decorations through Text-decoration : over line
from text. (Note: “none” Text-decoration : line-through
value removes
underlines from
links.)
Text-transform It can be used Uppercase, Text-transform : Uppercase
to turn every Lowercase, Text-transform : Lowercase
thing into Capitalize, Text-transform : Capitalize
uppercase or None. Text-transform : None.
lowercase
letters, or
capitalize the
first letter of
each word.
CSS Property Groups
CSS Property Group Name : Text
Property Description Values Examples
Name
Text-indent It specifies Length Text-indent : 10px
indentation of Text-indent : 50px
the first line of Text-indent : 100px
a text.
Letter-spacing It specifies Normal Letter-spacing : 3px
space between Length Letter-spacing : -3px
characters in a Note: Negative values make
text. the characters come closer
and overlap.
Positive values make the
characters move farther and
make them clear.
Line-height It specifies Normal, Line-height : 0.8
space between Number, Line-height : 1.8
lines. Length.
CSS PROPERTY GROUPS
CSS Property Group Name : Text
Property Description Values Examples
Name
Direction It changes the Rtl, Direction : rtl
direction of an Ltr Direction : ltr
element. Note: rtl stands for right-to-left
and ltr stands for left-to-right.
Word-spacing It specifies Normal, Word-spacing : 10px
space between length Word-spacing : -5px
words in a text.
Text-shadow It adds shadow None Text-shadow : 3px 2px 0.5em red
to text.
CASCADING STYLE SHEETS
Two tags are mainly used in CSS
(i) <Span>
(ii) <Div>
<div> tag is a block-level element. It means browsers always place a
line break before and after the <div> element.
<span> tag is an in-line element. It means that the in-line elements
doesn’t start on a new line and the content inside the <span> tag
always flows with the text placed before and after the <span> tag.
The <span> tag is used to group inline-
elements in a document.
Example.html
The <span> tag provides no visual change
<html> by itself.
<body>
<span> neel </span>
<span> nitin </span>
<span> mukesh </span>
</body>
</html>
CASCADING STYLE SHEETS
The <span> tag provides a way to add a hook to a
Example.html part of a text or a part of a document.
<html>
<body>
<span style=“background-color : red“> neel nitin mukesh </span>
</body>
</html>
CASCADING STYLE SHEETS
When used together with CSS, the <div> element
Example.html
can be used to style blocks of content.
<html>
<body>
<div style=“background-color : red“>
Neel nitin mukesh
</div>
</body>
</html>
INLINE STYLE SHEET
(i) Inline Style Sheets:
Inline Style sheets are applied to the content of a single HTML
element.
How to specify styles
The general form of inline style sheets is
Style=“property_1:value_1; property_2:value_2; property_n:value_n;”
Where to specify styles
Inline style specifications appear within the opening tag and apply
only to the content of that element.
Inline.html
<html>
<head>
<title> Example on inline style sheets </title>
</head>
<body>
<p Style=“ Text-shadow : 3px 3px 0.5em Red; “ >
Welcome to html
</p>
</body>
</html>
(ii) Internal or Embedded or Document-Level Style Sheets
Internal Style sheets are applied to the whole body of a
document.
Where to specify styles
Internal Style specifications appear as the content of a
style element within the header of a document.
How to specify styles
The general form of the content of a style element is
as follows:
<style type=“text/css”>
selector
{
property_1 : value_1;
property_2 : value_2;
…………………
property_n : value_n;
}
</style>
The rule_list has the same form as the quoted list
for inline style sheets, except that it is delimited
by braces rather than double quotes.
Internal.html
<html>
<head>
<title> Example on internal style sheets </title>
<Style type=“text/css”>
p
{
Text-shadow : 3px 3px 0.5em Red;
}
</Style>
</head>
<body>
<p> Welcome to html </p>
</body>
</html>
(iii) External Style Sheets
External Style sheets are applied to the bodies of any number of
documents.
How to specify styles:
The external style sheets can be attached to a HTML document using
following statements:
<link rel=“stylesheet” type=“text/css” href=“style.css”>
Where to specify styles:
The external style sheets can be included with in the <HTML> or <BODY> or
<HEAD> of HTML document.
External.html
<html>
<head>
<title> Example on External style sheets </title>
</head>
<body>
<Link rel=“stylesheet” type=“text/css” href=“style.css”>
<p> Welcome to html </p>
</body>
</html>
Style.css
p
{
Text-shadow : 3px 3px 0.5em Red;
}
SELECTOR FORMS
The selector can have a variety of forms.
(i) Simple Selectors
(ii) Class selectors
(iii) Generic Selectors
(iv) Id Selectors
(v) Universal Selectors
(vi) Pseudo Classes
SIMPLE SELECTORS
The simplest selector form is a single element name.
The property values in the rule apply to all occurrences of the
named element.
The selector could be a list of element names separated by commas,
in which case the property values apply to all occurrences of all of the
named elements.
SIMPLE SELECTORS
EXAMPLE 1 Style.css
Style.html
<html> p
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
<p> cse </p> text-transform :uppercase
<p> ece </p>
<p> eee </p> }
</html>
OUTPUT
SIMPLE SELECTORS
EXAMPLE 2
Style.html Style.css
<html> h1, h2, h3
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
<h1> cse </h1> text-transform :uppercase
<h2> ece </h2>
}
<h3> eee </h3>
</html>
OUTPUT
CLASS SELECTORS
Class selectors are used to allow different occurrences of the
same tag to use different style specifications.
The general form of an class selector is as follows:
selector.class_name {property-value list}
CLASS SELECTORS
EXAMPLE 1
Style.html Style.css
<html> p.a
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
text-decoration: underline
<p class = “a” > cse </p> }
<p class = “b” > ece </p> p.b
{
<p class = “c” > eee </p>
text-decoration: overline
</html> }
OUTPUT p.c
{
text-decoration: line-through
}
GENERIC SELECTORS
Sometimes it is convenient to have a class of style specifications
that applies to the content of more than one kind of tag.
This is done by using a generic class, which is defined without a
tag name in its name.
In place of the tag name, you use the name of the generic class,
which must begin with a period, as in the following generic style
class:
.class-name {property-value list}
Style.html EXAMPLE 1 Style.css
<html> .a
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
text-transform:uppercase
<p class = “a” > cse </p> }
<p> ece </p>
<p> eee </p> OUTPUT
<p> it </p>
<p> mech </p>
<h1 class = “a” > civil </h1>
<h1> eie </h1>
<h1> ame </h1>
<h1> pce </h1>
<h1> bme </h1>
</html>
ID SELECTORS
An id selector allows the application of a style to one specific
element.
The general form of an id selector is as follows:
#specific-id {property-value list}
ID SELECTORS
EXAMPLE 1
Style.css
Style.html
<html> #a
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
text-decoration: underline
<p id = “a” > cse </p> }
<p id = “b” > ece </p> #b
{
<p id = “c” > eee </p>
text-decoration: overline
</html> }
OUTPUT #c
{
text-decoration: line-through
}
UNIVERSAL SELECTORS
The universal selector, denoted by an asterisk (*),
applies its style to all elements in a document.
UNIVERSAL SELECTORS
Style.html EXAMPLE 1 Style.css
<html> *
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
<h1> cse </h1> text-transform :uppercase
<h2> ece </h2>
}
<h3> eee </h3>
</html>
OUTPUT
PSEUDO CLASSES
Pseudo classes are styles that apply when something happens, rather
than because the target element simply exists.
Let us describe and illustrate two pseudo classes: hover and focus.
The names of pseudo classes begin with a colon.
The style of the hover pseudo class applies when its associated
element has the mouse cursor over it.
The style of the focus pseudo class applies when its associated
element has focus.
EXAMPLE 1
Style.html Style.css
<html> input :hover
{
<link rel=“stylesheet” type=“text/css” href=“style.css” >
background: red;
User name <input type="text"> }
</html> input :focus
{
OUTPUT
background: blue;
}
EXAMPLE 1
Style.html Style.css
<html> p:hover
<link rel=“stylesheet” type=“text/css” href=“style.css” > {
background: red;
<p> User name </p> }
</html>
OUTPUT
THE BOX MODEL
Outer Edge
MARGIN
Border
PADDING
WELCOME TO HTML
Padding is the space between the content of an element and its
border.
Margin is the space between the border of an element and the element’s
neighbor.
Two types of conflicts can occur in CSS
(i) Style sheet conflict
(ii) Property value conflict
(i) Style sheet conflict
Style sheet conflict occur when style sheets at two or
more levels specify different values for the same
property on the same element.
This particular kind of conflict is resolved by the
precedence of the three different levels of style sheets.
Inline style sheets have precedence over document and
external style sheets, and document style sheets have
precedence over external style sheets. i.e
Inline > Internal > External
Example.html style.css
<html> h1
{
<head>
text-decoration: line-through;
<style type=“text/css”> }
h1{
text-decoration: overline;
</style>
</head>
<body>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
<h1 style=“text-decoration: underline;”> cse </h1>
</body>
</html>
style.css
Example.html
<html> h1
{
<head>
text-decoration: line-through;
<style type=“text/css”> }
h1{
text-decoration: overline;
</style>
</head>
<body>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
<h1> cse </h1>
</body>
</html>
Example.html
<html>
<body>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
<h1 style=“text-decoration: underline;”> cse </h1>
</body>
style.css
</html> h1
{
text-decoration: line-through;
}
