Cascading Style Sheets 26 th March
Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example
Reminder: Inline Affects individual HTML tag some text
Reminder: Embedded Affects individual document... p {font-family: Arial, sans-serif;}... some text
Reminder: Separate text file (.css) e.g. styles.css p { font-family: Arial, Sans-serif; } some text
Reminder: Imported Into HTML url(“styles.css”); Into another style sheet instruction must be first line of url(“styles.css”); /*other stylesheet starts here*/ h1 { font-size: 200%; color: #6b84b5 }
What is wrong with the following pieces of code? 1. p{text-align:center;} 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 1. HTML formatting instructions (e.g. tags) 2. Inline styles 3. Embedded styles 4. Linked styles 5. Imported styles 6. 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: … Headline a summary some text …
ID Selector styles CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} HTML … Headline Summary Conclusion …
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
Using Pseudoclasses PseudoclassMatch :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 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; } This definition is in the separate CSS file. Every time a tag is used, the attributes defined in the style sheet are automatically used
Using Pseudoelements Pseudoelements** are another virtual construct to help apply styles dynamically to elements within a document, e.g., :first-line, :first-letter Whenever is used, the first line of the paragraph will be automatically underlined p:first-line {text-decoration: underline} p:first-line {text-decoration: underline} **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.normal {letter-spacing: normal; }.normal {letter-spacing: normal; }.tight {letter-spacing: -.2em; }.tight {letter-spacing: -.2em; }.loose {letter-spacing:.2em; } <body> ………… ………… ……</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 p {background-image: url(“gradient.gif”);} p {background-image: url(“gradient.gif”);}
Tables & CSS There are many CSS properties that can be used to control table attributes table td {padding:5x;} table td {padding:5x;} table.attrib-similar { border: outset 1pt;} table.attrib-similar td { border: outset 1pt;} <body>… …</body>
Example from Zeid (Chapter 16) (style)ceol.css(content)seannos.html Web-site
CSS Example seannos.html <html><head> Traditional Irish Music Traditional Irish Music </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{ …..} All text in 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> HOME | …… HOME | ……</div> The Living Tradition The Living Tradition PO Box 1026 PO Box 1026 ….. Articles Index Articles Index ….. Newletter Newletter …..<p>..</div>
Seannos.html Part II <body>…. Sean-nos singing - A Bluffers Guide Sean-nos singing - A Bluffers Guide - by Anthony McCann Issue 24 June/July '98 - by Anthony McCann Issue 24 June/July '98 <p> One of the Irish papers once told of how, while on a lecture tour,.. tour,.. </div> </div> </div> </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 text goes here Embedded ….. body {color: blue; font-weight: bold} ….
Exercise External ….. …. body {color: blue; font-weight: bold} CSS File HTML 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