Web Design and Programming

1
 Chapter - 4

Cascading Style Sheets

(CSS)

2
 Content
Introduction
Levels of style sheets
Style specification formats
Properties – font, list, color, text alignment,
background images

3
 Introduction
Consider the management of a corporate web site
Site identity (look & feel ) must be maintained
Changes in site identity must be implemented across the
entire site
HTML necessarily mixes style and content, but
Cascading Style Sheet(CSS) separate content from
its presentation
Content: what to display
Presentation: how to display
Will be simple to answer those questions:
 can you make all the text in the app slightly bigger?
 Or purple is our new company color.
Saves a lot of work
 Especially in website maintenance and upgrading
4
 CSS
CSS provides the means to control and
change presentation of HTML documents
Style sheets allow you to impose a
standard style on a whole document, or
even a whole collection of documents
 CSS1 specification – 1996
 CSS2 specification - 1998
 CSS level 2 revision 1 (“CSS 2.1”)
 CSS3 –current standard

5
6
 CSS Syntax
CSS consists of two main parts: a
selector(element name), and one or more
declarations
Format:
selector { property1 : value1;property2: value 2;… }
declaration
 Declaration consists of a property and a value, and
are separated by a colon.
 The property is the style attribute you want to change.
Each property has a value.
 A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
 The selector is normally the HTML element you want
to style.
 Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center; }

7
 Types of Selectors
Types of selectors:
 HTML tag names
 Class selectors
 Generic selectors
 Id selectors
 Universal selectors
HTML tag names as selectors
 used to override the default attributes of HTML tags

Format: tag_name {property : value}

E.g. a { color: red;
text-decoration: overline;
}

8
 Class Selector
 You can define style rules based on the class
attribute of the elements. All the elements
having that class will be formatted according
to the defined rule.
Format: tag_name.style_name
{ property: value }
E.g. [Link] {color: green }
<p class=“somecolor”>some text</p>

9
 Generic Selectors
A generic class can be defined if you want
a style to apply to more than one kind of
tag
A generic class must be named, and the
name must begin with a period
.really-big { … }
Use in body of doc like normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>

10
 id Selectors
An id selector allow the application of a
style to one specific element
General form:
#specific-id {property-value list}
e.g. #section3 {font-size: 20}
In HMTL doc:
<h2 id = “section3”>
3. Properties for sale
</h2>

11
 Universal Selectors

The universal selector, denoted by an

asterisk (*), applies its style to all elements
in a document. E.g:
* {color: red;}
makes all elements in the document red.
The universal selector is not often useful.

12
 Pseudo Classes

 Pseudo classes are styles that apply when

something happens, rather than because the
target element simply exists
 Names begin with colons
 hover class applies when the mouse cursor is
over the element
 focus class applies when an element has focus

..\lectures\Examples\[Link]
13
 Levels of Style Sheets
There are three levels of style sheets
1. Inline - specified for a specific occurrence
of a tag and apply only to that tag
 This is fine-grain style, which defeats the
purpose of style sheets - uniform style
 Deprecated
2. Document-level style sheets - apply to
the whole document in which they appear
3. External style sheets - can be applied
to any number of documents
 When more than one style sheet applies
to a specific tag in a document, the lowest
level style sheet has precedence

14
 CSS cascade hierarchy

From Web Style Guide: Basic Design Principles for Creating Web Sites

15
 Inline Styles
 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.
<tag_name style=“property:value; property:
value;”> … </tag_name>
E.g. <table style=“background-color:
yellow”>… </table>
 The example shows how to change the color and
the left margin of a paragraph:
 <p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
16
 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:
defined in the <head> element
<style type=“text/css”>
{property:value; ...}
</style>
 Eg:
 <head>
<style type =“text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
</style>
</head>
17
 Example: Internal Style
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
.center {text-align:center;}
</style>
</head>
<body>
<h1 class=“center">Potatoes</h1>
<p class="center">There are dozens of different
potato
varieties. They are usually described as
early, second early and maincrop.</p>
<h2 >Types of Potatoes</h2>
<p class="center">Secod Pargraph.......... </p>
</body>
</html>
18
 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:
 defined in a separate CSS file
 linked to an HTML document using the <link> tag, tell the
browser where to find the CSS file used to style the page.
<link rel=“stylesheet” type=“text/css” href=“url”>
 changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which
the style is attached

19
 External Style
Sheet(cont’d)
 Attributes:
 href
 This specifies the path to the CSS file (which is often placed in a
folder called css or styles).
 type
 This attribute specifies the type of document being linked to. The
value should be text/css.
 rel
 This specifies the relationship between the HTML page and the file
it is linked to. The value should be stylesheet when linking to a
CSS file.
 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.
 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
 An HTML page can use more than one CSS style sheet. To do
this it could have a <link> element for every CSS file it uses. For
example, some authors use one CSS file to control the
presentation (such as fonts and colors) and a second to control
the layout.
20
 Example: External Style
HTML File: save as “[Link]”
----------------------------------------------------
<html>
<head>
<title>Introducing CSS</title>
<link href=“[Link]" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>From Garden to Plate</h1>
<p>A <i>potager</i> is a French term for an
ornamental vegetable or kitchen garden ... </p>
<h2>What to Plant</h2>
<p>Plants are chosen as much for their
functionality
as for their color and form ... </p>
</body>
</html>
21
 Example(cont’d)
CSS File: Save as “[Link]”
---------------------------------------------------------
body {
font-family: Arial;
}
h1, h2 {
color: #ee3e80;
}
p{
color: #2255FF;
}

22
 Properties
CSS has many properties in categories like:

 Fonts
 Lists
 Alignment of text
 Margins
 Colors
 Backgrounds
 Borders

23
 Property Value Forms
 Length - specified as number values that are
followed immediately by a two-character
abbreviation of a unit name
Units:
 px – pixels No space is allowed between the
 in – inches number and the unit specification,
 cm – centimeters e.g. 1.5 in is illegal!
 mm – millimeters
 pt – points(a point is 1/72 inch)
 pc - picas (12 points)
 em - relative to the font-size of the element (2em
means 2 times the size of the current font)
 ex-height - height of the letter ‘x’

24
 Property Value Forms
 Percentage - just a number followed immediately
by a percept sign
 Colors
Color name, e.g. white
Hex form: #XXXXXX, e.g. #FFFFFF
rgb(n1, n2, n3), e.g. rgb(255, 255, 255)
 Numbers can be decimal (0-255) or percentages

 Property values are inherited by all nested tags,

unless overridden. E.g:

body {font-size: 16pt}

25
 Font Properties
To style texts, virtually all HTML documents include
text
 font-family
 Value is a list of font names - browser uses the first in
the list font-family:
it that it supports e.g Helvetica, Futura
Arial,
 font-size
 Possible values: a length number(e.g. 40px) or a name,
such as smaller, xx-large, etc.
 font-style
 italic, oblique (useless), normal
 font-weight - degrees of boldness
 Values for the property range from 100 to 900, in
increments of 100. Keywords also are supported,
including bolder, lighter, bold, normal
 font - for specifying a list of font properties, shorthand
 font: bolder 14pt Arial Helvetica
 Order must be: style, weight, size, font name(s)
26
 Example-document
style sheet

27
 Example - external
style sheet

28
 Text decor & alignment

Also, study new CSS3 text

properties

29
 Text

30
 List Properties
list-style-type
 On unordered lists list-style-type can be used
to specify the shape of the bullets
disc (default), square, or circle
Set it on either the <ul> or <li> tag
<h3> Fruit </h3>
<ul>
<li style = "list-style-type: disc"> Apple </li>
<li style = "list-style-type: square"> Orange </li>
<li style = "list-style-type: circle"> Pear </li>
</ul>
 On ordered lists list-style-type can be used to
change the sequence values

31
 Study CSS Tables Yourself!
32
 Image List Item Marker
 An image can be used in a list item bullet.
 Such a bullet is specified with the list-style-
image property.
 Its value is specified with the url form.

33
 Colors

 Colors in CSS are specified by:

a valid color name - like “red”
an RGB value - like "rgb(255, 0, 0)“
a HEX value - like "#ff0000"

 The color property specifies color of text

<style type = “text/css”>
[Link] {color: red}
[Link] {color: orange}
</style>
 The background-color property specifies the
background color of elements
34
 Color…

35
36
 CSS3 Colors

 In addition, CSS3 also introduces:

RGBA colors
HSL colors Refer [Link]
HSLA colors
Opacity

rgba(red, green, blue, alpha) - alpha opacity for a color (0.0 – 1.0)

37
 Online color mixers!

Download for offline use

38
 ADOBE KULER: COLOR WHEEL

39
 CSS Background image, color

Possible values: repeat, no-repeat, repeat-x, or repeat-y

Possible values: top, center, bottom, left, or right

Used in combination: top left, bottom right,and top center

Shorthand
40
property
41
 The Box Model
 Each element in a document is considered to be a
rectangular box consisting of content area, padding, a border
and margins

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
42
 Total element width = width + left padding + right padding + left border +
right border + left margin + right margin

43 Height also calculated in similar way

 CSS display property
 Specifies if/how an element is displayed Block
 The default display value for most elements
is block or inline.

 Block-level Elements
starts on a new line and takes up the full width
available

 Inline Elements
does not start on a new line and only takes up as much
Inline
width as necessary.

44
 Override the default display value
 E.g.: Making inline <li> elements for horizontal
menus:

 Hide an Element - display:none(hides an element,

and it will not take up any space) or
visibility:hidden(hides an element, but it will still
take up the same space as before)

45
 CSS Navigation Bar
 Having easy-to-use navigation is very important
 With CSS you can transform boring HTML menus into
good-looking navigation bars
 Navigation Bar = List of Links
A navigation bar is basically a list of links, use the
<ul> and <li> elements

removes the bullets

remove browser default
46
 Vertical Navigation Bar
 Having easy-to-use navigation is very important
 Style the <a> elements inside the list

• A background color is added to the links to show the link

area.
• Notice that the whole link area is clickable, not just the
text.

47
 Vertical Navigation Bar
 Having easy-to-use navigation is very important
 Style the <a> elements inside the list
 Active/Current, mouse hover
 The definition order must be a:link, a:visited,
a:hover and a:active in order to be effective.

hover

 You can also add:

48
 Horizontal Navigation Bar
 Two ways to create a horizontal navigation bar:
inline
floating list items:
 Inline List Items:

49
 Horizontal Navigation Bar
 Floating List Items:

50 Study different Horizontal Navigation Bar Examples w3schools!

 The <span> and <div> tags
 One problem with the font properties is that they
apply to whole elements, which are often too large
 We want to apply special font properties to less than a whole
paragraph of text
 Solution: a new tag to define an element in the
content of a larger element – <span>
 The default meaning of <span> is to leave the content as it is

<style type = "text/css">

.bigred {font-size: 24pt; font-family: Ariel; color: red}
</style>
…
<p> Now is the <span class = "bigred"> best time </span>
ever! </p>
51
 The <span> and <div> tags
The <span> tag is similar to other HTML tags,
they can be nested and they have id and
class attributes
Another tag that is useful for style
specifications: <div>
Used to create document sections (or divisions) for
which style can be specified
 The difference between the <span> tag and the <div>
tag is that the <span> tag is used with inline elements
whereas the <div> tag is used with block-level elements.
e.g., a section of five paragraphs for which you want
some particular style
52
 Example: <div> tag
<html>
<head> <title>HTML div Tag</title> </head>
<body>
<!-- First group of tags -->
<div style="color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Redroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
</div>
<!-- Second group of tags -->
<div style="color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
53
 Example: Layout Using
DIV
HTML File
------------------------------------------------------------
<html>
<head>
<title>HTML Layouts using DIV</title>
<link href="[Link]" type="text/css"
rel="stylesheet">
</head>
<body class="body">
<div class="header">
<h1>Main Header</h1>
</div>
<div class="left_content">
<h2><b>Left Menu</b></h2>
<a href="[Link]">HTML</a><br />
<a href="[Link]">PHP</a><br />
<a href="[Link]">PERL</a>...
</div>

54 Internet Programming
 Example(cont’d)
<div class="main_content">
<p>Usig DIV for layout. This Tutorial....</p>
</div>
<div class="right_content">
<h2><b>Right Menu</b></h2>
<a href="[Link]">HTML</a><br />
<a href="[Link]">PHP</a><br />
<a href="[Link]">PERL</a>...
</div>
<div class="footer">
<center>
Copyright &copy 2007 [Link]
</center>
</div>
</body>
</html>

55 Internet Programming
 Example(cont’d)
css File: [Link]
----------------------------------
body{
background-color: #b5dcb3;
color: #000305;
font-size: 14px;
font-family: Arial, 'Lucidia Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{ margin: 0 auto; width: 80%; }
.header{ background-color:gray; text-align:center }
.left_content{ background-color:#aaa; height:600px;
width:20%;float:left;}
.main_content{background-color:#eee; height:600px;
width:60%;float:left;}
.right_content{background-
color:#aaa;height:600px;width:20%;float:left;}
.footer{background-color:gray;clear: both;}
Clear: both ---No floating elements allowed on the left or the right side
56 Internet Programming
 Exercise: create the following
page

The colours used are as follows: Text: #330000 Body background: #ffffcc
Header and footer background: #ccaa66 Left (navigation) column
background: #E8D882 Right (main content) column background: #f1e8b0
57 The text is displayed in Verdana font.