1. Prepared By: Er. Nawaraj
Bhandari
DESIGNING AND DEVELOPING A
WEBSITE
Topic 3:
Introduction to
Cascaded Style Sheet(CSS)
2. Cascading Style Sheets
Cascading Style Sheets (CSS) specify the
presentation of web pages.
HTML describes the structure of a document.
Which part of the document is a heading, a paragraph, a list
etc.?
We will learn CSS 2.1.
There is a new CSS 3
Many parts of CSS 3 are still under development.
Some parts of CSS 3 are useful now.
3. How does CSS Work? - 1
<h1>Welcome to <em>Cascading Style Sheets</em></h1>
<p>The purpose of this page is to demonstrate how
<em>CSS</em> works.</p>
When viewed in a browser, this HTML
page will have a style.
Browsers apply default settings to page elements.
Using CSS, we can specify how we
want this document to look.
4. How does CSS Work? - 2
Style sheets are made up of one or more style rules.
The selector specifies which part of the HTML
document will be affected by the CSS rule.
The properties specify how we want to affect this part
of the document.
selector {
property1 :
value;
property2 :
value;
}
Generic structure
h1{
color : red;
font-size :
18px;
}
A Simple CSS Rule
5. Applying CSS
There are three different ways of applying
CSS to a document:
1. Inline style sheet
2. Embedded style sheet or Internal style sheet
3. External style sheet
6. Inline CSS
The style attribute can be used to affect an
individual HTML element.
The value is a list of CSS properties.
...
<h1 style="color:blue; font-size:5px;">Welcome to <em>Cascading Style
Sheets</em></h1>
<p>The purpose of this page is to demonstrate how <em>CSS</em>
works.</p>
...
7. Embedded CSS
Style rules can be nested inside a <style> element
The <style> element must be placed in the <head> of
the document.
…
<style type="text/css">
h1 { color : green; font-size : 18px; }
</style>
</head>
<body>
<h1>Welcome to <em>Cascading Style Sheets</em></h1>
<p>The purpose of this page is to demonstrate how
<em>CSS</em> works.</p>
…
8. External Style Sheet
The <link/> element is a standalone element.
Always goes in the <head> element
The href attribute specifies the filename of the CSS
file.
The rel and type attributes are required and always
have the same values.
h1{
color : red;
font-size :
18px;
}
<link href="style.css" rel="stylesheet" type="text/css"/>
Save in a file named style.css
<link/> element that links to style.css
9. Applying CSS
External CSS is the best way to style a
website.
A single CSS file applied to all pages in a site
Can get large and bulky
Embedded CSS can be used to define style
rules that only apply to a single page.
Inline CSS is rarely used.
Cannot reuse inline CSS rules
Tedious to update the design of the site
10. The Cascade
It is possible for two (or more) different
sources of style information to specify
conflicting rules for an element.
Example :
An inline style rule specifies an <h1> element
should be colored blue.
An external style rule specifies <h1> elements
should be colored red.
Browsers obey the most recently read CSS
information.
Inline CSS takes precedence over external CSS.
11. Selectors – Multiple Selectors
There are many different ways to select different
part of HTML documents.
Multiple elements can be selected using a comma.
An asterix (*) can be used to select all elements.
h1, p {
color:red;
}
*{
text-
align:right;
}
12. Selectors - Inheritance
By default, nested elements inherit style
values.
The <em> element is nested inside a <h1> so
will be coloured red.
The <p> element is nested inside the <body>
so will be coloured blue.
…
<body>
<h1>Welcome to <em>Cascading Style Sheets</em></h1>
<p>The purpose of this page is to demonstrate how <em>CSS</em>
works.</p>
</body>
…
body{
color:blue
;
}
h1{
color:red;
}
13. Selectors - Descendant Selectors
Descendant selectors are used to select
elements that are nested within another
specific element.
The descendant selection is made by using a white space.
In this example only the <em> element nested inside the
paragraph will be affected.
…
<body>
<h1>Welcome to <em>Cascading Style Sheets</em></h1>
<p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p>
</body>
…
p em{
color:red;
}
14. Selectors – Psuedo-Elements
Psuedo-elements are parts of elements.
E.g. the first line or first letter of an element
15. Selectors – The id Selector
The id attribute uniquely identifies an element
We can use an id selector (#) to target
individual elements based on their id value.
16. Selectors – The class Selector
The class attribute can be applied to nearly any
element.
It allows us to label related parts of an HTML
document.
We can name our classes anything we like. But it
should be meaningful.
The class selector (.) is used to select group
elements based on class name.
The element name is followed by a full-stop (.)
and the class name.
18. The <div> and <span> Elements
HTML features two elements that do not have
any semantic meaning.
<div> is a block level element.
<span> is an inline element.
We can specify meaning for these elements using class and id
attributes.
The <div> element is especially useful.
We can nest any element we like inside a <div>. Unlike <p>
cannot nest <p>.
20. CSS Font Size : px, pt, em,
percent
1. Pixels (px)
Pixels are fixed-size units that are used in screen media.
One pixel is equal to one dot on the computer screen (the
smallest division of your screen’s resolution).
One problem with the pixel unit is that it does not scale
upward for visually-impaired readers or downward to fit
mobile devices.
21. CSS Font Size : px, pt, em,
percent
2. Points (pt)
Points are traditionally used in print media.
One point is equal to 1/72 of an inch.
Points are much like pixels, in that they are fixed-size
units and cannot scale in size.
12pt = 16px
22. CSS Font Size : px, pt, em,
percent
3. Ems (em)
The “em” is a scalable unit that is used in web document.
An em is equal to the current font-size, for instance, if the
font-size of the document is 12pt, 1em is equal to 12pt.
Ems are scalable in nature, so 2em would equal 24pt,
.5em would equal 6pt, etc.
Ems are becoming increasingly popular in web
documents due to scalability and their mobile-device-
friendly nature.
1em = 12pt = 16px
23. CSS Font Size : px, pt, em,
percent
4. Percent (%)
The percent unit is much like the “em” unit.
First and foremost, the current font-size is equal to 100%
(i.e. 12pt = 100%).
While using the percent unit, your text remains fully
scalable for mobile devices and for accessibility.
1em = 12pt = 16px =
100%.
25. CSS Properties
1. Text and font properties
2. Box properties
3. List properties
4. Background images
5. Floating and positioning
26. Text Properties
The text-indent property specifies how much horizontal
space text should be moved before the
beginning of the first line of the text content of an
element.
Spacing is calculated from the starting edge of the block-
level container element.
27. Font Properties
The font-family property can be used to specify
a list of fonts (in order of preference).
Browsers can only display fonts that are
installed on the user’s machine.
Font-names that feature white space must be
placed in quotes.
28. Box Properties
CSS views every HTML element as having a box around
it.
This box has a number of properties.
1. Height
2. Width
3. Border
4. Margin
5. Padding
– Margin is the gap around the outside of the element.
– Padding is the area between the element’s content and
34. Box Properties
–Margin, border and padding can be specified for particular sides of
elements.
– E.g. div { padding-top : 10px; }
35. Block and Inline Elements
CSS treats block and inline elements
differently.
By default, the box for block level elements extends to the
width of the browser window.
The box for inline elements only stretches as wide as the
element itself,
We cannot set the width or height of inline elements.
36. Block and Inline Elements
We can make inline elements behave like block
level elements using the display property.
This is especially useful when we want to make
navigation bars from list elements.
The display property can also have a value of
none which hides the element from view.
37. Specifying Colour
A colour name
p { color : red; }
An RGB value
The amount of red, green and blue is given as a number
between 0 and 255.
p { color : rgb(255, 0, 0); }=Red
rgb(255,255,255)=White
A hexadecimal RGB value
Always preceded by the hash (#) character
White:#FFFFFF
Red:#FF0000
Blue:#008000
38. Efficient CSS
External CSS files can quickly become very
large. Managing the CSS can be difficult.
Techniques for making CSS efficient and easy
to manage
Use multiple selectors where possible
Use inheritance where possible
Use CSS comments to separate and explain CSS rules.
Comment can be provided using /* and ends with */
40. Accessibility and CSS
Separation of structure from presentation
HTML only specifies structure so can be understood by
everyone
Users can switch off CSS.
Even they can define their own user defined style sheet
41. The Media Attribute
We can specify a media attribute in the <link/>
element.
Specifies different style sheets for different output
The print.css style sheet will be used if the user
prints the page.
Some other values of media attribute are all,
aural, handheld, projection, tv, etc.
43. Validating CSS
Like HTML documents, CSS can be validated
using a W3C validator.
http://jigsaw.w3.org/css-validator/
Helps identify syntax errors
Less important than validating HTML documents
44. Developer Tools
Many browsers provide facilities for us to
examine the CSS of a web page.
Google Chrome - Developer Tools
Mozilla FireFox – by using the Firebug add-on
http://getfirebug.com/
These are useful in two ways
Learn CSS techniques used in other peoples’ websites.
Help fix problems in our own CSS.
