2. 1.0 Introduction to Cascading Style
Sheets
• What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a
problem
• CSS can save a lot of work
• External Style Sheets are stored in CSS files
3. • CSS Solved a Big Problem
• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large web sites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
• In HTML 4.0, all formatting could be removed from the HTML document,
and stored in a separate CSS file.
• All browsers support CSS today.
• The key property of style sheet technology is that it can be used to
separate the presentation of information from the information content
and semantic tagging.
• Style sheets gives all the elements on a page a consistent appearance
4. 2.0 CSS Core Syntax
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
CSS Comments
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
5. CSS Example
• A CSS declaration always ends with a
semicolon, and declaration groups are
surrounded by curly braces:
• p {color:red;text-align:center;}
• To make the CSS code more readable, you can
put one declaration on each line.
• In the following example all <p> elements will
be center-aligned, with a red text color:
8. 3.0 Cascading Style Sheet Features
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
9. External Style Sheet
• An external style sheet is ideal when the style is applied to
many pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css“
title=“style1”/>
</head>
• An external style sheet can be written in any text editor.
• The file should not contain any html tags.
• Your style sheet should be saved with a .css extension.
10. • An example of a style sheet file is shown
below:
• hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
• Do not add a space between the property
value and the unit (such as margin-left: 20 px).
The correct way is: margin-left:20px
11. Internal Style Sheet
• Internal Style Sheet
An internal style sheet should be used when a single document has a
unique style.
You define internal styles in the head section of an HTML page, by using the
<style> tag, like this:
<head>
<style>
h1 {color:blue;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
12. Inline Styles
An inline style may be used to apply a unique style
for a single element.
• An inline style loses many of the advantages of
style sheets by mixing content with presentation.
Use this method sparingly!
• To use inline styles you use the style attribute in
the relevant tag.
• The style attribute can contain any CSS property.
• The example shows how to change the color and
the left margin of a paragraph:
• <p style="color:blue;margin-left:20px">This is a
paragraph.</p>
13. Multiple Style Sheets
• If some properties have been defined for the same selector in different style sheets, the
value will be inherited from the more specific style sheet.
• For example, assume that an external style sheet has the following properties for the <h1>
element:
• h1 {
color: navy;
margin-left: 20px;
}
• then, assume that an internal style sheet also has the following property for the <h1>
element:
• h1 {
color: orange;
}
• If the page with the internal style sheet also links to the external style sheet the properties
for the <h1> element will be:
• color: orange;
margin-left: 20px;
• The left margin is inherited from the external style sheet and the color is replaced by the
internal style sheet.
•
14. Cascading order
• Browser default
• External and internal style sheets (in the head section)
• Inline style (inside an HTML element)
• So, an inline style (inside an HTML element) has the
highest priority, which means that it will override a
style defined inside the <head> tag, or in an external
style sheet, or in a browser (a default value).
• If the link to the external style sheet is placed below
the internal style sheet in HTML <head>, the external
style sheet will override the internal style sheet!
15. External style sheet types
Style sheets can be associated with documents using a list of link
elements in the head.
There are three different relationships external style sheets can have
with the document: persistent, preferred, and alternate.
Persistent
• These style sheets are always enabled (they are always “on”) and
are combined with the active style sheet.
• They can be used for shared rules common to every style sheet.
• To make a style sheet persistent, the rel attribute is set to
“stylesheet” and no title attribute is set.
• To make the style sheet paul.css persistent, the following link
element would be included in the head:
• <link rel="stylesheet" type="text/css" href="paul.css" />
16. Preferred
• These style sheets are enabled by default (they are “on” when the page is
loaded).
• They can then be disabled if the user selects an alternate style sheet.
• To make a style sheet preferred, the rel attribute is set to “stylesheet” and
the style sheet is named with the title attribute.
• Several preferred style sheets can be grouped together by giving them
identical title attributes.
• These grouped style sheets are then all enabled and disabled together.
• If more than one group of preferred style sheets are declared, the first
group takes precedence.
• To make paul.css preferred, a title attribute is added, giving the default
style a name.
• <link rel="stylesheet" type="text/css" href="paul.css" title="bog standard"
/>
17. Alternate(user selection)
• These style sheets can be selected by the visitor as alternatives to the
preferred style sheet.
• This allows the visitor to personalize a site and choose his or her favorite
scheme. They can also be used for accessibility.
• To specify an alternate style sheet, the rel attribute is set to “alternate
stylesheet” and the style sheet is named with a title attribute.
• As with preferred sheets, these style sheets can also be grouped together
by giving them identical title attributes.
• Using the previous example again; to make paul.css into an alternate style
sheet, the keyword “alternate” is added to the rel attribute.
• <link rel="alternate stylesheet" type="text/css" href="paul.css"
title="wacky" />
• Note that these relationships only apply to external style sheets which are
included using the link element.
18. External Style Sheet-Media Attribute
<link rel=“stylesheet” type=“text/css”
href=“style1.css” media=“screen,tv,projection”/>
Possible values for media attribute
Value Media type
All All types
Aural Speech synthesizer
Braille Device generating braille characters
Handheld Handheld device such as cellphone or PDA
Print Printer
Projection Projector
Screen Computer monitor
Tv television
19. 4.0 Selector Strings
• Type Selector
• Universal Selector
• ID Selector
• Class Selector
– Pseudo classes
• Descendant Selector
21. Universal Selector
• The * selector selects all elements.
• The * selector can also select all elements inside another element
<html>
<head>
<style>
*
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My best friend is Mickey.</p>
</body>
</html>
23. ID Selector
• The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
24. Class Selector
• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a ".“
• <html>
• <head>
• <style>
• .center
• {
• text-align:center;
• }
• </style>
• </head>
• <body>
• <h1 class="center">Center-aligned heading</h1>
• <p class="center">Center-aligned paragraph.</p>
• </body>
• </html>
25. Pseudo classes
• CSS pseudo-classes are used to add special
effects to some selectors.
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {property:value;}
• CSS classes can also be used with pseudo-
classes:
• selector.class:pseudo-class {property:value;}
26. <html>
<head>
<style>
a:link {color:red;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */
</style>
</head>
<body> <p><b><a href="default.asp" target="_blank">This is a
link</a></b></p> <p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS
definition in order to be effective.</p>
</body>
</html>
27. Descendant Selector
A selector may be specialised so that it holds
only within the content of certain element
types.
Ul span {font-variant:small-caps}
The above statement says that the text within
a span element that is in turn part of the
content of an unordered or bulleted list
should be displayed in small-cap font form.
28. Descendant Selector
Class selector can also be included in the
ancestor list.
.special span
Would apply to any span element within the
content of any element belonging to the class
special.
Ul ol li {letter-spacing:1cm}
Applies only to an li element within ol element
that is within a ul element.
29. At-Rules
The @import at-rule is a mechanism for
importing one style sheet into another. It
should be followed by a URI value and a
semicolon, but it’s possible to use a string
value instead of the URI value.
@import url(“ a.css”);
The @import rules in a style sheet must precede
all rule sets
30. 5.0 Style Inheritance
*while cascading is based on the structure of style
sheets,inheritance is based on the tree structure
of the document itself
*An element inherits a value for one of its
properties by checking to see if its parent
element in the document has a value for that
property and if so,inheriting the parents value.
*The parent may in turn inherits a property value
from its parent and so on.
31. Few points about inheritance
• The height property of an element is not inherited from it
parent
• The value contained in a style declaration for a property is
known as the specified value for the property.This property
can be either relative or absolute.An absolute value is a
value that can be understood without the need for any
context such as the value 2cm.A relative value on the other
hand cannot be understood without knowing some
context.for example the property declaration font-
size:larger uses the relative value larger to set the size of
the font of an element.
• CSS2 recommendantion allows every style property to be
given the value inherit,whether or not the property is
inherited normally.
32. 6.0 Text Properties
1)Text Color
• The color property is used to set the color of
the text.
• With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
33. Text Color-Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for
a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
34. Text Color contd…
Colors in CSS can be specified by the following methods:
Hexadecimal colors
RGB colors
Hexadecimal Colors
• Hexadecimal color values are supported in all major browsers.
• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 0 and FF.
• For example, the #0000ff value is rendered as blue, because the blue component is set to its
highest value (ff) and the others are set to 0.
RGB Colors
• RGB color values are supported in all major browsers.
• An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue)
defines the intensity of the color and can be an integer between 0 and 255 or a percentage value
(from 0% to 100%).
• For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its
highest value (255) and the others are set to 0.
• Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).
35. Formats for specifying numeric color
values
Format Example
Functional,integer
arguments
Rgb(255,170,0)
Functional,percentage
arguments
Rgb(100%,66.7%,0%)
Hexadecimal #ffaa00
Abbreviated hexadecimal #fa0
Divide
170/255
36. Color names and RGB Values
Color Name RGB Value
Black #000000
Gray #808080
Silver #c0c0c0
White #ffffff
Red #ff0000
Lime #00ff00
Blue #0000ff
Yellow #fffff00
Maroon #800000
Green #008000
Acqua #00ffff
37. 2.Text Formatting
Primary CSS text properties
property
Text-decoration
Letter-spacing
Word -spacing
Text-transform
Text-indent
Text-align
White-space
38. Text-decoration
The text-decoration property specifies the
decoration added to text.
• Property Values
• none -Defines a normal text.
• Underline- Defines a line below the text
• overline -Defines a line above the text
• line-through - Defines a line through the text
• Blink - Defines a blinking text
39. Text decoration-example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
40. Letter-spacing
• The letter-spacing property increases or
decreases the space between characters in a
text.
• Property Values
• Normal - No extra space between characters.
This is default
• length -Defines an extra space between
characters (negative values indicate space to
be removed)
41. Word-spacing
The word-spacing property increases or
decreases the white space between words.
• Property Values
• normal -Defines normal space between
words .
• length - Defines an extra space between
words in px, pt, cm, em, etc.
• Negative values indicate space to be removed
42. Text-transform
The text-transform property controls the
capitalization of text.
Property Values
• none - No capitalization. The text renders as it is.
This is default
• Capitalize- Transforms the first character of each
word to uppercase
• uppercase -Transforms all characters to
uppercase
• lowercase -Transforms all characters to
lowercase
43. Text-indent
The text-indent property specifies the
indentation of the first line in a text-block.
• Property Values
• length Defines a fixed indentation in px, pt,
cm, em, for box width etc.
• % Defines the indentation in % of the width of
the parent element
44. Text indent-Example
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</body>
</html>
45. Text-align
The text-align property specifies the horizontal
alignment of text in an element.
• Property Values
left- Aligns the text to the left
right -Aligns the text to the right
center- Centers the text
justify - Stretches the lines so that each line
has equal width (like in newspapers and
magazines)
46. White-space
The white-space property specifies how white-space inside an
element is handled.
• Property Values
• normal - Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary. This is default
• Nowrap - Sequences of whitespace will collapse into a
single whitespace. Text will never wrap to the next line.
The text continues on the same line until a <br /> tag is
encountered
• pre - Whitespace is preserved by the browser. Text will
only wrap on line breaks Acts like the <pre> tag in HTML
47. Text Properties
• Css defines a direction property which specifies the
direction in which the text is written.
• Ltr indicate left to right language and rtl indicates right
to left.
Font Families
A font family is a collection of related fonts,and a font is a
mapping from a character to a visual representation of
the character(glyph).Each glyph is drawn relative to a
rectangular character cell.
The font family to be used for displaying text within an
HTML element is specified using the font-family style
property.
48. 3.CSS generic font families
Font family Description
Serif A serif is a short decorative line at the end
of the stroke of a letter
Sans-serif Usually proportionately spaced
Cursive Looks more like cursive handwriting and
printing
Fantasy Glyphs are still recognizable but are non
traditional
Monospace All glyphs have the same width.
49. 4.Length specification in CSS
• In css the size of the font is specified using the
font-size property.
• Some example declaration include
Font-size:0.25in
Font-size:12pt
Font-size:15px
Css length identifiers
Identi
fier
meaning
In Inch
Cm centimeter
Mm Millimeter
Pt Point:1/72 inch
Pc Pica:12 points
Px Pixel;1/96 inch
Em Em:reference font size
Ex Ex:roughly the height of
lowercase “x” character in the
reference font
50. Length specification in CSS
• Mozilla 1.4 and IE 6 maintain the relationship
1in = 2.54 cm = 25.4mm=72pt=6pc=96px both
on screen and when printing document
• Absolute units do not depend on other style
property values.(e.g) in,cm,mm
• Relative units depend on the medium
displaying the document.(e.g) px
51. Some features and quantities defined
by a font
Baseline height is the distance from the bottom
of a character cell to an imaginary line known
as the baseline.
M x
Cell height Ex height
Baseline
height
baseline
53. 5.Line Boxes
• Each line box contains one line of text. The height
of a line box is precisely the height of a character
cell .
• The height of the box will be number of line
boxes multiplied by the height of character cell.
• The browsers default setting of the height of line
boxes can be overridden by specifying a value for
the line height property
• Line-height:1.5em
Line height:150%
Line-height:1.5
54. Line boxes
T h I s I s
G
Half-Leading
Text Cell Height
Half-Leading
Line-height
55. 7.0 Some other useful style properties
1.Lists
The list-style-type specifies the type of list-item marker in a list.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
56. Style Properties 2.tables
Table Borders
• To specify table borders in CSS, use the border property.
• The example below specifies a black border for table, th, and td elements:
• Example
• table, th, td
{
border: 1px solid black;
}
Collapse Borders
• The border-collapse property sets whether the table borders are collapsed into a single border or separated:
• Example
• table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
• Width and height of a table is defined by the width and height properties.
• The example below sets the width of the table to 100%, and the height of the th elements to 50px:
• Example
• table
{
width:100%;
}
th
{
height:50px;
}
57. Style Properties 2.tables
Table Text Alignment
• The text in a table is aligned with the text-align and vertical-align properties.
• The text-align property sets the horizontal alignment, like left, right, or center:
• Example
• td
{
text-align:right;
}
• The vertical-align property sets the vertical alignment, like top, bottom, or middle:
• Example
• td
{
height:50px;
vertical-align:bottom;
}
Table Padding
• To control the space between the border and content in a table, use the padding property on td and th elements:
• Example
• td
{
padding:15px;
}
Table Color
• The example below specifies the color of the borders, and the text and background color of th elements:
• Example
• table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
58. Style Properties
3.Cursor Styles
The cursor property specifies the type of cursor to be displayed when pointing on an element.
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
59. 8.0 CSS BOX MODEL
Padding-top
Padding-
right
Padding-
bottom
Padding
-left
Content
Height
Content width
Border-bottom-width
Border-top-width
Margin-top
Margin-bottom
Border
-left-
width
Margin
-left
Border-
right-
width
Margin
-right
Box width
B
o
x
h
e
i
g
h
t
60. CSS box model-basic concepts and
properties
<html>
<head>
<style>
div.ex
{
width:320px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>
61. Box model shorthand properties
Property
1.padding-{top,right,bottom,left}
2.border-{top,right,bottom,left}-width
3.border-{top,right,bottom,left}-color
4.border-{top,right,bottom,left}-style
5. border-{top,right,bottom,left}
6.margin- {top,right,bottom,left}
Number of values Meaning
One Assign this value to all four asscoiated
properties{top,right,bottom,left}
Two Assign first value to associated top and bottom properties ,
second value to associated right and left position
Three Assign first value to associated top property, second value to
right and left , and third value to bottom
Four Assign first value to associated top property,second to
right,third to bottom and fourth to left
62. Box model shorthand properties-
example
Padding:30px is equivalent to four declaration
Padding-top:30px;
Padding-right:30px;
Padding-bottom:30px;
Padding-left:30px;
Margin:15px 45px 30px is equivalent to
Margin-top:15px
Margin-right:45px
Margin-left:45px
Margin-bottom:30px
