css: cascading style sheets. 2 what are style sheets a style sheet is a mechanism that allows to...
TRANSCRIPT
CSS: Cascading Style CSS: Cascading Style SheetsSheets
2
What are Style SheetsWhat 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 SheetsStyle 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)
- http://www.huji.ac.il/styles/style.css (HUJI)
• Demo: http://www.w3schools.com/css/css_intro.asp
4
Without a style sheet
5
Simple ExampleSimple Example
<html>
<head><title>A Joke</title></head>
<body>
<div><img src="tomato.gif" alt="joke"/></div>
<h1>A joke</h1>
<p>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!"). </p>
</body>
</html>
6
7
Style File: Style File: joke.cssjoke.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)Simple Example (with css)
<html>
<head><title>A Joke</title>
<link rel="stylesheet" type="text/css" href="joke.css"/>
</head>
<body>
<div><img src="tomato.gif" alt="joke"></div>
<h1>A joke</h1>
<p>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!"). </p> </body>
</html>
9
10
Why do we Need a Style Sheet?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 PageInserting Style to a Page
12
How and Where?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 StylesInline 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
<p style="color: green; font-size: 1.5em; font-style: italic">
This text will be shown in italic green and the size will be 1.5 times the current font size
</p>
14
Document-Level Style (Embedded)Document-Level Style (Embedded)
<html> <head>
<style type="text/css">
body {color: red; background: skyblue;}
h1 { color: blue }
</style>
</head>
<body>... </body>
</html>
15
Link External Style SheetsLink External Style Sheets
<html> <head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
<body>... </body>
</html>
16
• The @import rule imports style rules to the beginning of
the style sheet
• The @import rule imports the style rules of another
style sheet
• Several import rules may appear
Imported Style SheetsImported Style Sheets
@import url(general.css);
body { color: red; background:skyblue }
h1 { color: blue }An Example:
17
Cascading of StylesCascading 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 SyntaxStyle Syntax
19
Style RulesStyle Rulesh1 {
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)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 <p> tag
p {color: green; font-size: 1.5em; font-style: italic}
21
What Kind of Properties can a CSS What Kind of Properties can a CSS Style Sheet Change?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: http://www.w3schools.com/css
Style PropertiesStyle Properties
23
Our ExamplesOur Examples
• We use the following HTML example:
This is <span> our example </span> for css.
• The <span> tag is used to group elements for
formatting with styles
- Extremely useful tag...
24
Font PropertiesFont Properties
• Font properties: family, size, weight, style, variant, ...
span {
font-family: courier;
font-size: 130%;
font-style: italic;
font-weight: bold}
25
Text PropertiesText Properties
• Text properties: color, transform, decoration, …
span {
color: #00cc00;
text-decoration: line-through;
text-transform: uppercase}
26
Background PropertiesBackground Properties
• Background properties: background-color,
background-image, …
span {background-color: #00ff00}
span {background-image: url('bg.gif');}
Layout PropertiesLayout Properties
28
Page LayoutPage 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 ElementsInline 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 ElementsPositioning 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. AbsoluteRelative 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 TypesPosition 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 ExamplesPosition Examples
span {
position:absolute;
left: 1cm;
top: 1cm;
color: #00cc00;} span {
position:fixed;
left: 1cm;
top: 1cm;
color: #00cc00;}
34
Position ExamplesPosition Examples
span {
position:static;
left: 1cm;
top: 1cm;
color: #00cc00;}
Totally Ignored! This is the
default position type
35
More Layout PropertiesMore 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, …