Post on 23-Jan-2016
description
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
<head><head><title></title><title></title><style<style type= type="text/css">"text/css">
.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
<head><head><title></title><title></title><style<style type= type="text/css">"text/css">
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
<head><head><title></title><title></title><style<style type= type="text/css">"text/css">
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