Cascading Style Sheets 26 th March. Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example.

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 file... @import url(“styles.css”); 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. p{text-align:center;} 2. 3. 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

Cascading Style Sheets 26 th March. Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example.

Similar presentations

Presentation on theme: "Cascading Style Sheets 26 th March. Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Cascading Style Sheets 26 th March. Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example.

Similar presentations

Presentation on theme: "Cascading Style Sheets 26 th March. Introduction 1. CSS types 2. Pseudoclasses and pseudoelements 3. Other considerations 4. Worked example."— Presentation transcript:

Similar presentations

About project

Feedback