Cascading Style Sheets: CSS Are Used To Apply or Specify

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.)
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
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

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.
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>
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>
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
<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
<html> p.a
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
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
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> *
<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
<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
<html> p:hover
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>
<h1 style=“text-decoration: underline;”> cse </h1>
</body>
</html>
style.css
Example.html
<html> h1
{
<head>
<style type=“text/css”> }
h1{
text-decoration: overline;
</style>
</head>
<body>
<h1> cse </h1>
</body>
</html>
Example.html
<html>
<body>
<h1 style=“text-decoration: underline;”> cse </h1>
</body>
style.css
</html> h1
{
}

Cascading Style Sheets: CSS Are Used To Apply or Specify

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets: CSS Are Used To Apply or Specify

Uploaded by

Copyright:

Available Formats

CASCADING STYLE SHEETS

 CSS are used to apply or specify

CSS Property Group Name : Text

Two tags are mainly used in CSS

The <span> tag provides a way to add a hook to a

When used together with CSS, the <div> element

(i) Inline Style Sheets:

Where to specify styles

The selector can have a variety of forms.

(i) Simple Selectors

The simplest selector form is a single element name.

 Class selectors are used to allow different occurrences of the

The general form of an class selector is as follows:

Sometimes it is convenient to have a class of style specifications

 An id selector allows the application of a style to one specific

#specific-id {property-value list}

 The universal selector, denoted by an asterisk (*),

Style.html EXAMPLE 1 Style.css

Padding is the space between the content of an element and its

(i) Style sheet conflict

Inline > Internal > External

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

<h1 style=“text-decoration: underline;”> cse </h1>

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

<h1> cse </h1>

You might also like