WP - Chapter Three

Chapter Three
Cascading Style Sheet or CSS
1
Cascading Style Sheets
Objectives:
 To take control of the appearance of a Web site
by creating style sheets.
 To use a style sheet to give all the pages of a Web
site the same look and feel.
 To use the class attribute to apply styles.
 To specify element backgrounds and colors.
 To understand the box model and how to control
the margins, borders and padding.
 To use style sheets to separate presentation from
content. 2
2
Cascading Style Sheets(CSS)
CSS is a language that describes the style of an HTML
document.
CSS describes how HTML elements are to be displayed
on browser windows or in other media.
CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
CSS has some limitations, the first is that not all browsers
support all the features.
 Each style has a unique name: a selector.
 The selectors and their styles are defined in one place.
External style sheets are stored in CSS files//i.e. there is no
save in HTML tag.
3
CSS Syntax and Selectors
A CSS: consists of a selector and a declaration block:
The selector: points to the HTML element you want to style.

The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a CSS property name and a value,
separated by a colon.
A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
4
Cont.….
In the following example all <p> elements will be center-aligned,
with a red text color:
<html>
<head>
<style>
p{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
5
CSS Selectors
CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class, attribute,
and more.
The element Selector
The element selector selects elements based on the element
name.
You can select all <p> elements on a page like this (in this
case, all <p> elements will be center-aligned, with a red
text color):
Example
p{
color:red;
text-align:center;
} 6
Cont.…
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
7
The id Selector
The id selector uses the id attribute of an HTML element to
select a specific element.
The id of an element should be unique within a page, so the id
selector is used to select one unique element!
To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
ID selectors are used to define unique parts of a web page e.g.
footer, header, table or other unique element- each Id element is
unique and can only be used once.
 The general syntax for an ID selector is:
#IDSelector {Property:Value;}
8
Cont.…
❖ The style rule below will be applied to the HTML element with id="para1":
<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>
9
The class Selector
The class selector selects elements with a specific class
attribute.
used to apply the same style to many different HTML tags
on the same class.
To select elements with a specific class, write a period (.)
character, followed by the name of the class.
The general syntax for an class selector is:
.ClassSelector ( Property: Value; }
 e.g.
.redBold { color: red;
font-weight: bold;
}
10
Cont.…
In the example below, all HTML elements with class="center" will be
red and center-aligned:
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body></html>
11
Cont.…
You can also specify that only specific HTML elements should be affected by
a class.
In the example below, only <p> elements with class="center" will be center-
aligned.
<html><head>
<style>
p.center {
text-align: center;
color: red;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body></html>
12
Cont.…
HTML elements can also refer to more than one class.
In the example below, the <p> element will be styled according to
class="center" and to class="large":
<html> <head> <style>
p.center {
text-align: center;
color: red;}
p.large {
font-size: 300%;}
</style> </head> <body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class=“center large">This paragraph will be red, center-aligned, and in
a large font size.</p>
</body> </html>
13
The CSS Universal Selector(*)
The universal selector (*) selects all HTML elements on the
page.
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
14
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
15
Cont.…
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code
above:
<html> <head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head> <body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
16
</body></html>
CSS Comments
Comments are used to explain the code, and may help
when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */.
Comments can also span multiple lines:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
17
CSS How to insert style sheet?
Three Ways to Insert CSS:
1. External style sheet
2. Internal style sheet
3. Inline style
18
External Style Sheet
 The most powerful way and a convenient way to create a
document with a uniform theme.
 Put all of your style in an external file
With an external style sheet, you can change the look of an entire
website by changing just one file!
Each page must include a reference to the external style sheet file
inside the <link> element.
The <link> element goes inside the <head> section:
<!DOCTYPE html><html><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><body>
<h1>This is a heading</h1>
</body></html> 19
The most popular method is the external style sheet:
<link rel="stylesheet" href=“mystyle.css“ type="text/css" media="screen" />
❖ href:
◦ Tells the browser where to locate the style sheet, with either a relative
or absolute URL (Specifies the location of the linked document)
❖ rel:
◦ Tells the browser what to expect (specifies the relationship between
the current document and the linked document)
 stylesheet
 alternate stylesheet
❖ type:
◦ Tells the browser the type of document linked
◦ Common values:
20
 text/css
 text/javascript
20
Cont.….
An external style sheet can be written in any text editor. The file
should not contain any html tags.
The style sheet file must be saved with a .css extension.
Here is how the "mystyle.css" looks:
Home.html mystyle.css
<!DOCTYPE body{
html><html><head> background-color: #ccffcc;
<link rel="stylesheet" }
type="text/css" h1{
href="mystyle.css">
color:navy;
</head><body>
<h1>This is a heading</h1> margin-left: 20px;
<p>This is a paragraph.</p> }
</body></html>
21
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<html> <head> <style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style> </head>
<body>
</body></html> 22
Inline Styles
An inline style may be used to apply a unique style for a single
element.
To use inline styles, add the style attribute to the relevant
element.
The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a
<h1> element:
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p
</body>
</html>
23
Cascading external and Internal CSS
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<p>The style of this document is a combination of an external stylesheet, and
internal style</p>
</body></html>
24
CSS Colors
Colors in CSS are most often specified by:
✓ a valid color name - like "red”
✓ an RGB value - like "rgb(255, 0, 0)”
✓ a HEX value - like "#ff0000"
Color Names
Colors set by using color names:
Note: Color names are not case-insensitive: "Red" is the same as "red" or
"RED".
RGB (Red, Green, Blue)
RGB color values can be specified using this formula: rgb(red, green, blue).
Each parameter (red, green, blue) defines the intensity of the color between 0
and 255.
For example, rgb(255,0,0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
25
Cont.….
<!DOCTYPE html> <h2 style="background-color:rgb(255, 165, 0)">

<html>
Background-color set by using rgb(255, 165, 0)
<body>
</h2>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(255, 255,
<h2 style="background-color:rgb(255, 0, 0)">
0)"> Background-color set by using rgb(255, 255, 0)
Background-color set by using rgb(255, 0, 0)
</h2>
</h2>
<h2 style="background-color:rgb(0, 255, <h2 style="background-color:rgb(0, 255,

0)"> 255)">
Background-color set by using rgb(0, 255, 0) Background-color set by using rgb(0, 255, 255)
</h2> </h2>
<h2 style="background-color:rgb(0, 0,
255)"> </body>
Background-color set by using rgb(0, 0, 255) </html>
</h2>
26
Background Color
The background-color property specifies the background color of an
element.
The background color of a page is set like this:
<html><head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
27
<h1>, <p>, and <div> elements have different
background colors:
<!DOCTYPE html> p{
background-color: yellow;
<html> }
<head> </style>
</head>
<style> <body>
h1 { <h1>CSS background-color
example!</h1>
background-color:
<div>
green;
This is a text inside a div element.
} <p>This paragraph has its own
div { background color.</p>
We are still in the div element.
background-color: </div>
lightblue; </body>
} </html>
28
CSS Borders
CSS Border Properties
The CSS border properties allow you to specify the style, width, and
color of an element's border.
The border-style property specifies what kind of border to display.
The following values are allowed:
✓ dotted - Defines a dotted border
✓ dashed - Defines a dashed border
✓ solid - Defines a solid border
✓ double - Defines a double border
✓ groove - Defines a 3D grooved border. The effect depends on the border-color value
✓ ridge - Defines a 3D ridged border. The effect depends on the border-color value
✓ inset - Defines a 3D inset border. The effect depends on the border-color value
✓ outset - Defines a 3D outset border. The effect depends on the border-color value
✓ none - Defines no border
✓ hidden - Defines a hidden border
29
The border-style property can have
from one to four values (for the top
border, right border, bottom border, <h2>The border-style Property</h2>
and the left border). <p>This property specifies what kind of
<!DOCTYPE html> border to display:</p>
<html> <p class="dotted">A dotted border.</p>
<head> <p class="dashed">A dashed border.</p>
<style> <p class="solid">A solid border.</p>
p.dashed{border-style:dashed;} <p class="double">A double border.</p>
p.solid{border-style:solid;} <p class="groove">A groove border.</p>
p.double{border-style:double;} <p class="ridge">A ridge border.</p>
p.groove{border-style:groove;} <p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
p.ridge{border-style:ridge;}
<p class="none">No border.</p>
p.inset{border-style:inset;}
<p class="hidden">A hidden border.</p>
p.outset{border-style:outset;} <p class="mix">A mixed border.</p>
p.none{border-style:none;} </body>
p.hidden{border-style:hidden;} </html>
p.mix{border-style:dotted dashed solid
double;} </style>
</head>
<body> 30
Border Width
The border-width property specifies the width of the four
borders.
The width can be set as a specific size (in px, pt, cm, etc) or by
using one of the three pre-defined values: thin, medium, or
thick.
The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left
border).
31
<html> p.five {
<head> border-style: double;
<style>
p.one {
border-width: 15px;
border-style: solid; }
border-width: 5px;
} p.six {
p.two {
border-style: double;
border-style: solid; border-width: thick;
border-width: medium; }
}
p.seven {
p.three {
border-style: dotted; border-style: solid;
border-width: 2px; border-width: 2px 10px 4px
} 20px;
p.four { }
border-style: dotted; </style>
border-width: thick;
}
</head>
<body>
32
Cont.…
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not
work if it is used alone.
Always specify the "border-style" property to set the
borders first.</p>
</body>
</html>
33
Border Color
The border-color property is used to set the color of the
four borders.
The color can be set by:
o name - specify a color name, like "red“
o Hex - specify a hex value, like "#ff0000“
o RGB - specify a RGB value, like "rgb(255,0,0)“
o transparent
The border-color property can have from one to four values
(for the top border, right border, bottom border, and the
left border).
34
<!DOCTYPE html> <h2>The border-color
<html> Property</h2>
<head>
<p>This property specifies the
<style>
color of the four borders:</p>
p.one {
border-style: solid; <p class="one">A solid red
border-color: red; border</p>
} <p class="two">A solid green
border</p>
p.two { <p class="three">A solid
border-style: solid; multicolor border</p>
border-color: green;
} <p><b>Note:</b> The "border-
color" property does not work
p.three { if it is used alone. Use the
border-style: solid; "border-style" property to set
border-color: red green blue the borders first.</p>
yellow;
} </body>
</style>
</head> </html>
<body>
35
Border - Individual Sides
From the examples above you have seen that it is possible to specify a
different border for each side.
In CSS, there is also properties for specifying each of the borders (top, right,
bottom, and left):
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;}
</style>
</head><body>
<p>2 different border styles.</p>
</body></html>
36
Cont.…
The example above gives the same result as this:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: dotted solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
37
Left border
<html>
<head>
<style>
p{
border-left: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width,
border-left-style, and border-left-color.</p>
</body>
</html>
38
CSS Margins
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border.
With CSS, you have full control over the margins. There are CSS properties
for setting the margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
o margin-top
o margin-right
o margin-bottom
o margin-left
All the margin properties can have the following values:
o auto - the browser calculates the margin
o length - specifies a margin in px, pt, cm, etc.
o % - specifies a margin in % of the width of the containing element.
39
Cont.…
❖ The following example sets different margins for all four sides of a
<div> element:
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>
</body>
</html>
40
Margin shorthand property
<html>
<head>
<style>
div {
margin: 100px 150px 100px 80px;
}
</style>
</head>
<body>
<h2>Using the margin shorthand property</h2>
<div>This div element has a top margin of 100px, a right margin of
150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
41
Cont.….
If the margin property has four values:
margin: 25px 50px 75px 100px;
» top margin is 25px
» right margin is 50px
» bottom margin is 75px
» left margin is 100px
If the margin property has three values:
margin: 25px 50px 75px;
» top margin is 25px
» right and left margins are 50px
» bottom margin is 75px
If the margin property has two values:
margin: 25px 50px;
» top and bottom margins are 25px
» right and left margins are 50px
If the margin property has one value:
margin: 25px;
» all four margins are 25px
42
CSS Padding
The CSS padding properties are used to generate space around
content.
The padding clears an area around the content (inside the border)
of an element.
With CSS, you have full control over the padding. There are CSS
properties for setting the padding for each side of an element
(top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an
element:
o padding-top
o padding-right
o padding-bottom
o padding-left
43
Cont.…
p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
<style>
div {
padding: 50px 30px 50px 80px;
}
</style>
44
How It works?
If the padding property has four values:
padding: 25px 50px 75px 100px;
» top padding is 25px
» right padding is 50px
» bottom padding is 75px
» left padding is 100px
If the padding property has three values:
padding: 25px 50px 75px;
» top padding is 25px
» right and left paddings are 50px
» bottom padding is 75px
If the padding property has two values:
padding: 25px 50px;
» top and bottom paddings are 25px
» right and left paddings are 50px
If the padding property has one value:
padding: 25px;
» all four paddings are 25px 45
CSS Height and Width
The height and width properties are used to set the height and width of
an element.
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
To set max width
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}</style> 46
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
o a color name - like "red“
o a HEX value - like "#ff0000“
o an RGB value - like "rgb(255,0,0)"
47
Cont.…
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default
text color for a page is defined in the body selector.</p>
</body>
</html>
48
Text Alignment
The text-align property is <style>
used to set the horizontal
alignment of a text. div {
A text can be left or right border: 1px solid black;
aligned, centered, or padding: 10px;
justified.
width: 200px;
h1 {
text-align: center; height: 200px;
} text-align: justify;
}
h2 {
text-align: left; </style>
}
h3 {
text-align: right;
}
49
CSS Fonts
The CSS font properties define the font family, boldness,
size, and the style of a text.
Font family
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
50
Font style
p.normal { h1 {
font-style: normal; font-size: 40px;
}
}
p.italic {
font-style: italic; h2 {
} font-size: 30px;
}
p.oblique {
font-style: oblique;
p{
}
font-size: 14px;
}
51
CSS Links
<html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>
</body>
</html>
52
Cont.….
The four links states are: </head>
a:link - a normal, unvisited link
a:visited - a link the user has visited <body>
a:hover - a link when the user mouses over it <p><b><a href="default.asp"
a:active - a link the moment it is clicked
<body> target="_blank">This is a
<style> link</a></b></p>
/* unvisited link */
a:link
<p><b>Note:</b> a:hover MUST
{ come after a:link and a:visited in
color:red; the CSS definition in order to be
}
/* visited link */ effective.</p>
a:visited { <p><b>Note:</b> a:active MUST
color:green;
}/* mouse over link */ come after a:hover in the CSS
a:hover{ definition in order to be
color:hotpink;
}
effective.</p>
/* selected link */ </body>
a:active{ </html>
color:blue;}
</style></style>
53
CSS lists
<html> <p>Example of unordered lists:</p>
<head> <ul class="a">
<style> <li>Coffee</li>
ul.a { <li>Tea</li>
list-style-type: circle; <li>Coca Cola</li>
} </ul>
<ul class="b">
ul.b { <li>Coffee</li>
list-style-type: square; <li>Tea</li>
} <li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
ol.c {
<ol class="c">
list-style-type: upper-roman; <li>Coffee</li>
} <li>Tea</li>
<li>Coca Cola</li>
ol.d { </ol>
list-style-type: lower-alpha;
} <ol class="d">
</style> <li>Coffee</li>
</head> <li>Tea</li>
<body> <li>Coca Cola</li>
</ol>
54
CSS Tables
<html> <table>
<tr>
<head> <th>Firstname</th>
<style> <th>Lastname</th>
</tr>
table, th, td {
<tr>
border: 1px solid black; <td>Peter</td>
} <td>Griffin</td>
</tr>
</style> <tr>
</head> <td>Lois</td>
<td>Griffin</td>
<body> </tr>
</table>
<h2>Add a border to a </body>
table:</h2> </html>
55
Cellpadding
<style>
table {
border-collapse: collapse;
}
table, td, th {
}
</style>
56
57

WP - Chapter Three

Uploaded by

Copyright:

Available Formats

WP - Chapter Three

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

WP - Chapter Three

Uploaded by

Copyright:

Available Formats

Chapter Three

Cascading Style Sheet or CSS

The selector: points to the HTML element you want to style.

<!DOCTYPE html> <h2 style="background-color:rgb(255, 165, 0)">

<h2 style="background-color:rgb(0, 255, <h2 style="background-color:rgb(0, 255,

<p><b><a href="default.asp" target="_blank">This is a

You might also like