Cascading Style Sheets

Cascading Style Sheets 26th March

Introduction • CSS types • Pseudoclasses and pseudoelements • Other considerations • Worked example

Reminder: • Inline • Affects individual HTML tag <html> ... <body> ... <p style=“font-family: Arial, sans- serif; ”>some text</p> </body> </html>

Reminder: • Embedded • Affects individual document <html> <head> ... <style type=“text/css”> p {font-family: Arial, sans-serif;} </style></head> <body> ... <p>some text</p> </body> </html>

Reminder: • Separate text file (.css) • e.g. styles.css p { font-family: Arial, Sans-serif; } <html> <head> ... <link href=“styles.css” rel=“stylesheet” type=“text/css” /> </head> <body> ... <p>some text</p> </body> </html>

Reminder: • Imported Into HTML file <head> ... <style type=“text/css”> @import url(“styles.css”); </style> </head> Into another style sheet - @import instruction must be first line of file! @import url(“styles.css”); /*other stylesheet starts here*/ h1 { font-size: 200%; color: #6b84b5 }

What is wrong with the following pieces of code? 1.<body> p{text-align:center;} 2. <p{font-size:14;}> </p> 3. <head> p{text-align:center;} 4. h1{text-spacing=“normal”;}

Use inline CSS to style this page

Use embedded CSS to style this page

Order of Precedence • HTML formatting instructions (e.g. <font> tags) • Inline styles • Embedded styles • Linked styles • Imported styles • Default browser styles

Types of CSS styles • Styles assigned to a HTML element • Class selector styles • Define different styles for one or more HTML elements • Assigned to the class attribute within an HTML element • ID selector styles • Define different styles for one and the same HTML element • Assigned to the ID attribute within an HTML element

Class Selector Styles • CSS: … .blue {color: #082984} .red {color: #de2131} • HTML: … <h1 class=“red”>Headline</h1> <p class=“red”>a summary</p> <p class=“blue”>some text</p> …

ID Selector styles • CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} • HTML … <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p> …

What is the Difference between class & id? The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. If you have a style that you want to apply several times throughout the document, you need to use a Class. However, it if only want to apply the style once (for instance, to position a particular element, such as a banner) you should use the ID.

Using Pseudoclasses • Pseudoclasses are identifiers that are understood by user agents and apply to elements of certain types without the elements having to be explicitly styled • Example: A handful of pseudoclasses can be used with anchor elements <a>

Using Pseudoclasses Pseudoclass Match :link :visited :active :hover :focus Unvisited links Visited links Active links The link that the browser pointer is hovering over The link that currently has the user interface focus

Using Pseudoclasses This definition is in the separate CSS file. Every time a <a> tag is used, the attributes defined in the style sheet are automatically used a:link { font-family: Tahoma; color:black; font-size: 10pt; text-decoration:none; } a:visited { font-family: Tahoma; color:black; font-size: 10pt; text-decoration:none; }

Using Pseudoelements • Pseudoelements** are another virtual construct to help apply styles dynamically to elements within a document, e.g., :first-line, :first-letter • Whenever <p> is used, the first line of the paragraph will be automatically underlined <head><title></title><style type="text/css">p:first-line {text-decoration: underline}</style></head> **Pseudo classes are very similar to pseudo elements, but pseudo classes apply the styling rules to the element depending on some state.

Other Text Considerations in CSS Letter & word spacing <head><title></title><style type="text/css">.normal {letter-spacing: normal; } .tight {letter-spacing: -.2em; } .loose {letter-spacing: .2em; } </style></head> <body> <p class=“normal”>…………</p> …… </body>

Other Text Considerations in CSS Capitalisation • The text-transform property can be used to force capitalisation on elements h1, h2, h3, h4, h5, h6 {text-transform: capitalize}

Colours & Backgrounds Including Background Images <head><title></title><style type="text/css">p {background-image: url(“gradient.gif”);}</style></head>

Tables & CSS • There are many CSS properties that can be used to control table attributes <head><title></title><style type="text/css">table td {padding:5x;} table.attrib-similar { border: outset 1pt;} table.attrib-similar td { border: outset 1pt;} </style></head> <body> … <table class=“attrib-similar”> … </body>

Example from Zeid (Chapter 16) (style) ceol.css (content) seannos.html Web-site

CSS Example seannos.html <html> <head> <title>Traditional Irish Music</title> <link href="ceol.css" rel="stylesheet" type="text/css"> </head> …… External CSS

Ceol.css Explained Part I body { text-align:center; } .titleimg { background: url('titleimg.jpg') no-repeat; width:770px; height:110px; background-repeat:no-repeat } .menulinks { font-family: Tahoma; font-size: 10pt; text-align: center; } .mainbody { width:770px; } All text in the body will be centre-aligned Class defined for inserting image used at the top of the webpage. Only used once. Class defined for the horizontal menu items under the title image Class defined for the main text area

Ceol.css Explained Part II h1 { font-family: Tahoma; font-style:bold; font-size: 10pt; text-align: left; } a:link { font-family: Tahoma; ….. } a:visited { font-family: Tahoma; ….. } All text in <h1> tags will have the following attributes A link will automatically have the following characteristics If a link has been visited already it will take on the following characteristics

Seannos.html Part I <body> <div class="titleimg"> </div> <div class="menulinks"> <a href="http://www.google.com">HOME</a> | …… </div> <div class="mainbody"> <div class="leftcolumn"> The Living Tradition<br/> PO Box 1026<br/> ….. <a href="http://www.google.com">Articles Index</a><br/> ….. <a href="http://www.google.com">Newletter</a><br/> ….. <p> .. </div>

Seannos.html Part II <body> …. <div class="middlecolumn"> <h1> Sean-nos singing - A Bluffers Guide</h1> <p>- by Anthony McCann Issue 24 June/July '98</p> <p> One of the Irish papers once told of how, while on a lecture tour, ..</p> </div> <div class="rightcolumn"> <div class="img1"> </div> <div class="img2"> </div> <div class="img3"> </div> </div> </div> </body>

Exercise • Write a web page to print 1 line of bold, blue text using: • Inline CSS • Embedded CSS • External CSS

Exercise • Inline <b style="color:blue;font-size:16"> text goes here </b> • Embedded <head>….. <style type="text/css“>body {color: blue;font-weight:bold}</style> ….</head>

Exercise • External <head>….. <link rel="stylesheet" type="text/css" href="cssFile.css"/> ….</head> body {color: blue;font-weight:bold} HTML File CSS File

Reference • Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. • Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. • Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript

Cascading Style Sheets