1 / 16

CSS

CSS. Cascading Style Sheets (CSS). Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list. Background. HTML was intended to deliver data/text content. Attributes & formatting elements make site maintenance unorderly.

anise
Download Presentation

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. CSS Cascading Style Sheets (CSS) Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list

  2. Background • HTML was intended to deliver data/text content. • Attributes & formatting elementsmake site maintenance unorderly. • Solution: separate web-content from page-formatting Cascading Style Sheet (e.g. <font>) Reference : http://www.howtocreate.co.uk/tutorials/css/introduction

  3. Cascading Style Sheet selector1 { property : value } selector2 { property1: value1; property2: value2 }

  4. Cascading Style Sheet Types of selectorsAffected elements • type (tags)p {. .}table, ul {. .} • class.headings {. .} • id#contentarea {. .} • combinationsp.para2 {. . . }table td .bluecell {. .}#contentarea p {. .} • pseudo-class selectors <p> </p><table> </table><ul> </ul> <xx class="headings">…</xx> <div id=“contentarea">…</div>

  5. Cascading Style Sheet Where to add styles? • External stylesheets<link rel="stylesheet" type="text/css" href="css/global.css"> • Embedded/internal stylesheetbetween <style> . . </style> tag • Inline stylesstyle attribute<p style="text-align:center">

  6. Cascading Style Sheet • Cascading effect of multiple stylesheets; • Overriding order; • Inheritance;

  7. style1.css p {text-align: center;} style2.css p {color: red;} Cascading Style Sheet Cascading effect:CSS properties can accumulate or add-up. This paragraph is centre-aligned and in red

  8. Cascading Style Sheet Overriding order:- which style wins? • A tag selector is worth 1 point. • A class selector is worth 10 points. • An ID selector is worth 100 points. • An inline style is worth 1000 points

  9. Cascading Style Sheet Overriding order:- which style wins?

  10. Cascading Style Sheet Overriding order:- which style wins? Tiebreaker : Last style wins p a.email { color: blue; } p.byline a { color: red; } <p class="byline">Written by<a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> <p class="byline">Written by<a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p>

  11. Cascading Style Sheet UL LI InheritanceCSS properties applied to one tag are passed on to nested tags. <li> tag inherits styles from <ul> (the parent tag) where applicable, unless re-styled explicitly otherwise.

  12. Cascading Style Sheet List of properties and values http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm

  13. Cascading Style Sheet HTML elements : inline or block? The BOX model – width, margin, border, padding

  14. Cascading Style Sheet CSS positioning • Positioning types: • Normal (relative) • Float • Absolute http://www.brainjar.com/css/positioning/

  15. Cascading Style Sheet CSS positioning • Positioning types: • Normal (relative) • Float • Absolute http://www.brainjar.com/css/positioning/

  16. Albert Einstein #rightbar 180px Assignment einstein.html

More Related