Introducing CSS
http://www.netskills.ac.uk/
© Netskills, Quality Internet Training, University of Newcastle
Netskills is a trademark of Netskills, University of Newcastle.
Partly funded by the
1
© Netskills Quality Internet Training, University of Newcastle
Topics
HTML Formatting
CSS Essentials
Rules, Selectors and Declarations
Internal and External style sheets
Class and ID
Div and Span
CSS Cascade
CSS Colours and Units
2
© Netskills Quality Internet Training, University of Newcastle
An HTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>A Simple Document</title>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
</head>
<body>
<div><img src="logo.gif" alt="My Logo" /></div>
<h1>Creating Web Pages</h1>
<p>A <strong>one-day workshop</strong> run by:
<br />
<a href="http://www.netskills.ac.uk/">Netskills</a>
</p>
</body>
</html>
3
© Netskills Quality Internet Training, University of Newcastle
Evolution of HTML Formatting
Originally HTML only for structuring content
Browser handled presentation
Specification contains guidelines for browsers
Expansion of the HTML language
New tags and attributes for formatting e.g.
<font face="Arial" color="red">Hello</font>
Hello
Created problems many problems including:
Proprietary mark up e.g. <marquee> <blink>
Mixed style and structure
Misuse of formatting instructions
4
© Netskills Quality Internet Training, University of Newcastle
The Solution: CSS
Correct way to format pages uses CSS
Cascading Style Sheets
Separation of style from structure
Fine control – potentially over every item in the page
Easy style management
Valid strict HTML/XHTML is also important!
Formatting tags and attributes have been
deprecated – cannot be used in strict documents
There is no need to use them if you can master
CSS style sheets
www.csszengarden.com
5
© Netskills Quality Internet Training, University of Newcastle
CSS Style Sheets
Style sheets specify formatting rules
Selector
identifies
an HTML
tag
Rules consist of selectors and declarations
p {background-color: blue;
color: white;}
Style declarations for the
<p>…</p> tag
<p>
This paragraph should have
white text on a blue
background
</p>
Result when
viewed in web browser
6
© Netskills Quality Internet Training, University of Newcastle
Style Sheet Syntax
Declaration(s) defined as:
style-property: value;
Selector
p {background-color: blue;
color: white;}
Curly
braces
ul {margin-left: 15%; font-weight: bold;}
Multiple
selectors
as comma
separated list
7
Semi-colon ;
separates declarations
h1,h2,h3,h4 {
background-color: white;
color: blue;
font-style: italic;}
© Netskills Quality Internet Training, University of Newcastle
Internal Style Sheets
Simplest to use
Style information included in each page
Rules set out in <style> tags
Usually in the <head> section of the page
Styles available to browser when it loads the
page <body>
<style type="text/css">
p {background-color: blue;
color: white;}
</style>
8
© Netskills Quality Internet Training, University of Newcastle
Internal Style Sheets
<html>
<head>
<title>Internal Example</title>
<style type="text/css">
h1 {color: green; font-style: italic;}
</style>
</head>
<body>
<h1>Heading 1 in green italics</h1>
</body>
</html>
9
© Netskills Quality Internet Training, University of Newcastle
Style sheet rule
for <h1> declared
inside <style>
tags within the
document <head>
External Style Sheets
Often the most practical method
Style information is held in a separate file
Pages using the style sheet link to the same file
Only one master to maintain
File has .css extension
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Link can be to a local file or a full URL
Multiple style sheets can be used in a page
10
© Netskills Quality Internet Training, University of Newcastle
External Style Sheets
<html>
<head>
<title>CSS example</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
<body>
<h1>Heading 1 in green italics</h1>
</body>
</html>
11
© Netskills Quality Internet Training, University of Newcastle
Style sheet
rule for <h1>
declared inside
linked file
mystyle.css
HTML Tags as Selectors
Apply style rule to all instances of a tag in the page
12
Some browsers render many HTML tags with their own
default "styles" e.g. <strong> <h1>
Not all CSS properties can be applied to all HTML tags
Different kinds of HTML tags:
Block-level tags place a line break before and after the
element e.g. <p> <h1> <table>
Inline tags have no associated line breaks
e.g. <em> <strong>
Replaced tags have set or calculated dimensions
e.g. <img /> <input />
© Netskills Quality Internet Training, University of Newcastle
Structural Grouping & Association
Allows much finer control over page style
Element level
Document level
<div> and <span> - "clean" HTML tags
Used to identify parts of the HTML content
Both very important for Style Sheets
No influence over "HTML only" look of the page
13
Classes and ID's
Use HTML attributes to identify elements
Use special CSS selectors to apply styles
Provide a framework for CSS
© Netskills Quality Internet Training, University of Newcastle
Classes as Selectors
Apply specific styles to sub-sets of HTML tags
Set in style sheet
p {text-align: left; color: red;}
p.special {text-align: right; color: green;}
Assign to tag with class attribute
<p class="special">A different class of
paragraph</p>
<p>This is a normal paragraph</p>
Classes are re-usable in a page
14
Multiple instances of <p> tags in the special
class in the HTML of a page
© Netskills Quality Internet Training, University of Newcastle
Using Generic Classes
Created by omitting the tag name in the selector
p {text-align: left; color: red;}
.special {text-align: right; color: green;}
The class special can now be assigned to
any tag in the page
<h1 class="special">A different class of
header</h1>
<p class="special">A different class of
paragraph</p>
<h1> This is a normal header</h1>
<p>This is a normal paragraph</p>
15
© Netskills Quality Internet Training, University of Newcastle
Using Classes
<style type="text/css">
p {text-align: left; color: red;}
.myclass {text-align: right; color: green;}
p.myclass {font-style: italic;}
</style>
<h1 class="myclass">A different
class of header</h1>
<p class="myclass">A different
class of paragraph</p>
<h1>This is a normal header</h1>
<p>This is a normal paragraph</p>
16
© Netskills Quality Internet Training, University of Newcastle
Classes applied to
<h1 and <p>
IDs as Selectors
Apply styles to a single element in the page
Unlike a class – an ID is unique
Usage similar to classes
An id attribute in the HTML identifies element
A special selector in the CSS applies the style
Selector #idname
#oneoff {font-style: italic;
font-weight: bold;}
Attribute
id="idname"
<p>The <span id="oneoff">Important</span> bit of…</p>
17
© Netskills Quality Internet Training, University of Newcastle
Div and Span
"Clean" structural HTML tags
No default appearance
Used with class and ID
Very important for layout with CSS
<div> used to group block level elements together
<div id="Section1">
<h1>Section One</h1>
<p>The first bit of…</p>
</div>
<span> used to identify fragments inside blocks
<div id="Section1">
<h1>Section One</h1>
<p>The <span class="hi-lite">first bit</span> of…</p>
</div>
18
© Netskills Quality Internet Training, University of Newcastle
Div, Class & ID
#section1 {color: red;
text-align: center;}
#section2 {color: blue;}
.caps {text-transform: uppercase;}
#section2 p {text-decoration: underline;}
<div id="section1">
<h1>This is section one</h1>
<p class="caps">A paragraph in section one</p>
</div>
<div id="section2">
<h1 class="caps">This is section two</h1>
<p>A paragraph in section two</p>
</div>
19
© Netskills Quality Internet Training, University of Newcastle
Cascading Styles
Cascading Style Sheets
Priority set according to simple rules
Multiple levels of style can be applied, merged and
controlled
Final appearance is a composite of all appropriate rules
Source: Browser defaults > User styles > Author styles
Selector specificity: Relative weighting – can be calculated
Order specified: If rules are still tied then last one wins
Specificity
Weighting applied according to positioning of rule
To understand specificity see:
htttp://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html
20
© Netskills Quality Internet Training, University of Newcastle
CSS Cascade
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
<style type="text/css">
h1 {font-family: Arial, sans-serif;}
#header1 {color: magenta;}
#section1 {color: red;
text-align: center;}
#section2 {color: blue;}
.caps {text-transform: uppercase;}
#section2 p {text-decoration: underline;}
</style>
<div id="section1">
<h1 id="header1">This is section one</h1>
<p class="caps">A paragraph in section one</p>
</div>
<div id="section2">
<h1 class="caps">This is section two</h1>
<p>A paragraph in section two</p>
</div>
21
© Netskills Quality Internet Training, University of Newcastle
Colours in CSS
CSS allows rich control over colour
Only 16 are valid in HTML
Remember to use the US spelling!
Names can be used but some will be invalid
color: red;
color: orange;
Strictly speaking all colours should be defined
using hexadecimal
color: #0000ff;
www.w3.org/MarkUp/Guide/Style.html
22
© Netskills Quality Internet Training, University of Newcastle
Units
CSS supports many units
Absolute e.g.
Relative e.g.
Percentages (%)
"Ems" (em) & "Exes" (ex)
Special units e.g.
23
Pixels (px)
Points (pt)
Millimetres (mm)
normal, bold, small, x-small, large,
x-large etc.
© Netskills Quality Internet Training, University of Newcastle
Summary
24
CSS is the correct way to format HTML documents
CSS rules consist of a selector and one or more
declarations
CSS style sheets can be internal or external to the
page
Class, ID, Div and Span give you fine control over an
HTML document with CSS
The CSS Cascade is used to combine and merge
styles to produce the final effect
Colours in CSS should be declared in hexadecimal
where possible
CSS supports a range of units
© Netskills Quality Internet Training, University of Newcastle
© Copyright 2026 Paperzz