Cascading Style Cascading Style Sheets Sheets 23 rd March
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
- Slide 1
- Cascading Style Sheets 23 rd March
- Slide 2
- Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties Colour Properties Content Positioning
- Slide 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
- Slide 4
- RTE website with CSS stylesheet
- Slide 5
- RTE website without CSS stylesheet
- Slide 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
- Slide 7
- This is what it will look like. How would you like it to look?
- Slide 8
- Maybe, like this??
- Slide 9
- DT228-1 2nd Semester Subjects C Programming Web Development DT228-1 2nd Semester Subjects C Programming Web Development These are all style attributes
- Slide 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)
- Slide 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.
- Slide 12
- Using a Simple Style Sheet
- Slide 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
- Slide 14
- Inline CSS Included (inlined) in an XHTML tag via the style attribute text goes here
- Slide 15
- Embedded CSS Included in the XHTML code of a web page via the tag body {color: blue; background: #FFFF00}
- Slide 16
- External CSS CSS code is stored in its own file that the XHTML code of any web page can reference and use . .
- Slide 17
- Slide 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!
- Slide 19
- Slide 20
- Attributes & Tags Using and : @import url("myStyle.css"); . Hello World! MyStyle.css . #greeting {color:blue; font-weight:bold}
- Slide 21
- Linking CSS to XHTML
- Slide 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
- Slide 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.
- Slide 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
- Slide 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
- Slide 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}
- Slide 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
Related Documents
