Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download What Makes a good web site?
Document related concepts
Transcript
Cascading Style Sheets
Tom Osman
Separating Form and Structure
Keep the content of a webpage separate from the
formatting of the page.
Structure (of content)
XHTML code
(the web page)
Headings
Sub headings
Paragraphs
A narrative that flows in a meaningful sequence from top of
page to bottom of page
Form
Font
Colour
Page layout
CSS (usually an
external file;
xxxx.css)
Advantages of separating Form and
Content
If the same CSS is applied to many web
pages, then a single change to the CSS will
affect all web pages.
Easy site maintenance
Great flexibility
A user can substitute their own CSS for yours
– good for a range of special needs; dyslexia,
visual impairment, colour blindness etc.
What do CSS rules look like?
Redefines the
appearance of
the h1 tag
h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: 400;
All css rules end
color:#0066CC;
with a semi colon
}
selector {
property
:
value ; }
body {background-color: #FFFFCC; }
(pale yellow)
How to attach an external style sheet to a
web page
Place a link to the style sheet in the <head>
section of the xhtml document
The name (& path) of
the css file
Tells the browser that it
is linking to a stylesheet
Tells the browser what type
of content the file contains
<link href=“example1.css” rel=“stylesheet” type=“text/css” />
The W3C Box Model
Precise positioning is crucial to the efficient
use of CSS – make sure that you read and
understand how this works.
W3C Box Model
http://www.w3.org/TR/REC-CSS2/box.html
Interactive box Model Demo
http://www.redmelon.net/tstme/box_model/
<div> and <span> xhtml tags
The <div> </div> tag is a block level container;
it can be treated like an object
Can have attributes; colour, font size, width etc.
Can be positioned on a web page with accuracy
http://www.w3schools.com/tags/tag_div.asp
The <span> </span> tag is an in line tag – e.g.
used to apply a class to a fragment of text on a
line.
http://www.w3schools.com/tags/tag_span.asp
CSS and good graphic design
CSS Zen Garden
http://www.csszengarden.com
Comments or Questions?
