Chapter Three
Cascading Style Sheet
(CSS)
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS defines how HTML elements are to be displayed
• Styles were added to HTML to solve a problem
• CSS saves a lot of work
• External Style Sheets are stored in CSS files
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>
• Development of large web sites, where fonts and color information
were added to every single page, became a long and expensive
process.
• In HTML, all formatting could (and should!) be removed from the
HTML document, and stored in a separate CSS file.
• The style definitions are normally saved in external .css files.
• With an external style sheet file, you can change the look of an
entire Web site by changing just one file!
CSS Syntax
• A CSS rule set consists of a selector and a declaration block:
p{
color: red;
/* This is a comment */
text-align: center;
}
The id Selector
• The id selector uses the id attribute of an HTML element to select
a specific element.
• An id should be unique within a page, so the id selector is used if
you want to select a single, unique element. For example: for
id="para1"
#para1 {
text-align: center;
color: red;
}
• Do NOT start an ID name with a number
The class Selector
• The class selector selects elements with a specific class attribute.
• For example: for class="center1"
.center1 {
text-align: center;
color: red;
}
• You can also specify that only specific HTML elements should be
affected by a class.
[Link] {
text-align: center;
color: red;
}
Grouping Selectors
• If you have elements with the same style definitions, you can group
the selectors, to minimize the code.
h1, h2, p {
text-align: center;
color: red;
}
Three Ways to Insert CSS
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet
• An external style sheet is ideal when the style is applied to many
pages.
• Each page must include a link to the style sheet with the <link>
tag.
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
• The style sheet file must be saved with a .css extension.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
• 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;
Internal Style Sheet
• An internal style sheet should be used when a single document
has a unique style.
• define internal styles in the head section of an HTML page, inside
the <style> tag.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
• An inline style loses many of the advantages of a style sheet (by
mixing content with presentation).
• To use inline styles, add the style attribute to the relevant tag.
• The style attribute can contain any CSS property.
<h1 style="color:blue; margin-left:30px;">
This is a heading.</h1>
Multiple Style Sheets
• If some properties have been set for the same selector in different
style sheets, the values will be inherited from the more specific
style sheet.
• Even multiple external style sheets can be referenced inside a
single HTML document.
Cascading order
1. Inline style (inside an HTML element)
2. Internal style sheet (in the head section)
3. External style sheet
4. Browser default
CSS Background
body {
background-color: red;
background-image: url("[Link]");
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: right top;
}
Shorthand property order
• Color, image, repeat, attachment, position
body {
background: #ffffff url("img_tree.png") no-repeat
right top;
}
CSS Text
• Text can be centered, or aligned to the left or right, or justified.
• The text-decoration property is mostly used to remove underlines
from links for design purposes:
p{
color: blue;
text-align: right;
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-indent: 50px;
}
Other CSS Text Properties
• Direction
• letter-spacing
• line-height
• text-shadow
• unicode-bidi
• vertical-align
• white-space
• word-spacing
CSS Font
• CSS font properties define the font family, boldness, size,
and the style of a text.
Generic family Font family Description
Times New Roman Serif fonts have small lines at
Serif
Georgia the ends on some characters
"Sans" means without - these
Arial
Sans-serif fonts do not have the lines at
Verdana
the ends of characters
Courier New All monospace characters have
Monospace
Lucida Console the same width
Examples
• Note: If the name of a font family is more than one word, it
must be in quotation marks, like: "Times New Roman".
• More than one font family is specified in a comma-
separated list:
p{
font-style: normal;
font-style: italic;
font-style: oblique;
font-size: 2.5em; /* 40px/16=2.5em */
font-weight: normal;
font-weight: lighter;
font-weight: bold;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font: italic bold 30px Georgia, serif;
}
CSS Links
• Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
• In addition, links can be styled differently depending on
what state they are in.
• The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: blue;}
a:visited {color: green;}
a:hover {color: yellow;}
a:active {color: red;}
</style>
</head>
<body>
<a href="[Link]
is a very popular search engine.
</body>
</html>
CSS Lists
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;
}
Example
<!DOCTYPE html> <li>Bullet point number three</li>
<html> </ul>
<head> </p>
<style> <p>Example 2 to show how unordered list
used:
ul.a {list-style-type: circle;}
<ul class="b">
ul.b {list-style-type: square;}
<li>Bullet point number one</li>
</style>
<li>Bullet point number two</li>
</head>
<li>Bullet point number three</li>
<body>
<p>Example 1 to show how unordered list </ul>
used: </p>
<ul class="a"> </body>
<li>Bullet point number one</li> </html>
<li>Bullet point number two</li>
CSS Tables
table { height: 50px;
border-collapse: collapse; text-align: left;
width: 100%; vertical-align: bottom;
} background-color: green;
color: white;
table, th, td { }
border: 1px solid black;
}
td {
caption { padding: 15px;
caption-side: bottom; }
}
th {
CSS Box Model
•Content - The content of the box where text and images appear
•Padding - Clears an area around the content. The padding is
transparent
•Border - A border that goes around the padding and content
•Margin - Clears an area outside the border. The margin is
transparent
Example
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<style> <div>Lorem ipsum dolor sit
div { amet, consectetur adipiscing
elit, sed do eiusmod tempor
background-color: lightgrey; incididunt ut labore et dolore
width: 300px; magna aliqua. Ut enim ad
padding: 25px; minim veniam, quis nulla
pariatur. id est laborum.</div>
border: 25px solid navy;
</body>
margin: 25px;
</html>
}
CSS Border
• The CSS border properties allow you to specify the style, size,
and color of an element's border.
• The style is set by pre-defined values:
• dotted, dashed, solid, double, groove, ridge, inset, outset.
• The border-style property can have from one to four
values.
• The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
• The "border-width" property does not work if it is used alone. Use
the "border-style" property to set the borders first.
Example
p{
border-style: dashed;
border-top-style: dotted;
border-right-style: solid;
border-style: dotted solid; /* top & bottom – dotted ... */
border-width: medium;
border-color: #0000ff;
border-right-color: #ff0000;
border: 5px solid red; /* shorthand property */
}
CSS Margin
• The margin clears an area around an element (outside the
border). The margin does not have a background color, and
is completely transparent.
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left : 50px;
margin: 25px 50px 75px 100px;
margin: 25px 50px 75px;
margin: 25% 50%;
margin: 25%; /* all four margins are 25px */
}
CSS Padding
• The padding clears an area around the content (inside
the border) of an element. The padding is affected by the
background color of the element.
p{
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
padding: 25px 50px 75px 100px;
padding: 25px 50px 75px;
padding: 25px 50px;
padding: 25px;
}