Stylizing Pages using CSS and Creating a table in XHTML

Stylizing Pages using CSS and Creating a table in XHTML CS3 – 25/May/2010

AGENDA • Questions from last class • More CSS • Dealing with images using CSS • Fun-stuff to do with CSS • CSS Positioning • In-class exercise #4 • Making a simple table with XHTML • In-class exercise #5

Stylizing Pages using CSS – Part 2 Using <div> and <span> Using “id” and “class” Margin versus Padding More CSS definitions Using External Style definitions Setting background images with CSS Positioning with CSS

<div> and <span> tags • Used exclusively with CSS for formatting. • <div> and </div> - allows you to divide your whole document into sections (for formatting) • <span> and </span> - allows you to format small parts of text for formatting.

“id” and “class” attributes for tags • You can use id and class attributes to: • format multiple elements with different tags the same way • E.g., Two elements, one with <h1> tag and one with <h3> tag have the same font and same color • to uniquely format different elements with the same tag. • E.g., two elements, both <h1> look different (color, font, background etc.)

Part of what you will do in Try This 1 today……

<body> <div id="heading"><h1>The Truth about Elephants</h1></div> <div id="p1"> <p> <span class="one">I</span>t's hard to tell what goes through a baby elephant's mind when its mom is trying to put it to sleep. Do you think baby elephants wake up in the middle of the night and cry? Do their moms and dads take turns getting up with them to rock them back to sleep? How do you rock an elephant, anyway? And what about gorillas? </p> </div> <div id="p2"> <p> <span class="one">T</span>oday in the paper there's a story about a new gorilla that was just born in Franklin Park. Its mom is holding on to it just like any proud human mom. And I have to wonder if they go through as much trauma as that human mom when it comes to sleep, and food, and diapers, and running into the street. </p> </div> <div id="p3"> <p> <span class="one">W</span>hy is it so easy for them? Are they better parents? Do they just not worry about every little detail? I've never known a gorilla to read and study carefully seventeen books on bringing up baby gorillas. And they seem to know just what to do. They never worry about spoiling their little gorilla babies. They never worry about not having enough time with them. Now, don't get me wrong, I'd rather be human than a gorilla any day. Just imagine having to sit in a zoo. (Did you figure out yet that while gorillas were on my mind, I could only find a picture of an elephant?) </p> </div> </body>

And the corresponding style sheet…… <style type="text/css"> h1 {font-family:Lucida Bright; color:Navy;} p {font-family:Calibri; color:Olive;} div#heading {text-align:center; background-color:White;} div#p1 {background-color:Aqua;} div#p2 {background-color:Yellow;} div#p3 {background-color: Pink;} body {background-color:Silver;} span.one {font-size:xx-large; padding:1px;} </style>

Centering an image – use <div> Defining the image in <body> of document <div id=“smnthg”> <imgsrc=“elephant.jpg” alt=“Elephant” title=“mini jumbo”/> </div> Corresponding style (in style section): div#smnthg {text-align:center;}

Style Layout Concepts Every Web page element can be thought of as composed of three invisible boxes Element or Content (text, image, etc.) Padding Border Margin MIS3690

Controlling Element Size • To set element content area • width: w, where w is “size-value” or x% • height: h, where h is “size-value” • “size-value” - need units (e.g., 100px) • Width “x%” is relative to parent element • All “size-values” are in px (pixels) or pt (points) MIS3690

Try This… CS3-TryThis1.htm Open your template file Copy the content of the text file “ElephantText.txt” into the template, in the <body> section. Format the content in the file by adding the <h1></h1> tags to the title and the <p></p> tags to the three paragraphs. Add the image to the first line of the first paragraph, inside <p>. Save the file as “CS3-TryThis1.htm” Copy “elephant.jpg” into the same folder as the file above.

How is this done? – the tags first • Add <div id=“p1”> and </div> around the first paragraph (outside the <p> tags). • Repeat it with id=“p2” and id=“p3” for paragraphs two and three. • Add <span class=“one”> and </span> around the first letter of each paragraph.

How is this done? – the style… body {background-color:silver;} h1 {font-family:Lucida Bright; color:navy; background-color:white; text-align:center;} p {font-family:calibri; color:olive; border: 2px dotted black;} div#p1 {background-color:aqua;} div#p2 {background-color:yellow;} div#p3 {background-color: #FF99FF;} span.one {font-size:xx-large; padding:1px;} img { float:right; border:3px ridge red;}

Floating Elements • float:left and float:right moves an element to the left (or right) of the page and lets subsequent elements flow around it • clear:position, where position is left, right, both, or none keeps an element from flowing around a prior float

How do you adjust size for better presentation? • You can use the “margin” and “padding” to adjust size of the content. • Add the following to the style section: div#p1, div#p3 {margin-right:30%; margin-left:30%;} • You are doing this only for the p1 and p3 – not for p2.

Overflow scroll • Modify div#p2 in the style section to look like below: div#p2 {background-color:yellow; width:200px; height:200px; float:right; overflow:scroll;} • Test your file! • Can you make it look like this??

Example: overflow: scroll(other choices: visible, hidden, auto)

Background Images • background-image: url (image file) • background-repeat: • repeat-x, repeat-y, repeat, or no-repeat • background-attachment: • fixed or scroll • All above can be specified in one line: • body {background: url(image) fixed center repeat;} • background-position: x y • x can be top, center, bottom, % • y can be left, center, right, %

Element Positioning Styles • position: • static – This is the default. Never used except to override previous positioning styles • relative – compared to its default position (px or em, and +/-) • absolute – relative to the parent (px, em, or %) • fixed – position relative to the window (px, em, or %) • http://www.quirksmode.org/css/position.html

Positioning Styles to use with “position” Style • top, bottom, left, right • Example: {position:absolute; top:10px;} {position:relative; top:10px;} • z-index:# • Allows layering of elements with positioned styles • Higher numbers hide lower numbers

Types of Style Declarations • External Style Declarations • Style definitions are in a separate CSS file that is “linked” to your HTML file • Has the extension DOT CSS • Linked to the DOT HTM file using LINK tag. • Internal Style Declarations • Styles are defined in the <head> section of the HTML file enclosed within <style> and </style> tags. • In-Line Style Declarations • Styles are defined in the line tags in the HTML file

Illustrative Sample.. • External Style Sheet • body {background-color: red} • Separate file. No other tags are needed. File is saved with the extension DOT CSS. • Internal Style • <head> <style type=“text/css”> body {background-color: red} </style> </head> • In-line Style • <body style=“background-color:red”> All the web page content goes here… </body>

Syntax --In-line Styles <tag style="attribute: value; attribute: value; …"> Example: <p style="font-size: small; color: blue">

Another In-Line Style Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Exercise 1</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  </head> <body> <h1>This is a header of type h1</h1> <h2>This is a <span style="color:green"> header of type</span> h2</h2> <hr /> <p>This is a normal paragraph</p> <p style="border:red; border-style:solid"> This is a bordered paragraph</p> </body> </html>

Pros/Cons of In-Line Styles • Pros • Puts style near text or image it modifies • Avoids the need to create tag ids • Cons • All styles no longer in one place • Not a good alternative when same style is used multiple times (Use DIV and Class instead)

External Style Sheet • External style sheets enable you to change the appearance and layout of multiple pages by using one single CSS document! • Same syntax as that of internal style sheet • Styles appear in separate file • File name extension is .css • Example on Bb: template.css

Applying an External Style Sheet • Can reference one or more style sheets from within any Web page • Insert one or more <link> tags into the <head> section: <link rel="stylesheet" type="text/css" href=“abc.css" /> where abc.css is the filename of the external style-sheet.

Referencing an external style sheet <head> <title>CSS Exercise 1</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="ex3.css" type="text/css" /> </head> <body> <h1>This is a header of type h1</h1> <h2>This is a header of type h2</h2> <hr /> <p>This is a paragraph. I've tried to make it long enough to scroll onto a second line. If it's still two short, please resize your window so that you can observe whether or not it's indented properly.</p> <p class="bord">This is a bordered paragraph</p> </body> </html>

Multiple styles will cascade into one • Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. • Multiple external style sheets may be referenced inside a single HTML document. • All the styles will "cascade" into a new "virtual" style sheet that combines all the style definitions except the ones that cause conflicts (i.e., same thing is “styled” in different ways in the different style declarations) • In conflicts, and in general the following is the hierarchy of acceptance • Browser default – if no styles are defined • External style sheet - will override Browser defaults • Internal style sheet (inside the <head> tag) – will override external • Inline style (inside an HTML element) - Da Boss – will override everything else.

Defining and Stylizing Tables Creating a basic table

Common Table Layouts • Regular Layout • Simple • All columns are the same width • All rows are the same height • Irregular Layout • Position content in irregular ways • One row may span multiple columns • A column may span multiple rows

Regular Layout Example

Irregular Layout Example Irregular tables often blend images and text. Generally they don’t use borders.

Irregular Layout Example There is a table that defines the layout of this page – with rows and columns

HTML Table– Mandatory tags • <table>…</table> • Defines table object – should be the outermost • <tr>…</tr> • Defines table row – one set for each row • <td>…</td> • Defines table cell – one set for each cell. • Remember: Table contains rows, rows contain cells with data. • In HTML, table columns are not explicitly defined. You only define table cells – columns are implicit.

How are these tags placed? Table Row <table><tr> <td>…</td><td>…</td> </tr><tr> <td>…</td><td>…</td> </tr></table> Table Cell Table

Regular Table - Example <table> <tr> <th>Col-1</th><th>Col-2</th><th>Col-3</th><th>Col-4</th><th>Col-5</th> </tr> <tr> <td>This</td><td>is</td><td>a</td><td>regular</td><td>table</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> </table> See Regular Table Here

Regular Tables – more examples <table border="3"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> <table border="3"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table> <table border="3"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table>

CS3-TryThis2.htm – Try this….. Create a table like the one shown below. No need to worry about colors. The data is shown in the table below.

For next class (27/May/2010) • Irregular tables. • We will create a table with the content shown. • We will also try to understand how to format tables using CSS.

Stylizing Pages using CSS and Creating a table in XHTML