Cascading Style Sheets

Cascading Style Sheets WELCOME to the CSS session

Cascading Style Sheets Who Am I? Affan Javed Co-op Fall 2004 Web Quality Assurance Assistance WebOps – Library University of Waterloo CSS: • Syntax • Rules • Implementation • Properties • Tips

Cascading Style Sheets Applying CSS: There are three different ways to apply css to a web page. Inline Styles: Styles that are used as attributes within a tag. e.g. <p style="font-size: 90%;"> Internal (Embedded) Styles: Styles that are written within the <head> tag of a web page. External Styles: Styles that are contained in a file external to the web page, specified by a path.

Cascading Style Sheets Syntax: selector { property: value;} selector: Default selectors: h1, p, a, img, … Defined selectors: content, footer, …

Cascading Style Sheets Defined selectors: 2 types of defined selectors. • class class is used to identify more than one element. A class selector is a name preceded by a full stop(.) e.g. .indent • id id is used to identify only one element. An id selector is a name preceded by a hash character(#) e.g. #main

Cascading Style Sheets Nesting: Nesting is a method in which you can specify properties to selectors within other selectors. e.g. the simple html document is itself an example of nesting because <head> & <body> tags are nested within <html> tag. If I want font size to be smaller in paragraphs only in the main area I would write it as: #main p {font-size: 90%;}

Cascading Style Sheets Grouping: Grouping is a process in which the same properties are applied to a number of selectors separated by commas. e.g. p { padding: 2px;} h1 { padding: 2px;} .top { padding: 2px;} can be written as p, h1, .top { padding: 2px;}

Cascading Style Sheets Comments: /* [comment #1] */ p { color: red; /* [comment #2] */ font: Arial 90%; } Source Formatting: Macromedia Dreamweaver

Cascading Style Sheets Defined Regions: 2 commonly used defined regions: • div A block element. [starts on a new line with top & bottom spacing] • span An inline element. [starts in same line with no spacing]

Cascading Style Sheets

Cascading Style Sheets Shorthand for color: CSS provides 16,777,216 (256^3) colours. Only 16 colours are pre-defined: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Different ways: red = rgb(255,0,0) = rgb(100%,0%,0%) = #FF0000 = #F00 The shorthand is to write 6-digit colour in 3- digit version. e.g. #FF6655 = #F65

Cascading Style Sheets Anchor pseudo-class: Unvisited link: a:link {color: #FF0000} Visited link: a:visited {color: #00FF00} Mouse over link: a:hover {color: #FF00FF} Selected link: a:active {color: #0000FF}

Cascading Style Sheets margin & padding: Note: margins, paddings & borders are not included in the width and height of a region. e.g. a region 200 x 200 px is declared with a padding of 2px on each side. Thus, the total region would be 204 x 204 px. Different ways of declaring margin and padding: (top right bottom left) • padding: 10px; means the padding will be 10px on all four sides • padding: 10px 2px; means top and bottom padding will be 10px & left and right padding will be 2px

Cascading Style Sheets margin & padding: • padding: 10px 2px 15px; means top padding will be 10px, left and right padding will be 2px & bottom padding will be 15px • padding: 10px 2px 15px 20px; means top padding will be 10px, right padding will be 2px, bottom padding will be 15px & left padding will be 20px

Cascading Style Sheets border: Shorthand Property: border-width border-style border-color;

Cascading Style Sheets http://www.lib.uwaterloo.ca/staff/co-op/tutorial/ Questions?

Cascading Style Sheets THANKS for attending the session

Cascading Style Sheets