1 / 15

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS). Cascading Style Sheets. Another method of separating content from format Allow precise positioning of elements Allow the application of consistent formats Can be overridden at the local level. HTML and Style Sheets. HTML file references the CSS file

davis-king
Download Presentation

Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets (CSS)

  2. Cascading Style Sheets • Another method of separating content from format • Allow precise positioning of elements • Allow the application of consistent formats • Can be overridden at the local level

  3. HTML and Style Sheets • HTML file references the CSS file • CSS file contains selectors and declarations • Multiple CSS files may be referenced • All CSS files are applied, only the most recent version of conflicts are applied

  4. CSS Selectors and Declarations • Selectors match to an HTML tag • Declaration lists the styles to be applied to the tag • All tags in the HTML document that match a selector will have the same style

  5. CSS Syntax • Tag {style : value; style : value…} H2{ color : #FF00FF; font-style : bold;}

  6. Applying CSS to a HTML Document • Must refer to the file in the <head> • Need to provide URL, type and rel attributes • Type will be text/css • Rel is usually stylesheet

  7. Rel Settings • Stylesheet • Preferred selection • Alternate • Allows multiple style sheets based on user need • Persistent • Applies style sheet regardless of other style settings

  8. Including CSS in HTML <link href=“style.css” rel=“stylesheet” type=“text/css”>

  9. Inline Style References • Applies style sheet declarations in individual elements • Against the spirit of separation of format and content <li style=“font-weight : bold;”>

  10. HTML Style Element • Insert CSS selectors and declarations inside the HTML document • No separation of content and format • Style tag requires the type attribute • Actual CSS text enclosed in a comment

  11. Example Style Element <style type=“text/css”> <!-- H2 {text-align : left} P {color : blue” --> </style>

  12. Using Div and Span Elements • Span element is used to enclose text • Div element is used to enclose text and tags • Applying a style to these elements will apply the style to everything contained in the tag

  13. CSS and Positioning • Screen is a grid of pixels • X dimension is the height • Y dimension is the width • Z dimension is stacking • (0,0) is upper left of screen • Measurements may be given in inches, mm or pixels

  14. Boxes • Each item is inside of a ‘box’ • Box is given x, y coordinates • Box is given width and height • Box is given flow property • HTML elements may be placed inside of this box

  15. Example Positioning BODY { height ; 10 in } #head{ position: absolute; Width: 100%; Height: 12%; Top: 0; Right: 0; Bottom: auto;}

More Related