Website Development Cascading Style Sheets Stewart Blakeway FML 408 blakews@hope.ac.uk http://cs.hope.ac.uk/courses/webdev/
Aims of the Presentation Why use CSS? Using Style Sheets Embedded Linked Inline Classes Positioning Layers Inheritance
HTML 4.01 Uses Document Object Model Allows browser to access parts of a web page DHTML - Dynamic HTML JavaScript CSS Interactive web pages Respond to events
What is CSS? A set of rules applied to HTML elements Syntax different from HTML Works with HTML Describe how the page is to be displayed Part of the specification for HTML 4 CSS2 ( incorporates CSS1 and CSSP) Easier to apply to well written and structured HTML
Why Use CSS? Separate content from style Change a whole website from one document No more font tags <font face =Arial, Helvetica, “sans serif” color =#0000FF size=“-1”> File sizes will be reduced Set the stage for forward and backward compatibility Bandwidth savings
The Problem? Only newer versions of Browsers support them Version 4 and above They are not displayed consistently Platform differences Navigator for Macs, PCs and Unix IE for PCs and Macs Browser types and versions differences IE4 and 5.5 Navigator 4 and 6
Common Denominator Design Design your stylesheet so that it looks okay in all browsers May restrict the number of styles available to you Check your web page as each style is added As new browsers are released these problems should cease to exist
Browser Specific Style Sheets May be necessary for more complex style Use JavaScript to check for different:- Browser types Version numbers Direct to a style sheet written specifically for that browser version http://www.w3schools.com/js/js_browser.asp
body {font-family: Arial} Rules Style Sheets are made up of Rules body {font-family: Arial} Rules are made up of selectors and declarations Talk through the slide Ask whether there are any similarities with HTML Notice the syntax No tags are included in style sheets
Selectors body {font-family: Arial} First part of a Rule is the selector The selector is the link between the HTML document and the style sheet. All HTML elements are possible selectors Ask for suggestions of other possible selectors Write suggestions on the board For example:- BODY Hn TABLE TD TH P HR DIV SPAN
Declarations body {font-family: Arial} Second part of a Rule is the declaration A declaration consists of a property and a value separated by a colon Declarations can be grouped body { font-family: Arial; color: #FF3300 } Each declaration is separated by a semi-colon
Cascading? HTML has structure Parent child relationships Inheritance body {background-color:navy ; color: yellow } h1 {color: silver}
CSS and HTML documents Possible incorporation methods Embedding a Style Sheet within HTML document head Linking to an External Style Sheet file Inlining Style applied to individual HTML elements Explain There are different ways of incorporating style sheets into your htm document Talk through the slide We will consider the first two today
Embedding in the Document <html> <head><title>How to Embed a Stylesheet</title> <style type=“text/css”> <!-- h2 {font-family:Arial; font-size: 18pt; color: #FF3300} --> </style> </head> Used to apply unique style to a single document Embedded in the head section of HTML document <STYLE> </STYLE>tag <!-- --> for browsers ignoring <STYLE> element
External Style Sheets Used to change /apply style to a whole site Separate text file Saved with a .css file extension E.g.. fred.css Contains all style information / rules Referenced via <link>tag within HTML document head Contains no HTML code Cascading nature More than one style sheet can be applied to the same document
Linking from the HTML file <html> <head> <title>How to Link to a stylesheet</title> <link rel=“stylesheet” href=“fred.css” type=“text/css”> </head> <body>………..
External Style Sheets <link rel=“stylesheet” href=“firstTry.css” type=“text/css”> link tag placed in the document head to reference the style sheet rel attribute specifies the type of relation between the linked and current document (style sheet) type attribute specifies media type e.g. “text/css” Explain The link tag is case sensitive Note the value of HREF should =your stylesheet whatever it is called e.g. css1.css
Inline Stylesheets <html> <head> <title>Inline stylesheet</title> </head> <body> <h1 style=“font-family:Arial; font-size: 18pt; color: #FF3300”>Text with a style applied directly</h1> </body> </html>
Which to use? External Embedded Inline Easy to change one file Look for website – cascades down to the document Embedded Use for style for one page Overrides an external sheet Inline Added direct to content in the document Less useful
/*your comment goes here*/ Comments Useful to organise your code /*your comment goes here*/ Mark out general formatting Mark out positioning data Mark out page specific data
Organising Your Style /* Colours */ body, table, th, td {background:#FFFFFF ; color:#000000} h1, h2, h3 {color:#FF6600} /* Fonts */ h1 { font-family:”Times New Roman”, Times, serif; font-style: italic } body, table, td, th { font-family:Arial, Helvetica, sans-serif} /* Size */ body, table, th, td { font-size:12pt} h1 { font-size:50pt ; } h2 { font-size:24pt}
Typography HTML on its own provides very poor typographic control CSS allows typographic control font-size can be set in points or pixels font-style font-weight text-decoration
Font font-style normal | italic | oblique font-weight normal | bold | bolder | lighter font-size x-small | small | medium| large | x-large 10pts |12pts | 14pts | etc. px percentage font-family “times new roman” | times | arial “comic sans ms serif” | “sans serif” Provide alternative font faces body, table, td, th { font-family:Arial, Helvetica, sans-serif}
Text text-decoration none | blink | underline line-through | overline text-transform uppercase | lowercase text-align left | center | right | justify
Classes Enable the same elements to take on different styles Named CSS selector Should be named according to function Declared in style sheet as .firstpara {font-size: 24pt: color: violet} Always starts with a fullstop Expressed in HTML element tag using class attribute <p class=“firstpara”>here is some text</p> Do NOT start a class name with a number! This is only supported in Internet Explorer.
Classes <p class=“firstpara”>here is some text</p> Uses the style defined in the class <p>here is some text</p> Uses the style defined for the tag p {font-family:Arial; font-size: 18pt; color: red} .firstpara {font-size: 24pt: color: violet}
Applying Stylesheet Classes Use a redefined HTML tag <p> or <h2> or Create containers <span> </span> Inline container <div> </div> Block level container Begins at the start of a line Ends with a line break Can contain multiple block level elements such as paragraphs and headings Can be an alternative to <table>
Alternative Table Design Method DIVs can be an alternative to <table> DIVs are a container, like a table cell CSS can position the DIV <div id=“article”>xxx</div> #article{ width:250px; padding:5px; float:right;}
DIV Design 1 Use DIVs to create the skeleton of the page There should be no display-specific information in the HTML / XHTML The Goal: separate the information from the layout / presentation of the page Layout is entirely controlled by CSS
DIV Design 2 Identify major sections of the page Masthead (Logo and Title) Menu Content Search Footer Don’t overuse the DIVs
http://hopelive.hope.ac.uk/computing/
Pseudo-classes Applied to an element which changes as the user interacts Visited links and active links a:link {color:#FFFFCC; text-decoration:none } a:visited {color:#FFCCCC; text-decoration:none } a:hover {color:#FFFFFF; text-decoration:underline } a:active{color:#FFFFFF; text-decoration: underline } Order is important Does not work with Netscape Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
Pseudo-elements Refer to sub-parts of the same elements first letter of a paragraph first line of a paragraph h1:first-letter {font-weight:bold; font-size:72pt}
Positioning of Elements Positioning elements h1 { position:absolute; left:150px; top:100px} Starts the top left hand corner of the browser Position can be relative or absolute Used with <div> and <span>
Monitor Resolutions 640 x 480 800 x 600 1024 x 768 Top 0, Left 0
Positioning and Browsers position – left and top width and height overflow visible hidden scroll visibility z-index
Background Images background-color background-image url( ) body{background:#FFFFFF ; color:#000000} background-image url( ) body {background-image: url(image.gif)} background-repeat body {background-repeat: no-repeat} background-position body {background-position: center}
Layering z-index Higher z-index stacks a layer on top of another layer Layers can Have width and height Be positioned Have background colours Be transparent Allow justification .right { width:290px; height:100px; z-index:2; position:absolute;left:310px; top:175px;text-align:left} Useful if combined with JavaScript to create dynamic content
CSS Box Model http://www.w3schools.com/css/css_boxmodel.asp Margin - Clears an area around the border. The margin does not have a background colour, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background colour of the box Padding - Clears an area around the content. The padding is affected by the background colour of the box Content - The content of the box, where text and images appear http://www.w3schools.com/css/css_boxmodel.asp
Nesting and Inheritance The Cascade, parent child relationship Elements inherit style unless overridden further down the tree html body h1 p a html body h1 p a div
Summary Creating style Inserting style Positioning Layers Text Linking Embedding Inline Positioning Layers
Further Information W3Schools: CSS Tutorial http://www.w3schools.com/css/