Scribd
Upload
56 views

Cascading Style Sheets: CSS Are Used To Apply or Specify

Cascading Style Sheets (CSS) allow the specification of styles (e.g. colors, fonts, layout) for HTML documents. CSS properties are grouped into categories like color, background, text, etc. Common tags used with CSS include <span> for inline elements and <div> for block elements. There are three types of CSS stylesheets - inline styles applied directly to elements, internal styles within <style> tags, and external styles in separate files linked via <link>. Selectors specify which elements styles apply to using element names, classes, IDs, and other attributes.

Uploaded by

VEERA MANIKANTA
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
56 views

Cascading Style Sheets: CSS Are Used To Apply or Specify

Cascading Style Sheets (CSS) allow the specification of styles (e.g. colors, fonts, layout) for HTML documents. CSS properties are grouped into categories like color, background, text, etc. Common tags used with CSS include <span> for inline elements and <div> for block elements. There are three types of CSS stylesheets - inline styles applied directly to elements, internal styles within <style> tags, and external styles in separate files linked via <link>. Selectors specify which elements styles apply to using element names, classes, IDs, and other attributes.

Uploaded by

VEERA MANIKANTA
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 40

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;
}

You might also like