Cascading Style Cascading Style SheetsSheets
23rd March
Cascading Style Sheets Cascading Style Sheets (CSS)(CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties Colour Properties Content Positioning
Introduction to CSSIntroduction to CSS
Content and formatting are 2 separate parts
The CSS concept separates content from presentation
CSS is used to define a style sheet separately and then it can be applied to any content on a web page
Editing content becomes easy and formatting becomes much more consistent
CSS has a powerful concept and is easy to use
RTE website RTE website withwith CSS CSS stylesheetstylesheet
RTE website RTE website withoutwithout CSS CSS stylesheetstylesheet
What does this web page What does this web page look like when rendered?look like when rendered?<?xml<?xml version= version="1.0""1.0" encoding= encoding="iso-8859-1"?>"iso-8859-1"?><!DOCTYPE<!DOCTYPE html PUBLIC html PUBLIC "-//W3C//DTD XHTML 1.1//EN""-//W3C//DTD XHTML 1.1//EN" ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"><html<html xmlns= xmlns=""http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtml">"><!-- Created on: 22/03/2009 --><!-- Created on: 22/03/2009 --><head><head><title></title><title></title></head></head><body><body><img<img src= src="dit.gif""dit.gif" height= height="100""100" width= width="100"/>"100"/><div><h1><div><h1>DT228-1 2nd Semester SubjectsDT228-1 2nd Semester Subjects</h1></div></h1></div> <div><ul><div><ul>
<li><li> C Programming C Programming</li></li><li><li> Web Development Web Development</li></li>
</ul></div></ul></div></body></body></html></html>
This is what it will look like. This is what it will look like. How would you like it to How would you like it to look?look?
Maybe, like this??Maybe, like this??
<?xml<?xml version= version="1.0""1.0" encoding= encoding="iso-8859-1"?>"iso-8859-1"?><!DOCTYPE<!DOCTYPE html PUBLIC html PUBLIC "-//W3C//DTD XHTML 1.1//EN""-//W3C//DTD XHTML 1.1//EN" ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"><html<html xmlns= xmlns=""http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtml">"><head><head><title></title><title></title></head></head><body<body style=style="background-color:"background-color: #FFFF99#FFFF99">"><center<center><img><img src= src="dit.gif""dit.gif" height= height="100""100" width= width="100"/>"100"/></center></center>
<center><center><div<div style=style="position:"position: absolute absolute;; top:top: 150150pxpx;; width:width: 100100%%;; height:height: 100100pxpx;; background-color:background-color: blue blue;">;"><h1><h1><font<font color= color="white">"white">DT228-1 2nd Semester SubjectsDT228-1 2nd Semester Subjects</font></font></h1></h1> </div></div></center></center> <center><center><div<div style=style="position:"position:absoluteabsolute;; top:250top:250pxpx;; width:100width:100%%;; height:100height:100pxpx;">;"><ul><ul>
<li><li> C Programming C Programming</li></li><li><li> Web Development Web Development</li></li>
</ul></div></ul></div></center></center></body></body></html></html>
These are all style attributesThese are all style attributes
CSS SyntaxCSS Syntax A rule is the fundamental syntactic unit of CSS
A CSS rule is a statement that follows a specific syntax
A CSS style sheet consists of a list of rules (statements)
CSS SyntaxCSS Syntax There are 2 types of rules
at-rulesat-rules: begin with an @ character followed by an identifier, the rule definition and terminated by a semi-colon. Example: @import “printPage.css”
rule-setsrule-sets: they set the style of XHTML tags by using property/value pairs. Example: h1, h2 {color:blue; font-weight:bold}
CSS syntax provides comment statements which begin ‘/*’ and end with ‘*/’
CSS also allows XHTML comments i.e. <!--…-->
Using a Simple Style Using a Simple Style SheetSheet
Linking CSS to XHTMLLinking CSS to XHTML
5 options for linking CSS to XHTML: Inline CSS: Used to apply style to one XHTML tag only using
the style attribute inside the tag Embedded CSS: Used to apply style to an entire web page
using the <style> tag inside the <head> tag External CSS: Used to apply style to an entire website by
saving the CSS code in it own external file and using the <link> tag in the <head> section
Import CSS: Works the same way as external CSS but uses the @import statement inside the <style> tag
Attributes and tags: uses class and id attributes and <span> and <div> tags to allow fine control of style
Inline CSSInline CSS
Included (inlined) in an XHTML tag via the style attribute
<b style="color:blue; font-size:16"> text goes here </b>
Embedded CSSEmbedded CSS
Included in the XHTML code of a web page via the <style> tag
<head>
…
<style type="text/css">body {color: blue; background: #FFFF00}</style>
…
<head>
External CSSExternal CSS
CSS code is stored in its own file that the XHTML code of any web page can reference and use
<head>
….
<link rel="stylesheet" type="text/css" href="cssFile.css"/>
….
</head>
Import CSSImport CSS
A style sheet may be imported with the at-rule - @import
<head>…..<style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");body {color: blue; background: yellow}</style>
….
</head>
Attributes & TagsAttributes & Tags Apply to all tags:
<head><title></title><style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");.shine {color:blue; background:yellow}</style>
</head><body>….<h1 class=“shine”> Hello World! </h1>…</body>
Attributes & TagsAttributes & Tags Apply to individual tag:
<head><title></title><style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");p.flag {color:blue; font-weight:bold; font-size:16pt}</style>
</head><body>….<p class=“flag”> Hello World! </p>…</body>
Attributes & TagsAttributes & Tags Using <div> and <span>:
<head><title></title><style type="text/css">@import url("myStyle.css");</style>
</head>
<body>
….
<div id=“greeting”> Hello World! </div>
…
</body>
MyStyle.cssMyStyle.css…….#greeting {color:blue; font-weight:bold}
Linking CSS to XHTMLLinking CSS to XHTML
Inheritance & Cascading Inheritance & Cascading OrderOrder CSS tags and selectors may be nested which gives rise to the inheritance
issue
The inheritance rule is simple and logical: children inherit from their parents, unless they override their parents’ style
When multiple style sheets are used, they cascade
Cascading order is used to resolve conflicts that arise out of cascading
The general rule is the last style sheet overrides the ones specified before them
Cascading order depends on other factors such as weight, specificity, use of special keywords, and browsers
Font PropertiesFont Properties Setting font properties is a very common activity
PropertyProperty
font-familyfont-family
font-stylefont-style
font-sizefont-size
font-weightfont-weight
font-variantfont-variant
font-stretchfont-stretch
PurposePurpose
Specifies text font such as arial, courier
Specify text style such as italic, normal
Specify text size such as 12, 16, 24
Specifies bold text using normal, bold, bolder, lighter, 100-900
Specifies small caps text using small caps
Specifies amount of text stretching horizontally using normal, wider, narrower, condensed, expanded, etc.
Text PropertiesText Properties CSS provides a rich set of text formatting properties
PropertyProperty
text-aligntext-aligntext-justifytext-justifytext-align-lasttext-align-lastMin(Max)-font-sizeMin(Max)-font-sizevertical-alignvertical-aligntext-indenttext-indentline-breakline-breaktext-spacetext-spacetext-wraptext-wrapwhite-spacewhite-spacetext-spacingtext-spacing
ValuesValues
Start, end, left, center, justifyAuto, inter-word, inter-ideograph, kashidaAuto, start, end, center, justify, size10pt, 20pt, etc;Auto, top, sub, super, central, middle, bottomLength, percentageNormal, strict(white space in text stream) normal, honorNormal, noneNormal, pre, nowrap(character spacing) normal, length
Colour PropertiesColour Properties CSS allows you to set colour properties
PropertyProperty
ColorColor
BackgroundBackground
Background-repeatBackground-repeat
OpacityOpacity
Color-profileColor-profile
Rendering-intentRendering-intent
PurposePurpose
Text colour: name, hex code, RGB signals
Background-colour: name, hex code, RGB
Tiling effect: repeat, repeat-x/y, no-repeat
Transparency: 0.0 fully transparent to 1.0
Colour model: RGB, sRGB, URL
Colour-profile: auto, perceptual saturation
Content Positioning Content Positioning (Reminder!)(Reminder!) CSS offers excellent control of placing web elements
position property allows you to do so
CSS uses the 2D coordinate system with origin on the top left corner
The position property takes 2 values – absolute or relative
Absolute positioning uses the origin as the reference point for all measurements
Relative positioning measures coordinates relative to the position of the last placed page element
Example: {position:absolute; top:20px; left:30px}
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