CSS: Cascading Style Sheets

2 What are Style Sheets A style sheet is a mechanism that allows to specify how HTML (/XHTML/XML) pages should look The style is specified by style rules The style rules appear either in the document or in external files, called style sheets

3 Style Sheets Usually, a file that ends with.css Contains a list of style rules for HTML elements Case insensitive Comments are enclosed in /* */ For example: -i.a.cnn.net/cnn/.element/ssi/css/1.1/main.css (CNN) - (HUJI) Demo:

4 Without a style sheet

5 Simple Example A Joke A joke A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!").

6

7 Style File: joke.css body { background-image: url("bg.gif"); } h1 { background-color: green; color: rgb(250, 200, 250); /* pink */ font-family: cursive } p { background-color: yellow; color: purple; font-size: 200%;}

8 Simple Example (with css) A Joke A joke A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!").

9

10 Why do we Need a Style Sheet? Separates content from format Reduces download time (how?) In HTML 4.01 styling is very limited Consistent appearance over a site Allows to easily change style -In one page -In a whole site

Inserting Style to a Page

12 How and Where? The style rules appear either in the document or in external files, called style sheets -Inside a document, there are inline styles and embedded style sheets -External style sheets are either linked or imported

13 Inline Styles In an inline style, the declaration block appear as the value of the attribute style of the element Almost every tag can have the style attribute -exceptional: base, head, html, meta, param, script, style and title This text will be shown in italic green and the size will be 1.5 times the current font size

14 Document-Level Style (Embedded) body {color: red; background: skyblue;} h1 { color: blue }...

15 Link External Style Sheets...

16 rule imports style rules to the beginning of the style sheet rule imports the style rules of another style sheet Several import rules may appear Imported Style url(general.css); body { color: red; background:skyblue } h1 { color: blue } An Example:

17 Cascading of Styles CSS merges style rules from different places (inline, document-level, imported and linked) Different places may have conflicting style rules The process of merging (“cascading”) styles from different places determines which style rules have priority Will be discussed later…

Style Syntax

19 Style Rules h1 { color: purple; font-family: Impact, Arial Black; font-size-adjust:.46; font-size: 2.33em; font-weight:400; font-style:normal; text-decoration: none; word-spacing:normal letter-spacing:normal; text-transform: none; } Declaration Property Value(s) Selector

20 Style Rules (cont) A rule has the following form selector {declaration block} The selector determines when the rule is applied For example, the following rule applies to text that is inside a tag p {color: green; font-size: 1.5em; font-style: italic}

21 What Kind of Properties can a CSS Style Sheet Change? Style properties Layout properties There are many properties and many possible values -We will not cover all of them here -Everything is in the Web ! -A good source:

Style Properties

23 Our Examples We use the following HTML example: This is our example for css. The tag is used to group elements for formatting with styles -Extremely useful tag...

24 Font Properties Font properties: family, size, weight, style, variant,... span { font-family: courier; font-size: 130%; font-style: italic; font-weight: bold}

25 Text Properties Text properties: color, transform, decoration, … span { color: #00cc00; text-decoration: line-through; text-transform: uppercase}

26 Background Properties Background properties: background-color, background-image, … span {background-color: #00ff00} span {background-image: url('bg.gif');}

Layout Properties

28 Page Layout Each HTML element defines a layer (rectangular box) that is placed in some location on the page Layers are nested with correspondence to the nesting of their elements

29 Inline vs. Block Elements There are two types of elements: Block elements: p, ol, table, div, h1, etc. Inline elements: b, i, a, span, cite, etc. Layers of block elements are separated from their adjacent elements (i.e., a new line before and after), while inline elements are not You can turn a block into an inline and vice-versa, using the display property, e.g., h1 { display: inline }

30 Positioning Elements Using CSS, you can define the position of an element inside its parent layer For that, use the properties position, left, right, top and bottom span { position:relative; left: 1cm; top: 1cm; color: #00cc00;}

31 Relative vs. Absolute In CSS, positions (of boxes) and sizes (of fonts and boxes) could be either relative or absolute In an “absolute” style -Font size is fixed -Sizes and positions of elements are fixed In a “relative” style -you can change the font size -The sizes and positions of elements may change when the size of the window is changed

32 Position Types But 1cm left to what?? For that, we have the position property Four position types: - static : the default position - absolute : relative to the parent layer coordinates - relative : relative to the static position - fixed : relative to the window coordinates

33 Position Examples span { position:absolute; left: 1cm; top: 1cm; color: #00cc00;} span { position:fixed; left: 1cm; top: 1cm; color: #00cc00;}

34 Position Examples span { position:static; left: 1cm; top: 1cm; color: #00cc00;} Totally Ignored! This is the default position type

35 More Layout Properties Layer properties - margin-top (-bottom, -left, -right) - padding-top (-bottom, -left, -right) - border-width (-color, -style, … ) Text Layout - direction, word-spacing, white-space, letter- spacing, line-height, text-align, text-indent, …