Chapter 5 CSS : Cascading Style Sheets

© 2010, Robert K. Moniot

1

OBJECTIVES In this chapter, p , you y will learn: • How to control document appearance with style sheets: – Specifying font, size, color, etc. of text – Specifying element backgrounds and colors – Controlling text flow, margins, borders, and padding

• How to make web pages share style sheets for uniform look. • How to use the class attribute to apply styles to d document t elements l t according di tto th their i ffunction. ti • How to use pseudo-classes to allow element styles to respond to dynamic events. © 2010, Robert K. Moniot

2

Style Sheets • Each element on a page has a style defined for it. it • The style is defined by a set of attribute : value p pairs. • Style attributes can control: – – – –

Typeface and font properties B k Background d properties ti Box-related properties List properties

© 2010, Robert K. Moniot

3

Ways to define styles • Default style: y p provides values for all element p properties, p unless you change it. (Note: user can customize browser to change defaults!) • Inline style: style is defined as an attribute of the element in-place. Use this for “one-off” or special styles. • Embedded style sheet: styles defined in the head portion of web page page. Use this if you don’t don t have very many web pages, or for styles that are useful only for the given page. • External E t l style t l sheet: h t styles t l defined d fi d iin a separate t fil file. Use this to centralize style definitions and provide uniformity across all pages of a web site. © 2010, Robert K. Moniot

4

Embedded Style Sheet Page with embedded style / selector { attribute : value ; attribute : value ... } selector { attribute : value ; attribute : value ... } ... •Style definitions go into a element in document head. •Selector Selector determines what elements the ... style rule applies to. •Style definitions separated by ; are enclosed in { } © 2010, Robert K. Moniot

5

Embedded Style Sheet (cont’d) (cont d) Page with embedded style selector { attribute : value ; attribute : value ... } selector { attribute : value ; attribute : value ... } ... y •The type attribute can only be "text/css". •Note: CSS is not HTML! ... / © 2010, Robert K. Moniot

6

Example p E Example l page with ith embedded b dd d style t l body { font-family : sans-serif; color : blue; background-color : yellow } h1 { font-style : italic } p { font-size font size : 14pt } ol { font-size : 12pt; color : red; font-family : serif } Here the selectors are simply tag names. The ... style rules will apply to elements defined by those tags. Result (Example 1) © 2010, Robert K. Moniot

7

On-Line On Line References There are many, y, manyy style y properties. p p These slides only y show a few. Your text shows more. For a complete list, plus examples, consult one of these references: • w3.org 3 – the th World-Wide W ld Wid W Web bC Consortium: ti th the official ffi i l standard • w3schools.com – a commercial site, but free access, includes tutorials

© 2010, Robert K. Moniot

8

Length Units • Relative lengths g ((depend p on screen resolution and/or local text size) – – – –

px = pixels em = (originally) width of letter M ex = (originally) height of letter x, roughly ½ an em % = percentage of the default font size or window size

• Absolute lengths (rendered as closely as possible) – – – – –

in = inches cm = centimeters mm = millimeters pt = points = 1/72 in pc = picas i = 12 ptt = 1/6 iin © 2010, Robert K. Moniot

9

Inheritance • A descendant is an element that is enclosed (nested) in another its ancestor. another, ancestor (If it is an immediate descendant, descendant it is a child of the enclosing element, its parent. Elements having the same parent are siblings.) • All descendants of an element inherit its style properties, unless these are overridden by their own style rules.

© 2010, Robert K. Moniot

10

Precedence Rules • User-defined styles y (preferences) (p ) take p precedence over browser defaults. • Styles defined by web page author take precedence over user preferences. f • Styles defined by child element take precedence over styles inherited from parent. • If two styles could apply to the same element, the one defined by the more specific rule will be used. For i t instance, an explicit li it rule l iis always l more specific ifi th than an inherited rule.

© 2010, Robert K. Moniot

11

Compound Selectors • Selectors can be defined so that a style y rule applies pp to an element only when it is a descendant of a certain other type of element. Examples: ul ul { list-style-type : square } This specifies that an unordered list inside another unordered list will be bulleted by squares squares.

h1 em em { color : red } This specifies that emphasized text inside emphasized text in an header will appear in red.

© 2010, Robert K. Moniot

12

Compound Selectors Compound selectors are more specific than simple selectors. For instance, if a style sheet defines both p { color : red } div p { color : blue }

then for a tag that is inside a element, the second rule would apply.

© 2010, Robert K. Moniot

13

Style y Classes • These allow you to control which elements of a given type should use a style rule. This method has two parts: – In the style sheet, the selector defines the class name, which is preceded by a period. – In the HTML, the tag includes the class attribute and specifies the value of the class name

Example: Define the nodec class for anchor tags: a nodec a.nodec

{ text text-decoration decoration : none }

This suppresses the usual underlining. Use it in HTML like so: Link >Link text © 2010, Robert K. Moniot

14

Style Classes • Style y classes can also be “generic,” g , i.e. not tied to a specific element type. Example: Define the zowie class: .zowie

{ text-decoration : blink }

p element: Use it on an emphasized Important! Use it with no other style attributes:

Example 2

Buy Now! By the way: promise me you won’t ever use blink! © 2010, Robert K. Moniot

15

The and Tags • These tags are provided to allow arbitrary chunks of HTML to be treated as elements. This is usually done in order to apply style attributes to them, as in the preceding di example. l • A ... element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text. • A di ... /di element l td defines fi a “bl “block” k” structure. t t Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself. © 2010, Robert K. Moniot

16

Pseudo classes Pseudo-classes • These are like style y classes,, but an element acquires q a pseudo-class by user action or by a relationship other than descendancy. • In I the th style t l sheet, h t a pseudo-class d l name iis preceded d db by a colon. pseudo class name is NOT used with • In the HTML, the pseudo-class the affected tag, because it is implied.

© 2010, Robert K. Moniot

17

Pseudo classes Pseudo-classes • Link-related pseudo-classes p a:link { color : red } Applies when the link has not yet been visited. visited a:visited { color : green } Applies when the link has been visited. visited a:hover { color: yellow } Applies pp when the mouse is over the link.

© 2010, Robert K. Moniot

18

Cascading Rule • If two equally q y specific p rules can apply pp y to the same element, the one that comes last in the style sheet is used. Thus, in the example below, a:hover must follow a:link and a:visited in order to have effect, effect since a link can be both visited (or not) and hovering. The order of the first two doesn’t matter since they are mutually exclusive. a:link { color : red } a:visited { color : green } a:hover { color : yellow } © 2010, Robert K. Moniot

Result (Example 3)

19

Pseudo elements Pseudo-elements Closely related to pseudo-classes, in that they are defined by relationships, relationships not by explicit declarations declarations. A pseudo-element refers to a virtual element that is part of an actual element, rather than a special case of a whole element. • :first-line is i a pseudo-element d l t that h consists i off the h first line of text in a block-level element. • :first :first-letter letter is a pseudo-element pseudo element that consists of the first letter of the text in an element.

© 2010, Robert K. Moniot

20

Pseudo elements Pseudo-elements p p.initial p.initial:first-line p initial:first-letter p.initial:first letter

{ { { {

text-indent: 1em } text-indent: 0 } text-transform: uppercase } font-size: font size: 24pt }

This indents all normal paragraphs. A paragraph that is declared with class="initial" is not indented, and its first line appears in all capital letters, with an extra-large first letter. Result (Example 4)

© 2010, Robert K. Moniot

21

Inline Styles • Defined for individual elements,, at the point p of use ((in the HTML). • Useful for “one-off” styles that are not likely to be used elsewhere. l h • Method: > HTML text The attribute:value p pairs are what would g go between { } if this were a style-sheet rule. There is no selector since the style applies to this element only. Example 4 © 2010, Robert K. Moniot

22

External Style Sheets • A style y sheet can be p placed in a separate p file ((usually y named with suffix .css) and referenced by HTML files that need it. • Useful U f l ffor centralizing t li i control t l off style t l and d ensuring i uniform appearance across many pages of a web site. • The contents of the file are what would go between ... of an embedded style sheet. Note: this file is not HTML! • The Th file fil iis referenced f d using i a tag t in i the th HTML document's head portion.

© 2010, Robert K. Moniot

23

Example of style sheet Here is what an external style sheet (named style.css) t l ) could ld contain: t i /* This / s sty style e s sheet eet de defines es a an "excerpt" e ce pt c class ass for paragraphs that is much like blockquote. */ p.excerpt { font-style : italic; margin-right : 2em; margin-left : 2em; } Note that there is no HTML in this file! This example also illustrates a CSS comment between /* and */ . Such comments can be placed in external or embedded style sheets. © 2010, Robert K. Moniot

24

Example using style sheet Style Example ... affected text ...

• • •

The rel attribute specifies the relationship of the referenced file to this page. Th type attribute The tt ib t mustt be b "text/css". / The href attribute is a URL pointing to the external style sheet. Res lt (Example Result (E ample 5) © 2010, Robert K. Moniot

25

Box Model • All block-level elements are considered to be inside a box surrounded by padding, a border, and a margin. Typically the border is black, and margin and padding provide space around itit. Margin Border Padding

Content

© 2010, Robert K. Moniot

26

Borders Margins, Borders, Margins Padding • Widths can be set all around ((e.g. g border-width,, margin) or on each side individually (e.g. bordertop-width, margin-top). • Different border styles can be selected with borderb d style. Default is none, i.e. border is invisible.

© 2010, Robert K. Moniot

27

Floats • Block-level objects j can be floated,, so that theyy are positioned all the way to left or right on the page. – Usually used for images, but can also be used for text if width is made less than full page page.

• Position specified by float property, with values left or right. • Adjacent floats are rendered next to each other if space allows. • Text following a float will flow around it unless the clear property is applied. Example 6 © 2010, Robert K. Moniot

28

Controlling display • Rendering g of elements can be controlled using g display p y property. Values: – none : element will not be rendered – inline : element will be rendered in-line with surrounding content, like a

– block : element will be rendered as a block,, i.e. with line break before and after, like a

• Use to change block elements to inline or vice versa • Can C change h d dynamically, i ll e.g. using i hover pseudoclass d l Example 7

© 2010, Robert K. Moniot

29

Invisibility • There is also a visibility:hidden y property p p y that makes an element invisible, but it still takes up space in the rendered document.

© 2010, Robert K. Moniot

30

User Style Sheets • Users can specify p y their own style y sheets,, to apply pp y in absence of overriding styles from document style sheets. • Internet Explorer 7: T l → Internet Tools I t t Options O ti → General G l → Accessibility A ibilit Allows user to specify a style sheet to use. • Mozilla Firefox: uses a file named userChrome.css in chrome subdirectory of Firefox application data directory.

© 2010, Robert K. Moniot

31