Week 22 Style sheets
Download
Report
Transcript Week 22 Style sheets
Computing Concepts: CSS
Aims
To understand the uses of css
To understand the different types of
css
To be able to create a css file
To be able to use the three types of
css within web pages
What is CSS?
CSS stands for Cascading Style Sheets
A set of rules applied to HTML
elements
Syntax different from HTML
Works with HTML
Styles define how to display HTML
elements
Describe how the page is to be
displayed
Part of the specification for HTML 4
Why use CSS?
Easy to apply to well written and
structured HTML
Smaller file sizes
Saves bandwidth
Separates style and content
Can change whole website at once
Good for maintenance
Style Sheets
Style sheets are defined by the W3C
CSS2 specification
Component of DHTML
Give you control over the
appearance of a web page
Advantages of CSS
The designer has control of page
appearance and typographic
elements such as font size, line
spacing.
Style is separate from structure
Style elements can be defined in
CSS removing the need for
elements like <FONT> in the web
document. HTML just defines the
page structure.
Advantages of CSS (2)
Smaller, easier to maintain
documents and sites.
Because the style is removed from
web documents, it should be easier
to correct and update content.
You can link many pages to one
style sheet so it should be easier to
maintain a consistent appearance.
Disadvantages of CSS
Even where there is apparent
consistency style sheet elements may
be implemented and displayed
differently.
Types of Style Sheets
Three types of style sheet
Inline Styles
Internal Style Sheets
External Style Sheets
Adding CSS
There are several ways to include
styles
External style sheet (saved as a .css
file)
Internal style sheet (inside the
<head> tag)
Inline style (inside an HTML element)
Adding CSS
Normally we use html tags to say
what is on a page - <p>, <h1>,
<table>
These tags have attributes to say
what the tag contents should look
like
<p color blue>Test</p>
CSS can save a lot of time and
provide styles for multiple
documents
Inline Style Sheet
In the HTML Tag
Can use multiple styles in a single
tag
<p style="color: blue; margin-left:
20px"> This is a paragraph </p>
No real advantage to using this. It
is like using the attributes of a tag.
Use if want to change a tag from
what is being set by a previous
style
Internal Style Sheet
In the Head Tag
<head>
<style type="text/css"> h1 {color: sienna} p
{margin-left: 20px} body {background-image:
url("images/back40.gif")} </style>
</head>
Used to provide style for a particular
page
Will override external style if you
want one page to look different from
the rest of the site
Font – Using Internal Style
To change fonts use the style tag in
the head of your webpage
<html>
<head><title>Style</title>
<style type=“text/css”>
body {font-family:Arial}
</style>
</head>
14
Colours – Using Internal Style
<style type=“text/css”>
body {font-family:Arial}
body {color:black}
body {background-color:yellow}
h1 {color:red}
h2 {color:blue}
h3 {color:green}
</style>
15
External Style Sheet
The web pages link to an external style
sheet by using the <link> tag
<head> <link rel="stylesheet"
type="text/css" href="mystyle.css" />
</head>
If all the pages link to mystyle.css then a
change to this file updates the whole site
Can write the style sheet in any text editor,
for example notepad
Must save with the .css extension
CSS File
Does not contain html tags
Is a text file
Must be saved as .css
Example
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
Examples: Inline, Internal, External
External
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
Internal
<style type="text/css"> h1 {color: sienna} p
{color:blue;margin-left: 20px} body {background-image:
url("images/back40.gif")} </style>
Inline
<p style="color: blue; margin-left: 30px">
Activity: Write style to make:
H1 yellow and Arial
All other text silver and "Comic
Sans MS "
Background navy colour
19
Answer
<style type=“text/css”>
body {font-family:"Comic Sans MS"}
body {color:silver}
body {background-color:navy}
h1 {color:yellow}
h1 {font-family:Arial}
</style>
20
CSS – Order of Precedence
If more than one style is used the
following order of importance is
applied:
Browser default
External style sheet
Internal style sheet (inside the
<head> tag)
Inline style (inside an HTML element)
Inline has the highest priority
CSS Syntax
The syntax is made up of the
following components
selector {property: value}
body {color: black}
Property and value separated by :
Property and value must be in { }
p {font-family: "sans serif"} – in
this case the value is multiple
words, must use “ ”
CSS Syntax 2
p {text-align:center;color:red}
Can use multiple properties and
values as above – must separate
each with a ;
For readability should put each
property on a new line
p
{
text-align: center;
color: black;
font-family: arial
}
CSS Syntax 3
h1,h2,h3,h4,h5,h6
{
color: green
}
The example above shows how you
can group selectors. Separate by ,
The example means whenever you
use a heading h1-h6 the colour will
be green
Activities
Create a html page that uses an
inline style – save this in inline.html
Create a html page that uses an
internal style – save as internal.html
Create a css file using notepad create
styles for background colour,
paragraphs, headings, links etc –
save as test.css
Create 2 web pages – make them
use the external style sheet –
test.css
Visit the www.w3schools.com/css site
Remaining Lectures
Careers
Module Choice Event
Questions?