computing concepts: css. aims to understand the uses of css to understand the different types of...
Post on 22-Dec-2015
229 views
TRANSCRIPT
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
14
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>
15
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>
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
Externalbody {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">
19
Activity: Write style to make:
H1 yellow and Arial All other text silver and "Comic Sans
MS " Background navy colour
20
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>
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?