XHTML/CSS Week 3
This Week Quiz to revise last week (XHTML and DW) CSS - Part 2 Using HTML Tables
Quiz - 1 Identify the following XHTML tags:,,,,,,,,,,,,,,,,,,,, What do these tags do? Home Home RACC RACC
Quiz - 2 Find the errors: RACC RACC Big Text! Big Text!
CSS Part the Second
Last week we discussed… (Content highlighted in yellow) Old Style HTML Old Style HTML Can you think of some reasons why this wasn't a good way forward? Can you think of some reasons why this wasn't a good way forward? …why this wasn’t a good idea?
What’s the problem? HTML and the dreaded tag caused problems for: Blind People Web Designers Search Engines Everyone else!
Try this: A similar page using CSS in an external stylesheet test.htm<html><head> </head><body> XHTML and CSS XHTML and CSS So much better! So much better! </body></head>mystyles.css h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: italic; font-weight: 700; color: #0000FF; } p { font-family: "Times New Roman", Times; font-size: 12pt; color: #000000; }
What is Cascading? CSS rules can be defined in the following places: An external style sheet (usable by many HTML files) linked with: Within … tags in the area of a HTML file Within a tag (rarely used – a bit too much like the tag) An HTML file can acquire CSS rules from a style sheet, add extra rules (optionally overriding a rule defined in the style sheet) in the area and then create rules within an individual HTML element (optionally overriding a rule defined in a style sheet or the of that file) We’ll see this on the next slide.
Cascading Rules <html><head> and rules as before --> and rules as before --> p { font-family: “arial”; } </head><body> XHTML and CSS XHTML and CSS So much better! So much better! We’ve overridden the font and colour for this paragraph only We’ve overridden the font and colour for this paragraph only </body></head>
How CSS rules are defined A CSS rule consists of three parts: a selector, a property and a value in the following format: selector {property: value} selector {property: value} h1 { color: red} h1 { color: red} The selector is commonly the HTML element you want to define, the property is the attribute you wish to change. Each property takes a value. The property and value are separated by a colon, and surrounded by curly braces If the value consists of more than one word this must be placed in double quotes: p {font-family: “Times New Roman"} p {font-family: “Times New Roman"}
CSS Syntax To define multiple properties for the same selector separate each one with a semicolon: p {text-align:center; color:red} CSS (like HTML) ignores “whitespace” so for readability: p { text-align: center; color: black; font-family: arial } Defining the same properties/values for multiple selectors h1,h2,h3, p { color: red }
CSS Class rules - 1 Defining a rule for a specific selector (like ) changes the appearance of all occurrences of that selector. As we have seen this can provide very readable XHTML code. CSS classes allow us to create rules that we can use for many different selectors, as and when we wish.
CSS Class rules - 2 Two CSS class rules specifically for the element: p.blue {color: blue} p.red {color: red} How we use them: This is blue text This is blue text I’m well red! I’m well red!
Creating CSS Classes - 3 Class definitions don’t need to be attached to an specific selector:.blue {color: blue} - note how they start with a period (.).red {color: red} How we use them: This is blue text (Same as before) This is blue text (Same as before) (produces a blue horizontal rule) (produces a blue horizontal rule)
HTML Tables
Tables Built using three main tags:,,,, Also Table Header (like ) Table defined within … Table defined within … Each row … Each row … Each cell … Each cell …
What does the following table look like? </table>
Table tags in action - what do all these mean?
Exercise - Create this table Julian Manoj
Exercise – can you create the following page layout Single Cell table 600px wide border 1 See right This cell 200px wide One row, two column table 600px wide border 1 This cell to be 400px wide Single Cell table 600px wide border 1