Website Development Cascading Style Sheets

Website Development Cascading Style Sheets
Stewart Blakeway FML 408

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

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”>  </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}

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

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

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

Website Development Cascading Style Sheets

Similar presentations

Presentation on theme: "Website Development Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Website Development Cascading Style Sheets

Similar presentations

Presentation on theme: "Website Development Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback