Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Cascstylesheets Cascstylesheets Presentation Transcript

  • Cascading Style Sheets
  • Cascading Style Sheets (CSS)
    • CSS Syntax
    • Linking CSS to XHTML
    • Inheritance & Cascading Order
    • The Box Model
    • Font Properties
    • Text Properties
    • Colour Properties
    • Content Positioning
  • Introduction to CSS
    • Document content and content 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 any number of web pages
    • Editing content becomes easy and formatting becomes much more consistent
    • CSS authoring tools are either stand alone editors or html editors
  • CSS Syntax
    • A CSS style sheet consists of a list of rules (statements)
    • A CSS rule is a fundamental statement that follows a specific syntax
      • selector {property: value}
        • body {color: black}
        • p { text-align: center; color: black; font-family: "sans serif" }
  • CSS Syntax
    • There are 2 types of CSS 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, h3 {color:blue; font-weight:bold}
    • CSS syntax provides comment statements which begin ‘/*’ and end with ‘*/’
    • CSS also allows XHTML comments i.e. <!--…-->
  • 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 its 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
  • Using a Simple Style Sheet
  • Inline CSS
    • Included (inlined) in an XHTML tag via the style attribute
    • <b style= &quot;color: blue ; font-size:16&quot;> text goes here </b>
  • Embedded CSS
    • Included in the XHTML code of a web page via the <style> tag
    • <head>
    • <style type= &quot;text/css&quot;> body {color: blue ; background: #FFFF00} a:link {color: green }
    • a:visited {color: yellow }
    • a:hover {color: black }
    • a:active {color: blue }
    • </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= &quot;stylesheet&quot; type= &quot;text/css&quot; href= &quot;cssFile.css&quot;/>
    • … .
    • </head>
  • Import CSS
    • A style sheet may be imported with the at-rule - @import
    • <head> ….. <style type= &quot;text/css&quot;> @import url( &quot;myStyle.css&quot; ); @import url( &quot; &quot; ); body {color: blue ; background: yellow } </style>
    • … .
    • </head>
  • Class Selectors
    • Apply to individual tag:
    • <head> <title></title> <style type= &quot;text/css&quot;> @import url( &quot;myStyle.css&quot; ); @import url( &quot; &quot; ); p.flag {color: blue ; font-weight:bold; font-size:16pt} </style>
    • </head>
    • <body>
    • … .
    • <p class=“flag”> Hello World! </p>
    • </body>
  • Class Selectors
    • Apply to all tags:
    • <head> <title></title> <style type= &quot;text/css&quot;> @import url( &quot;myStyle.css&quot; ); @import url( &quot; &quot; ); .shine {color: blue ; background: yellow } </style>
    • </head>
    • <body>
    • … .
    • <h1 class=“shine”> Hello World! </h1>
    • <p class=“shine”> how’s it goin eh? </p>
    • </body>
  • Attributes & Tags
    • Using <div> and <span>: e.g. for formatting layers
    • <head> <title></title> <style type= &quot;text/css&quot;> @import url( &quot;myStyle.css&quot; ); </style>
    • </head>
    • <body>
    • … .
    • <div id=“greeting”> Hello World! </div>
    • </body>
    MyStyle.css …… . #greeting {color:blue; font-weight:bold}
  • 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 can depend on other factors such as weight, specificity, use of special keywords, and browsers
  • Box Model
    • CSS uses box-oriented formatting
    • Each formatted content results in a rectangular box inside a core box
    • Each box has content , padding , border , and margin
  • Font Properties
    • Setting font properties is a very common activity
    Property font-family font-style font-size font-weight font-variant font-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.
  • Text Properties
    • CSS provides a rich set of text formatting properties
    Property 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 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
  • Colour Properties
    • CSS allows you to set colour properties
    Property Color Background Background-repeat Opacity Color-profile Rendering-intent Purpose Text color: name, hex code, RGB signals Background-color: name, hex code, RGB Tiling effect: repeat, repeat-x/y, no-repeat Transparency: 0.0 fully transparent to 1.0 Color model: RGB, sRGB, URL Color-profile: auto, perceptual saturation
  • Content Positioning
    • 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