DESIGNING AND DEVELOPING A WEBSITE
Introduction to
Cascaded Style Sheet(CSS)
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.
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.
How does CSS Work? - 2
Generic A Simple CSS
structure Rule
selector {
h1{
property1 : value;
color : red;
property2 : value;
font-size : 18px;
}
}
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.
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
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>
...
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>
…
External Style Sheet
h1{ Save in a file named
color : red; style.css
font-size : 18px;
} <link href="style.css" rel="stylesheet" type="text/css"/>
<link/> element that links to style.css
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.
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
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.
Selectors – Multiple Selectors
h1, p {
color:red;
}
*{
text-align:right;
}
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.
Selectors - Inheritance
…
<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>
…
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>
body{
color:blue; so will be coloured blue.
}
h1{
color:red;
}
Selectors - Descendant Selectors
…
<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;
}
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.
Selectors – Psuedo-Elements
Psuedo-elements are parts of elements.
E.g. the first line or first letter of an element
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.
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.
Selectors – The class Selector
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>.
The <div> and <span> Elements
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.
CSS Font Size : px, pt, em,
percent
1. 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
CSS Font Size : px, pt, em,
percent
1. 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
CSS Font Size : px, pt, em,
percent
1. 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%.
CSS Font Size : px, pt, em,
percent
Generally, 1em = 12pt = 16px = 100%.
CSS Properties
1. Text and font properties
2. Box properties
3. List properties
4. Background images
5. Floating and positioning
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.
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.
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
the border.
Box Properties
More about border
Border can be specified for particular sides of elements.
More about border
Border can be specified for particular sides of elements with
particular properties..
Box Properties
Box Properties
Box Properties
Margin, border and padding can be specified for particular sides of
elements.
E.g. div { padding-top : 10px; }
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.
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.
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
Black:#000000
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 */
Efficient CSS
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
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.
The Media Attribute
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
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.
Activity
Font size must be 20pixels
Font face is sans-serif
Border is black with 10px size and a dashed style
It has a padding of 10 pixels
The width of the element is 200 pixels
The text alignment should be right.
Hello text should be red.
World text should be blue.
