Cascading Style Sheets

Cascading Style Cascading Style SheetsSheets

26th March

Introduction

1. CSS types

2. Pseudoclasses and pseudoelements

3. Other considerations

4. Worked example

Reminder:Reminder:

Inline Affects individual HTML tag

<html>...

<body>...<p style=“font-family: Arial, sans-serif; ”>some text</p>

</body></html>

Reminder: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: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: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 What is wrong with the following pieces of code?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 Use inline CSS to style this pagethis page

Use embedded CSS to style Use embedded CSS to style this pagethis page

Order of PrecedenceOrder of Precedence

1. HTML formatting instructions (e.g. <font> tags)

2. Inline styles

3. Embedded styles

4. Linked styles

5. Imported styles

6. Default browser styles

Types of CSS stylesTypes 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 PseudoclassesUsing 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 PseudoclassesUsing Pseudoclasses

PseudoclassPseudoclass MatchMatch

:link

:visited

:active

:hover

:focus

Unvisited links

Visited links

Active links

The link that the browser pointer is hovering overThe link that currently has the user interface focus

Using PseudoclassesUsing Pseudoclassesa: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 <a> tag is used, the attributes defined in the style sheet are automatically used

Using PseudoelementsUsing 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><head><title></title><title></title><style<style type= type="text/css">"text/css">

p:first-line {text-decoration:p:first-line {text-decoration: underline underline}}</style></style></head></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 Other Text Considerations in CSSin CSSLetter & word spacing


.normal {letter-spacing: normal; }.normal {letter-spacing: normal; } .tight {letter-spacing: -.2em; }.tight {letter-spacing: -.2em; }

.loose {letter-spacing: .2em; }.loose {letter-spacing: .2em; } </style></style></head></head><body><body>

<p class=“normal”>…………</p><p class=“normal”>…………</p>…………</body></body>

Other Text Considerations Other Text Considerations in CSSin CSSCapitalisation The text-transform property can be used to force

capitalisation on elements

h1, h2, h3, h4, h5, h6 {text-transform:h1, h2, h3, h4, h5, h6 {text-transform: capitalize capitalize}}

Colours & BackgroundsColours & Backgrounds

Including Background Images


p {background-image:p {background-image: url(“gradient.gif”); url(“gradient.gif”);}}</style></style></head></head>

Tables & CSSTables & 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 { border: outset 1pt;}table.attrib-similar td { border: outset 1pt;}table.attrib-similar td { border: outset 1pt;}

</style></style></head></head><body><body>

……<table class=“attrib-similar”><table class=“attrib-similar”>……

</body> </body>

Example from Zeid Example from Zeid (Chapter 16)(Chapter 16)

(style)(style)ceol.cssceol.css

(content)(content)seannos.htmlseannos.html

Web-siteWeb-site

CSS ExampleCSS Example

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

External CSSExternal CSS

Ceol.css Explained Part ICeol.css Explained Part Ibodybody{{

text-align:center;text-align:center;}}.titleimg .titleimg { {

background: url('titleimg.jpg') no-repeat;background: url('titleimg.jpg') no-repeat;width:770px; height:110px; background-repeat:no-repeatwidth:770px; height:110px; background-repeat:no-repeat

}}.menulinks.menulinks{{

font-family: Tahoma;font-family: Tahoma;font-size: 10pt;font-size: 10pt;text-align: center;text-align: center;

}}.mainbody.mainbody{{

width:770px;width:770px;}}

All text in the body will be centre-alignedAll text in the body will be centre-aligned

Class defined for inserting image used at the top Class defined for inserting image used at the top of the webpage. Only used once.of the webpage. Only used once.

Class defined for the horizontal menu items under Class defined for the horizontal menu items under the title imagethe title image

Class defined for the main text areaClass defined for the main text area

Ceol.css Explained Part IICeol.css Explained Part IIh1h1{{

font-family: Tahoma;font-family: Tahoma;font-style:bold;font-style:bold;font-size: 10pt;font-size: 10pt;text-align: left;text-align: left;

}}a:linka:link{{

font-family: Tahoma;font-family: Tahoma;……....

}}a:visiteda:visited{{

font-family: Tahoma;font-family: Tahoma;……....

}}

All text in <h1> tags will have the following All text in <h1> tags will have the following attributesattributes

A link will automatically have the following characteristicsA link will automatically have the following characteristics

If a link has been visited already it will take on the If a link has been visited already it will take on the following characteristicsfollowing characteristics

Seannos.html Part ISeannos.html Part I<body><body>

<div class="titleimg"><div class="titleimg"></div></div><div class="menulinks"><div class="menulinks">

<a href="http://www.google.com">HOME</a> | ……<a href="http://www.google.com">HOME</a> | ……</div></div><div class="mainbody"><div class="mainbody">

<div class="leftcolumn"><div class="leftcolumn">The Living Tradition<br/>The Living Tradition<br/>PO Box 1026<br/>PO Box 1026<br/>……....<a<a href="http://www.google.com">Articles Index</a><br/> href="http://www.google.com">Articles Index</a><br/>……....<a href="http://www.google.com">Newletter</a><br/><a href="http://www.google.com">Newletter</a><br/>……....<p><p>....

</div></div>

Seannos.html Part IISeannos.html Part II<body><body>

……..<div class="middlecolumn"><div class="middlecolumn">

<h1><h1> Sean-nos singing - A Bluffers Guide</h1> Sean-nos singing - A Bluffers Guide</h1><p>- by Anthony McCann Issue 24 June/July '98</p><p>- by Anthony McCann Issue 24 June/July '98</p><p><p>One of the Irish papers once told of how, while on a lecture One of the Irish papers once told of how, while on a lecture tour, ..</p>tour, ..</p>

</div></div><<div class="rightcolumn">div class="rightcolumn">

<div class="img1"><div class="img1"></div></div><div class="img2"><div class="img2"></div></div><<div class="img3">div class="img3"></div></div>

</div></div></div></div></body></body>

ExerciseExercise

Write a web page to print 1 line of bold, blue text using:

Inline CSS Embedded CSS External CSS

ExerciseExercise

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>

ExerciseExercise

External

<head>…..

<link rel="stylesheet" type="text/css" href="cssFile.css"/>

….</head>

body {color: blue; font-weight: bold} CSS FileCSS File

HTML FileHTML File

Reference 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

Documents

Transcript of Cascading Style Sheets