CSS

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

CSS & Designing for the web : 

CSS & Designing for the web

Readings and References : 

Readings and References CSS Wikipedia http://en.wikipedia.org/wiki/Cascading_Style_Sheets W3 http://www.w3.org/Style/CSS/learning SACG http://depts.washington.edu/sacg/services/workshops/web/css/index.shtml Useit (Jacob Nielsen) http://www.useit.com/alertbox/9707a.html

Introduction : 

7/26/2009 Introduction CSS stands for “Cascading Style Sheets” consists of rules (styles) for how HTML elements should behave Styles define how to display HTML elements Styles are normally stored in Style Sheets Style sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple styles will cascade into one The cascading concept for style sheets refers to the precedence of (in increasing importance) external, internal, and inline styles.

Basic CSS Syntax : 

7/26/2009 Basic CSS Syntax The CSS syntax is made up of three parts: selector {property: value} Examples: Basic syntax: body {color: black} Multiple-word value: p {font-family: "sans serif"} Multiple properties: h2 {font-size: 12pt; font-style: italic; color: red} Grouping: h1,h2,h3,h4,h5,h6 { color: green } Selector = HTML element/tag Property = Attribute Value = Value

Basic CSS Syntax : 

7/26/2009 Basic CSS Syntax The class selector define different styles for the same type of HTML element only one class attribute can be specified per HTML element the tag name in the selector can be omitted when defining a style that will be used by all HTML elements that have a certain class Examples: p.right {text-align: right} p.center {text-align: center} <p class="right"> text </p> .center {text-align: center} <h2 class="center"> Heading2</h2> <p class="center"> text </p>

Basic CSS Syntax : 

7/26/2009 Basic CSS Syntax The ID selector define the same style for different types of HTML element only one of each ID in a single Web page Examples: Comments /* This is a CSS comment */ #style1{text-align: center; color: green} <p id=“style1”> centered, green </p> <h1 id=“style1”> also centered green </h1>

Where does CSS go? : 

7/26/2009 Where does CSS go? There are really three ways of doing it: The Master-Page-Has-All-Rules Way. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. The One-Page-Has-Its-Own-Style Way. An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag The Just-Do-It-This-One-Time Way. An inline style should be used when a style is to be applied to a single occurrence of an element

External Style Sheet : 

7/26/2009 External Style Sheet There are four main parts to the syntax for external style sheet: link - This HTML tag tells the browser that is linked to the current page rel="stylesheet" - This code tells the browser that what is linked is a stylesheet href="location/filename.css" - This location is where the browser will find the stylesheet type="text/css" - Because the linked style sheet has an extension of .css, this code tells the browser that what its reading is text that contains CSS rules <head> <link rel="stylesheet" href="mystylesheet.css" type="text/css"> </head>

Internal Style Sheet : 

7/26/2009 Internal Style Sheet To define internal styles, simply use the HTML style element in the head section To prevent an old browser from displaying the content, hide it in the HTML comment element <head> <style type="text/css"> <--hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>

Inline Style : 

7/26/2009 Inline Style Define a style directly within an HTML tag The rule overrides any other rules that try to affect the element (Cascading) <body>  <p style="background-color: red;">The background of this text would be red</p></body>

Cascade : 

7/26/2009 Cascade Multiple Styles Will Cascade Into One Cascading Order When there is more than one style specified for an HTML element, all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority: Browser default External Style Sheet Internal Style Sheet (inside the <head> tag) Inline Style (inside HTML element)

authorStream Live Help