Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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?