unit34intro to CSS

unit34intro to CSS - Intro to Cascading Style Sheets What's...

Info iconThis preview shows pages 1–4. Sign up to view the full content.

View Full Document Right Arrow Icon
1 1 Unit 3 Intro to Cascading Style Sheets 2 Intro to Cascading Style Sheets What’s a Style? Cascading Style Sheets What’s CSS? How it works Specifying CSS Syntax Applying CSS CSS How To’s Classes and IDs CSS boxes Backgrounds Text and fonts lengths, borders, margins hyperlinks CSS references Advanced Topics in CSS (not shown in notes) 3 What’s a Style? • So far, all we’ve done is specified meaning for the content (i.e. title, h1, h2, etc.) • We have not really touched on appearance too much (i.e. bold, red, font size, etc.) • As mentioned earlier, XHTML was design for content and structure, not physical appearance • To change the physical appearance of a web page, we must use styles 4 What’s a Style? Styles … – define how to display HTML elements • i.e. all <h1> content must have red color – are normally stored in Style Sheets
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
2 5 C ascading S tyle S heets , or CSS describe how a document is to be displayed – Same principle as design templates in MS PowerPoint, Word, etc. – Allows you to specify the style for your webpage Can change fonts, colors, sizes, etc. – 1 style sheet can be used for multiple pages • Adds consistency to your site • Saves a lot of work! Cascading Style Sheets - What’s CSS 6 Cascading Style Sheets • Used to help the browser determine how different structures should be displayed – Before CSS, the display criteria were determined by built in “logic” in the browser • Different versions of CSS – CSS1 supported by all modern browsers • Netscape 6 or later, Internet Explorer 6 or later, Mozilla – More recent versions of CSS (CSS2, CSS3) • Netscape 6 or later, Mozilla, Safari - What’s CSS 7 Cascading Style Sheets • HTML was first created to define the content of a document • Supposed to say stuff like: • “This is a header” <h1> • “This is a table”, <table> • “This is a paragraph”, <p> • As number of tags grew, more and more difficult to separate a web page’s content from its layout i.e. <font> - What’s CSS - history 8 Cascading Style Sheets • As a result, W3C (in an effort to standardize HTML) introduced STYLES along with HTML 4.0 - What’s CSS - history
Background image of page 2
3 9 Cascading Style Sheets Advantages of using CSS: It gives more flexibility in web design Produces smaller files for your website Redefines XHTML back to what it was originally created to do (content) Global updates of your entire website Much easier for search engines to categorize your website (competitive advantage) - What’s CSS - advantages 10 Cascading Style Sheets • Browsers have a default style for each tag • CSS allows you to override the default style – This is how you change the appearance • CSS file can be stored outside of the XHTML file and therefore multiple XHTML document can link to a single CSS file - How it Works 11 Cascading Style Sheets • This was a breakthrough ( Advantages
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 4
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 07/30/2009 for the course CMPT 165 taught by Professor Ramesh during the Summer '09 term at Simon Fraser.

Page1 / 20

unit34intro to CSS - Intro to Cascading Style Sheets What's...

This preview shows document pages 1 - 4. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online