1. Cascading Style Sheets 23 rd March

2. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties Colour Properties Content Positioning

3. 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

4. RTE website with CSS stylesheet

5. RTE website without CSS stylesheet

6. What does this web page look like when rendered? DT228-1 2nd Semester Subjects C Programming Web Development DT228-1 2nd Semester Subjects C Programming Web Development

7. This is what it will look like. How would you like it to look?

8. Maybe, like this??

9. DT228-1 2nd Semester Subjects C Programming Web Development DT228-1 2nd Semester Subjects C Programming Web Development These are all style attributes

10. 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)

11. CSS Syntax There are 2 types of rules  at-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  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.

12. Using a Simple Style Sheet

13. 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 tag inside the tag  External CSS: Used to apply style to an entire website by saving the CSS code in it own external file and using the tag in the section  Import CSS: Works the same way as external CSS but uses the @import statement inside the tag  Attributes and tags: uses class and id attributes and and tags to allow fine control of style

14. Inline CSS Included (inlined) in an XHTML tag via the style attribute text goes here

15. Embedded CSS Included in the XHTML code of a web page via the tag … body {color: blue; background: #FFFF00} …

16. External CSS CSS code is stored in its own file that the XHTML code of any web page can reference and use …. ….

17. Import CSS A style sheet may be imported with the at-rule - @import ….. @import url("myStyle.css"); @import url("http://www.aa.bb.cc/dd.css"); body {color: blue; background: yellow} ….

18. Attributes & Tags Apply to all tags: @import url("myStyle.css"); @import url("http://www.aa.bb.cc/dd.css");.shine {color:blue; background:yellow} …. Hello World! …

19. Attributes & Tags Apply to individual tag: @import url("myStyle.css"); @import url("http://www.aa.bb.cc/dd.css"); p.flag {color:blue; font-weight:bold; font-size:16pt} …. Hello World! …

20. Attributes & Tags Using and : @import url("myStyle.css"); …. Hello World! … MyStyle.css ……. #greeting {color:blue; font-weight:bold}

21. Linking CSS to XHTML

22. 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

23. Font Properties Setting font properties is a very common activity Propertyfont-familyfont-stylefont-sizefont-weightfont-variantfont-stretch Purpose 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.

24. Text Properties CSS provides a rich set of text formatting properties Propertytext-aligntext-justifytext-align-lastMin(Max)-font-sizevertical-aligntext-indentline-breaktext-spacetext-wrapwhite-spacetext-spacing Values 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

25. Colour Properties CSS allows you to set colour properties PropertyColorBackgroundBackground-repeatOpacityColor-profileRendering-intent Purpose 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

26. 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}

27. 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