Web Design Using CSS

Web Design Using CSS Web Development Michael Russell

What is CSS? • CSS – Cascading Style Sheets • Text based • Provides the means to create styles for structured (X)HTML documents • Can be used to define position, fonts, colours and graphics for page elements • Provides detailed flexibility in conjunction with (X)HTML id and class elements

CSSSyntax • Selector { property:value; property:value; } e.g. H1 { color : red ; font-size : 16; }

Why Use CSS? • Separate content structure from design • Standards – create one design to work across all platforms and browsers • Efficiency – change one file to change an entire site’s design • Team work – provides a single, standard working method • Accessibility. Accessibility. Accessibility.

Inline styles • CSS styles can be defined within the (X)HTML • E.g.: <p style=“color: #ff0000;”>This will be red.</p> • Avoid inline styles as much as possible • Always be able to justify an inline style specification when used • Will always override styles specified in the <head> or external style sheets

<head></head> styles • Styles defined in the head of an (X)HTML document • Usually useful only for testing, debugging, or “hacks” when absolutely required • Makes sense if the “site” has only one page (very rare!) • Are defined on a page by page basis • Will override external file style sheets, but are overridden by inline styles • Should be avoided

External style sheets • Styles defined in a separate text file • File can be linked to from unlimited (X)HTML files in a site • Properly managed, changes to one file redesign an entire site • Can be cached separately to the (X)HTML files, reducing bandwidth usage • Is overridden by <head> and inline styles • Is the preferred method for defining CSS

Web Design Using CSS