Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Cascading Style Sheets 23rd March Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties Colour Properties Content Positioning Introduction 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 with CSS stylesheet RTE website without CSS stylesheet What does this web page look like when rendered? <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 22/03/2009 --> <head> <title></title> </head> <body> <img src="dit.gif" height="100" width="100"/> <div><h1>DT228-1 2nd Semester Subjects</h1></div> <div><ul> <li> C Programming</li> <li> Web Development</li> </ul></div> </body> </html> This is what it will look like. How would you like it to look? Maybe, like this?? <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color: #FFFF99"> <center><img src="dit.gif" height="100" width="100"/></center> <center><div style="position: absolute; top: 150px; width: 100%; height: 100px; background-color: blue;"> <h1><font color="white">DT228-1 2nd Semester Subjects</font></h1> </div></center> <center><div style="position:absolute; top:250px; width:100%; height:100px;"><ul> <li> C Programming</li> <li> Web Development</li> </ul></div></center> </body> </html> These are all style attributes CSS 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 Syntax There are 2 types of rules at-rules: begin with an @ character followed by an identifier, the rule definition and terminated by a semi-colon. Example: @import “printPage.css” rule-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 Sheet Linking 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 CSS Included (inlined) in an XHTML tag via the style attribute <b style="color:blue; font-size:16"> text goes here </b> Embedded 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 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 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 & 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 & 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 & Tags Using <div> and <span>: MyStyle.css ……. #greeting {color:blue; font-weight:bold} <head> <title></title> <style type="text/css"> @import url("myStyle.css"); </style> </head> <body> …. <div id=“greeting”> Hello World! </div> … </body> Linking CSS to XHTML Inheritance & Cascading Order 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 Properties Setting font properties is a very common activity Property Purpose font-family Specifies text font such as arial, courier font-style Specify text style such as italic, normal font-size Specify text size such as 12, 16, 24 font-weight Specifies bold text using normal, bold, bolder, lighter, 100-900 font-variant Specifies small caps text using small caps font-stretch Specifies amount of text stretching horizontally using normal, wider, narrower, condensed, expanded, etc. Text Properties CSS provides a rich set of text formatting properties Property Values text-align text-justify text-align-last Min(Max)-font-size vertical-align text-indent line-break text-space text-wrap white-space text-spacing Start, end, left, center, justify Auto, inter-word, inter-ideograph, kashida Auto, start, end, center, justify, size 10pt, 20pt, etc; Auto, top, sub, super, central, middle, bottom Length, percentage Normal, strict (white space in text stream) normal, honor Normal, none Normal, pre, nowrap (character spacing) normal, length Colour Properties CSS allows you to set colour properties Property Purpose Color Text colour: name, hex code, RGB signals Background Background-colour: name, hex code, RGB Background-repeat Tiling effect: repeat, repeat-x/y, no-repeat Opacity Transparency: 0.0 fully transparent to 1.0 Color-profile Colour model: RGB, sRGB, URL Rendering-intent Colour-profile: auto, perceptual saturation Content Positioning (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 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