Cascading Style Sheet (CSS)

CASCADING STYLE
SHEETS (CSS)
Style Sheet Basics
 Formatting to a particular piece of
content in a document
 To create presentation for a particular

element or a set of elements
Style Sheet Rules
 Style sheet rules are made up of
Selector
( the HTML tag that receives the style)
Declaration / Rules
( the style sheet properties and their values)
 Syntax :
selector { property1 : value1; ……
propertyn : valuen ; }
 Example :
body { background-color : black;
color : pink ; }
h1 { text-decoration : underline; font-family : Impact ;
color : pink ; }
Types of Style Sheets
(Adding Style to a Document)
 Embedded Style Sheet
 Linked / External Style Sheet
 Inline Style Sheet

Embedded Style Sheet
 Using <STYLE> element, embed a document-wide style in the <HEAD>
element of the document.
 Example :
--------------------------------------------
<html>
<head>
<title> Embedded Style Sheet </title>
<style>
h1 { text-decoration : underline; font-family : Impact ;
color : pink ; }
</style>
</head>
<body>
<h1> CSS Embedded Style Sheet </h1>
</body>
</html>
---------------------------------------------
Linked / External Style Sheet
 Using <LINK> element in <HEAD> element, link a .css file to apply
external style to a document
 Example :
---------------------------------------------
- CSSDemo.css
h1 { text-decoration : underline;
font-family : Impact ;
color : pink ; }
---------------------------------------------
<html>
<head>
<title> Linked Style Sheet </title>
<LINK REL=“STYLESHEET” HREF=“CSSDemo.css” />
</head>
<body>
<h1> CSS Linked Style Sheet </h1>
</body>
</html>
---------------------------------------------
Inline Style Sheet
 Using the style attribute exactly where the style needs to be
applied.
 Example :
---------------------------------------------
<html>
<head>
<title> Inline Style Sheet </title>
</head>
<body>
<h1 style=“text-decoration : underline;
font-family : Impact ;
color : pink ; “ > CSS Inline
</h1>
</body>
</html>
---------------------------------------------
Ways to apply Style Rules
 Element
 ID Rules
 Class Rules
Element
 Selects all elements of the name specified

in the rule
 Syntax :
element name { property1 : value1; ……
 Example :
body { background-color : black;
color : pink ; }
h1, h2, h3 { text-decoration : underline; font-
family : Impact ;
color : pink ; }
ID Rules
 Style to be applied is limited to

one particular tag only
 ID should be with unique value.
 Syntax :
#IDName { property1 : value1; ……
ID Rules
 Example :
---------------------------------------------
<html>
<head>
<title> Style Sheet with ID Rules </title>
<style>
#headingFormat
{ text-decoration : underline; font-family : Impact ;
color : pink ;
}
</style>
</head>
<body>
<h1 id=“headingFormat“ > CSS with ID Rules
</h1>
</body>
</html>
Class Rules
 Unlike ID values, class values don’t

have to be unique as many elements
can be members of the same class
 ID should be with unique value.
 Syntax :
.Class Name { property1 : value1; ……
Class Rules
 Example :
---------------------------------------------
<html>
<head>
<title> Style Sheet with ID Rules </title>
<style>
.headingFormat
{ text-decoration : underline; font-family : Impact ;
color : pink ;
}
</style>
</head>
<body>
<h1 class=“headingFormat“ > CSS with Class Rules
</h1>
</body>
</html>
---------------------------------------------
CSS Properties
 CSS Measurement
○ in - inch
○ mm - millimeters
○ cm - centimeters
○ pt - point size
○ pc - picas
○ px - pixel
○ em - height – units
○ ex - x-height units
○ Percentage value i.e. 200%
- 72 pt = 1 inch
- 12 pt = 1 pica
- 6 pc = 1 inch
CSS Properties
 CSS having more than 50 different
properties and values
 Some properties might not work in
your browsers
CSS Properties
 Font Properties
 Text Properties
 List Properties
 Color and Background Properties
 Box Properties
Margin Properties
Border Properties
Padding Properties
Height and Width properties
 Display Properties
Font Properties
 font-family
 font-size
 font-style
 font-weight
 font-variant
 font
Font Properties
 font-family
Used to set the font family (font name) for
the text
Possible Values
○ Arial, Serif, Cursive, etc..
Example
○ body { font-family : Arial, Futura,
Helvitica ; }
Font Properties
 font-size
Used to set the relative or physical size of the font
used.
Possible Values
○ xx-small, x-small, small, medium, large, x-large, xx-
large
○ larger, smaller
○ 48pt, 2cm, 12px, or 0.25in
○ 150%
Example
○ p { font-size : 18pt ; }
Font Properties
 font-style
Used to specify font style for the font being
used.
Possible Values
○ oblique ( simply slant the font.)
○ normal
○ italic
Example
○ h1 { font-style : italic ; }
Font Properties
 font-weight
Selects the weight or darkness of the font.
Possible Values
○ 100 to 900
○ normal, bold, bolder, lighter
○ extra-light, light, demi-light, medium, demi-bold,
bold, extra-bold
Example
○ h1 { font-weight : 900 ; }
○ .important { font-weight : bolder ; }
Font Properties
 font-variant
Used to select a variation of the specified
(or default) font family.
Possible Values
○ normal
○ small-caps
Example
○ h1 { font-variant : small-caps ; }
Font Properties
 font
This property provides a concise way to specify
all the font properties with one style rule.
General form
○ font : font-style font-variant font-weight
font-size/line-weight font-family
Example
○ p { font : italic 12pt/24pt ; }
This notation does not require all the properties to be present

However, ordering is important so be careful with this
shorthand form
Text Properties
 text-transform
 text-decoration
 word-spacing
 letter-spacing
 vertical-align
 text-align
 text-indent
 line-height
 white-space
Text Properties
 text-transform
Determines the capitalization of text that it
affects.
Possible Values
○ capitalize
○ uppercase
○ lowercase
○ none
Example
○ p { text-transform : capitalize ; }
Text Properties
 text-decoration
Used to define an effect on text.
Possible Values
○ line-through
○ overline
○ underline
○ none
Example
○ h1 { text-decoration : overline ; }
Text Properties
 word-spacing
Specifies the amount of space between
words.
Possible Values
○ normal
○ 10pt, 1cm, 2px, or 0.25in
Example
○ body { word-spacing : 10pt ; }
Text Properties
 letter-spacing
Specifies the amount of space between
letters.
Possible Values
○ normal
○ 10pt, 1cm, 2px, or 0.25in
Example
○ body { letter-spacing : 10pt ; }
Text Properties
 vertical-align
Controls the vertical positioning of text and
images with respect to the baseline currently in
effect.
Possible Values
○ baseline, super, sub, top, text-top, middle, bottom, text-bottom
○ Percentage Value like 20%
Example
○ body { vertical-align: bottom ; }
Text Properties
 text-align
Determines how text in a block-level element,
such as <p> tag, is horizontally aligned.
Possible Values
○ left (Default)
○ right
○ center
○ justify
Example
○ div{ text-align: center ; }
Text Properties
 line-height
Sets the height between lines in a block-
level element, such as a paragraph.
Possible Values
○ 10pt, 1cm, 2px, 0.25in etc…..
Example
p.double{ line-height: 2 ; }
Text Properties
 white-space
Controls how spaces, tabs and newline
characters are handled in an element
Possible Values
○ normal
○ pre
○ nowrap
Example
○ p{ white-space: nowrap ; }
List Properties
 list-style-type
 list-style-image
 list-style-position
 list-style
List Properties
 list-style-type
The items in ordered or unordered lists are
labeled with a numeric value or a bullet,
depending on the list form.
Possible Values
- For ordered list
 decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
 none
- For unordered list

 disc, circle, square
Example
○ ol{ list-style-type : upper-roman ; }
○ ul {list-style-type : square ; }
List Properties
 list-style-image
This property can assign a graphic image
to a list label.
URL either absolute or relative to the
image to use.
Example
○ ul {list-style-image : url(flag.gif) ; }
○ ul {list-style-image : none; }
List Properties
 list-style-position
Controls where a list item’s label is
displayed in relation to the element’s box.
Possible Values
○ inside
○ outside (Default)
Example
○ ul.compact {list-style-position : inside ; }
List Properties
 list-style
This property allows a list’s type, image, or
position properties all to be set by a single
property.
This property can appear in any order and
are determined by value.
Example
○ ul.special {list-style : inside url(bullet.gif) ; }
Color and Background Properties
Three basic forms of color specifications :
 Color names
e.g. Aqua, Black, Blue, Gray, Green, Lime, Pink etc..
 Hexadecimal Values
e.g. #RRGGBB, #FF0088
 RGB Values
e.g. RGB(0, 255, 0)
 color
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background
 color
Used to set the text color.
Example
○ body { color : blue ; }
 background-color
Sets an element background color
Example
○ p { background-color : pink ; }
 background-image
Associates a background image with an
element
Example
○ body { background-image : URL(bars.gif) ; }
 background-repeat
Determines how background images file in
cases where they are smaller than the
canvas space used by their associated
elements.
Possible Values
○ repeat, repeat-x, repeat-y, no-repeat
Example
○ body { background-image : URL(bars.gif) ;
background-repeat : repeat-x ; }
 background-attachment
Determines whether a background image
should scroll or fixed on the screen.
Possible Values
○ scroll (Default)
○ fixed
Example
○ body { background-image : URL(bars.gif) ;
background-attachment : fixed ; }
 background-position
Specifies how a background image not a color, is
positioned within the canvas space used by its element.
Three Ways to do this :
○ Absolute distance
e.g. p { background-image : URL(picture.gif) ;
background-position : 10px 10px ; }
○ Percentage Value
background-position : 20% 40% ; }
○ With keywords
background-position : center center; }
Other possible values :
top left, top center, top right etc..
 background
This property is a comprehensive property
that allows any or all of the specific
background properties to be set at once.
Property order does not matter.
Any property not specified uses the default
value.
Example
○ p {background : white url(picture.gif) repeat-y top center
;}
Box Properties
 Margin Properties
 Border Properties
 Padding Properties
 Height, Width and Positioning
Properties
Margin Properties
 Four margin properties are available to set
each of an element’s four margins
individually.
margin-top
margin-right
margin-bottom
margin-left
 All of the margins can be set together

margin
Margin Properties
 Example
body { margin-top : 20px;
margin-right : 30px;
margin-bottom : 20px;
margin-left : 30px ; }
or
body { margin : 20px 30px 20px 30px; }
or
body { margin : 20px 30px; }
or
body { margin : 20px ; }
Border Properties
 border-style
 border-width
 border-color
 border
Border Properties
 border-style
Used to set the appearance of the border
Possible Values
○ none (Default)
○ dotted, dashed, solid, double, groove, ridge, inset,
outset
Example
○ h1 {border-style : solid ; }
Border Properties
 border-width
Numerous properties are used to set the width of
borders.
Properties to be used
○ border-top-width
○ border-right-width
○ border-bottom-width
○ border-left-width
○ border-width
Possible Values
○ thin, medium, thick
○ 10px
Example
○ h1 {border-width : 10px ; }
Border Properties
 border-width
Example
○ p {border-style : solid ; border-width: 10px}
○ double {border-style : double ; border-width: thick}
○ div {border-style : solid ; border-top-width: 20px}
Border Properties
 border-color
Numerous properties are used to assign a
color to the borders.
Properties to be used
○ border-top-color
○ border-right-color
○ border-bottom-color
○ border-left-color
○ border-color
Possible Values
○ Any color name as described earlier
Border Properties
 border-color
Example
○ p {border-style : solid ; border-color: green ;}
○ double {border-style : double ; border-color: pink ;}
○ div {border-style : solid ; border-top-color: blue ;}
Border Properties
 Border
Several border properties allow any combination of
width, color, and style information to be set in a single
property.
The order of the property values to set the style, width,
and color may seem arbitrary.
Example
○ p {border : double 20px red ; }
Padding Properties
 The space between an element’s border
and its content can be specified by using
the padding properties.
 Properties to be used
padding-top
padding-right
padding-bottom
padding-left
 Example
div { padding-top : 1cm ; }
p { padding : 2mm 4mm ; }
Width and Height Properties
 Used to set the width and height of an element
 Example
#p1 { width : 200px; height : 300px}
#p2 { width : 200%; height : 200% ; }
…..
<body>
<p id=“p1”>
Test paragraph 1 for width and height properties
</p>
<p id=“p2”>
Test paragraph 2 for width and height properties
</p>
…….
Display Properties
 CSS contain several classification
properties that determine the display
classification of an element.
 Allows an element’s display type to be
changed to one of four values.
 Possible values
inline, block, list-item, none
 Example
p { display : inline }
p .remove { display : none ;}

Cascading Style Sheet (CSS)

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cascading Style Sheet (CSS)

Caricato da

Copyright:

Formati disponibili

CASCADING STYLE

 To create presentation for a particular

 Embedded Style Sheet

 Linked / External Style Sheet

 Inline Style Sheet

 Selects all elements of the name specified

 Style to be applied is limited to

 Unlike ID values, class values don’t

This notation does not require all the properties to be present

- For unordered list

 All of the margins can be set together

Potrebbero piacerti anche