xhtml/css week 3. this week quiz to revise last week (xhtml and dw) css - part 2 using html...
TRANSCRIPT
XHTML/CSSXHTML/CSS
Week 3Week 3
This WeekThis Week
Quiz to revise last week (XHTML and DW)Quiz to revise last week (XHTML and DW) CSS - Part 2CSS - Part 2 Using HTML TablesUsing HTML Tables
Quiz - 1Quiz - 1
Identify the following XHTML tags:Identify the following XHTML tags: <ol>, <td>, <ul>, <table>, <li>, <a>, <img>, <ol>, <td>, <ul>, <table>, <li>, <a>, <img>,
<tr>, <br />,</hr>,<title><tr>, <br />,</hr>,<title> What do these tags do?What do these tags do?
<img src=‘cat.jpg’ alt=‘Tiddles’ align=‘right’><img src=‘cat.jpg’ alt=‘Tiddles’ align=‘right’> <a href=‘index.htm’>Home</a><a href=‘index.htm’>Home</a> <a href="http://www.racc.ac.uk">RACC</a><a href="http://www.racc.ac.uk">RACC</a>
Quiz - 2Quiz - 2
Find the errors:Find the errors:
<img src=‘dog.tif’ width=300 height=200><img src=‘dog.tif’ width=300 height=200> <a href=‘offers.htm’></a><a href=‘offers.htm’></a> <a href=‘www.racc.ac.uk’>RACC</a><a href=‘www.racc.ac.uk’>RACC</a> <H1>Big Text!<H1><H1>Big Text!<H1>
CSSCSS
Part the SecondPart the Second
Last week we discussed…Last week we discussed…(Content highlighted in (Content highlighted in yellowyellow))
<h1 align = center ><b><i><font color="#0000FF" <h1 align = center ><b><i><font color="#0000FF" size="6" face="Arial, Helvetica, sans-serif">size="6" face="Arial, Helvetica, sans-serif">Old Old Style HTMLStyle HTML </font></i></b></h1> </font></i></b></h1>
<p align="left"><font color="#000000" <p align="left"><font color="#000000" size="3"><font face="Times New Roman, Times, size="3"><font face="Times New Roman, Times, serif">serif">Can you think of some reasons why this Can you think of some reasons why this wasn't a good way forward?</wasn't a good way forward?</font>font>
</font></p></font></p>
……why this wasn’t a good idea?why this wasn’t a good idea?
What’s the problem?What’s the problem?
HTML and the dreaded <font> tag caused HTML and the dreaded <font> tag caused problems for:problems for:
Blind PeopleBlind People Web DesignersWeb Designers Search EnginesSearch Engines Everyone else!Everyone else!
Try this: A similar page using CSS in an Try this: A similar page using CSS in an external stylesheetexternal stylesheet
test.htmtest.htm
<html><html>
<head><head>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css" href="mystyles.css" /> href="mystyles.css" />
</head></head>
<body><body>
<h1>XHTML and CSS</h1><h1>XHTML and CSS</h1>
<p>So much better! </p><p>So much better! </p>
</body></body>
</head></head>
mystyles.cssmystyles.css
h1 {h1 {
font-family: Arial, Helvetica, sans-serif;font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;font-size: 14pt;
font-style: italic;font-style: italic;
font-weight: 700;font-weight: 700;
color: #0000FF;color: #0000FF;
}}
p {p {
font-family: "Times New Roman", font-family: "Times New Roman", Times;Times;
font-size: 12pt;font-size: 12pt;
color: #000000;color: #000000;}}
What is Cascading?What is Cascading?
CSS rules can be defined in the following places:CSS rules can be defined in the following places:
An external An external style sheetstyle sheet (usable by many HTML files) linked with: (usable by many HTML files) linked with:
<link rel="stylesheet" type="text/css" href=“filename" /><link rel="stylesheet" type="text/css" href=“filename" />
Within <style>…</style> tags in the <head> area of a HTML fileWithin <style>…</style> tags in the <head> area of a HTML file
Within a tag (rarely used – a bit too much like the <font> tag)Within a tag (rarely used – a bit too much like the <font> tag)
An HTML file can acquire CSS rules from a style sheet, add extra rules 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 <head> (optionally overriding a rule defined in the style sheet) in the <head> area and then create rules within an individual HTML element area and then create rules within an individual HTML element (optionally overriding a rule defined in a style sheet or the <head> of (optionally overriding a rule defined in a style sheet or the <head> of that file) that file)
We’ll see this on the next slide.We’ll see this on the next slide.
Cascading RulesCascading Rules
<html><html><head><head><link rel="stylesheet" type="text/css" href="mystyles.css" /> <link rel="stylesheet" type="text/css" href="mystyles.css" /> <!– Acquires <h1> and <p> rules as before --><!– Acquires <h1> and <p> rules as before --> <style type="text/css"> p { font-family: “arial”; }p { font-family: “arial”; }
</style> </head></head><body><body><h1>XHTML and CSS</h1><h1>XHTML and CSS</h1> <p>So much better! </p><p>So much better! </p><p style=color: red; font-family: “Times New Roman” ;><p style=color: red; font-family: “Times New Roman” ;> We’ve overridden the font and colour for this paragraph only </p>We’ve overridden the font and colour for this paragraph only </p></body></body></head></head>
How CSS rules are definedHow CSS rules are defined
A CSS rule consists of three parts: a A CSS rule consists of three parts: a selectorselector, a , a propertyproperty and a and a valuevalue in the following format: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 The selector is commonly the HTML element you want to define, the property is the attribute you wish to change. Each property takes a property is the attribute you wish to change. Each property takes a value.value.
The property and value are separated by a colon, and surrounded The property and value are separated by a colon, and surrounded by curly bracesby curly braces
If the value consists of more than one word this must be placed in If the value consists of more than one word this must be placed in double quotes:double quotes:
p {font-family: “Times New Roman"} p {font-family: “Times New Roman"}
CSS SyntaxCSS Syntax
To define multiple To define multiple propertiesproperties for the same for the same selectorselector separate each one with a semicolon:separate each one with a semicolon:
p {text-align:center; color:red}p {text-align:center; color:red}
CSS (like HTML) ignores “whitespace” so for readability:CSS (like HTML) ignores “whitespace” so for readability:
p { text-align: center; p { text-align: center; color: black; color: black; font-family: arial }font-family: arial }
Defining the same Defining the same properties/valuesproperties/values for multiple for multiple selectorsselectors
h1,h2,h3, p { color: red }h1,h2,h3, p { color: red }
CSS Class rules - 1CSS Class rules - 1
Defining a rule for a specific Defining a rule for a specific selectorselector (like (like <h1>) changes the appearance of all <h1>) changes the appearance of all occurrences of that selector. As we have occurrences of that selector. As we have seen this can provide very readable seen this can provide very readable XHTML code.XHTML code.
CSS CSS classesclasses allow us to create rules that allow us to create rules that we can use for many different selectors, we can use for many different selectors, as and when we wish.as and when we wish.
CSS Class rules - 2CSS Class rules - 2
Two CSS class rules specifically for the <p> Two CSS class rules specifically for the <p> element:element:
p.blue {color: blue}p.blue {color: blue}
p.red {color: red} p.red {color: red}
How we use them:How we use them:
<p class=“blue"> This is blue text</p><p class=“blue"> This is blue text</p>
<p class=“red"> I’m well red!</p><p class=“red"> I’m well red!</p>
Creating CSS Classes - 3Creating CSS Classes - 3
Class definitions don’t need to be attached to an Class definitions don’t need to be attached to an specific selector:specific selector:
.blue {color: blue} - note how they start with a period (.).blue {color: blue} - note how they start with a period (.)
.red {color: red} .red {color: red}
How we use them:How we use them:
<p class=“blue"> This is blue text</p> (Same as before)<p class=“blue"> This is blue text</p> (Same as before)<hr class=“blue“ /> (produces a blue horizontal rule)<hr class=“blue“ /> (produces a blue horizontal rule)
HTML TablesHTML Tables
TablesTables
Built using three main tags:Built using three main tags:<table>, <tr>, <td><table>, <tr>, <td>
Also <th> Table Header (like <td>)Also <th> Table Header (like <td>) Table defined within <table> …</table>Table defined within <table> …</table> Each row <tr>…</tr>Each row <tr>…</tr> Each cell <td>…</td>Each cell <td>…</td>
What does the following table look like?What does the following table look like?
<table width="400" border="1"><table width="400" border="1"> <tr><tr> <td>1</td><td>1</td> <td>2</td><td>2</td> </tr></tr> <tr><tr> <td>3</td><td>3</td> <td>4</td><td>4</td> </tr></tr></table></table>
Table tags in actionTable tags in action- what do all these mean?- what do all these mean?
<table width="400" border="1" align=“center" <table width="400" border="1" align=“center" cellpadding="2" cellspacing="3" cellpadding="2" cellspacing="3" bordercolor="#0000FF" bgcolor="#FFFF33">bordercolor="#0000FF" bgcolor="#FFFF33">
<tr align="center" valign="top" <tr align="center" valign="top" bordercolor="#0000FF" bgcolor="#FF0000">bordercolor="#0000FF" bgcolor="#FF0000">
<td width="150" align="left" valign="top" <td width="150" align="left" valign="top" bgcolor="#99FF66"> </td>bgcolor="#99FF66"> </td>
Exercise - Create this tableExercise - Create this table
Julian Holden [email protected]
Manoj Nanda [email protected]
Phil.Tucker [email protected]
Exercise – can you create the Exercise – can you create the following page layoutfollowing page layout
Single Cell table 600px wide border 1
See right This cell 200px wide
One row, two column table 600px wide border 1This cell to be 400px wide
Single Cell table 600px wide border 1