css - feupssn/2010/lbaw/slides/lbaw-css.pdf · • cascading style sheets (css) is a simple...
TRANSCRIPT
![Page 1: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/1.jpg)
CSSLab. Bases de Dados e Aplicações Web
MIEIC, FEUP 2010/11
Sérgio Nunes
1
![Page 2: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/2.jpg)
Summary
• Quick Overview
• The CSS Language
• CSS Selectors & Properties
• The Box Model
• CSS Positioning
• A Note on CSS3
2
![Page 3: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/3.jpg)
Quick Overview
3
![Page 4: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/4.jpg)
The Big Picture
• Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
• Client-side technology used to format the presentation of web documents. Can exist within a HTML document or be referenced by it.
4
![Page 5: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/5.jpg)
HTML + CSS HTML only
5
![Page 6: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/6.jpg)
Original Vision• HTML for content and structure.
• Presentation is left to the user allowing local configurations. Each user has its settings.
• However, web authors want to control presentation. Browsers introduced tags and attributes.
• HTML language "degenerated" to also include presentation markup.
<b>...</b><i>...</i><blink>...</blink>
<font size="x"...>...</font>
6
![Page 7: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/7.jpg)
Problems
• Bloated code. No "separation of concerns".
• Difficult to redesign.
• Difficult to support different devices.
• Content formatted to a given form.
• Hard coded decoration and layout - bad!
7
![Page 8: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/8.jpg)
Motivation for CSS
• Separate structure from presentation.
• Different tools for different skills.Content versus Design.
• Avoid redundancy. Centralized rules for presentation. Control multiple HTML documents with one CSS file.
• Easier support for different devices (e.g. mobile, desktop, print, web).
• Simpler maintenance.
8
![Page 9: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/9.jpg)
HTML
CSS A CSS B CSS C
From "css Zen Garden: The Beauty in CSS Design"http://www.csszengarden.com/
9
![Page 10: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/10.jpg)
CSS Document
A CSS document is a text document containing CSS rules. CSS rules can also be directly included in a HTML document.
10
![Page 11: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/11.jpg)
CSS Specifications
• Cascading Style Sheets at CERN (1994).http://www.w3.org/People/howcome/p/cascade.html
• CSS 1 published as a W3C Recommendation in 1996.
• CSS 2 published as a W3C Recommendation in 1998.
• CSS 3 published as W3C Working Draft in 2000.
• CSS 2.1 published as W3C Working Draft in 2002.
11
![Page 12: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/12.jpg)
The CSS Language
12
![Page 13: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/13.jpg)
Applying CSS
13
![Page 14: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/14.jpg)
Cascading Style Sheets
• Three different levels of styles (cascading):
• Inline - element level.
• Internal - document level.
• External - site level.
14
![Page 15: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/15.jpg)
Inline Styles
• HTML elements can be directly styledusing the style attribute.
<h1 style="color: red;">A Title</h1>
<em style="font-weight: bold;">this is important</em>
15
![Page 16: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/16.jpg)
Internal Styles
• Style sheets can be embedded into the head element of a HTML document.
<head> <style type="text/css"> h1 { color: red; }
em { font-weight: bold; } </style></head>
HTML
CSS
16
![Page 17: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/17.jpg)
External Styles
• Both inline and internal rules cannot be reused across a site.
• Using external styles, CSS rules are included in a specific CSS file and linked to HTML documents.
<link rel="stylesheet" type="text/css" rel="path/to/file.css">
CSS
HTML
HTML HTML
17
![Page 18: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/18.jpg)
Priorities
• Browser defaults.
• External style sheets.
• Internal styles.
• Inline styles.
18
![Page 19: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/19.jpg)
CSS Syntax
19
![Page 20: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/20.jpg)
CSS Files
• A CSS file (style sheet) consists of a list of rules (or statements).
• Each rule consists of one or more selectors and a declaration block, enclosed in curly brackets.
• Each declaration consists of a property, a colon (:), a value and a semicolon (;).
20
![Page 21: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/21.jpg)
Anatomy of a Rule
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: grey;}
Selector(s)
Values
Properties
21
![Page 22: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/22.jpg)
Coding Conventions• CSS files can have comments that are ignored by the
browser. Useful for documenting or organizing code.
• Layout CSS rules in multiple lines for improved readability. Use a single line in special cases.
/* This is a comment */ /* This is amultiline comment */
h1 { font-size: 18px; text-align: center;}
.alert { color: red; }
22
![Page 23: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/23.jpg)
CSS Selectors
23
![Page 24: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/24.jpg)
CSS Selectors
A CSS selector identifies an object on a web page to which CSS declarations are applied.
body { color: red; font-family: Arial; font-size: 18px;}
div.nav p strong { color: yellow}
24
![Page 25: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/25.jpg)
Type Selectors
• HTML Elements as selectors.
• Used when you want to affect every instance of a HTML element.
h1 { color: red; }p { color: black; }
img { border: none; }div { border: 1px solid black; }
25
![Page 26: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/26.jpg)
Class Selectors• How to change a specific instance of an element?
For instance, how to style the 2nd paragraph only?
• It is possible to define classes in CSS and apply them to HTML elements. A given class can be used multiple times on the same document.
.current {}
.title {}CSS file
<h2 class="title">...</h2><p>...</p><p class="current">...</p><p class="current">...</p>
HTML document
26
![Page 27: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/27.jpg)
Using Class Selectors
• Class selectors can either be applied to all elements of a given class, or only applied to a specific HTML element of that class.
.current {}.title {}
p.current {}h2.current {}p.title {}
27
![Page 28: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/28.jpg)
Multiple Classes
• A single HTML element may be associated with multiple classes, separated by spaces.
<p class="current">...</p><p class="current">...</p><p class="current note">...</p>
HTML document
.current {}
.note {}CSS file
28
![Page 29: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/29.jpg)
ID Selectors
• ID selectors are similar to class selectors, except that they can only be applied to exactly one element on a page. One ID per document.
• ID selectors are defined in CSS with '#', and applied to elements with the 'id' attribute.
#active {}p#footer {}div#footer {}
CSS file
<p id="active">...</p><div id="footer">...</p>
HTML document
29
![Page 30: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/30.jpg)
ID and Class Naming
• ID and Class names can contain lowercase letters, uppercase letters, digits, underscores and dashes.Cannot start with digits.
• Names should define function, not appearance.
• Good: header, footer, active, note.
• Bad: italic, red, big.
.current.itemTitle
#Header1#item-title
30
![Page 31: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/31.jpg)
Descendent Selectors
• Can be used to select an element based on its position within the document's HTML structure, e.g. paragraph inside div 'footer'.
a {}p a {}
p.current a {}ul li a {}
#footer .note em a {}
31
![Page 32: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/32.jpg)
Link Pseudo Class Selectors
• Link pseudo class selectors are used to select links in a number of different states. Links have 4 states:
• normal — standard, unvisited link.
• visited — visited link.
• hover — when the cursor is over the link.
• active — while the link is being clicked.
a:link {}a:visited {}a:hover {}a:active {}
a.note:link {}May be combined
with class selectors.
32
![Page 33: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/33.jpg)
Pseudo Element Selectors
• Two types of pseudo element selectors
• first-line — selects first line of element.
• first-letter — selects first letter of element.
• before — inserts content before the element selected.
• after — inserts content after the element selected.
:first-line:first-letter
:before:after
33
![Page 34: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/34.jpg)
p:first-line { text-transform: uppercase; }
Hello world, this is my first CSS rule using pseudo element selectors.
HELLO WORLD, THIS IS my first CSS rule using pseudo element selectors.
p:first-letter { font-size: 2em; }
Hello world, this is my second CSS rule using pseudo element selectors.
Hello world, this is my second CSS rule using pseudo element selectors.
34
![Page 35: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/35.jpg)
h1:before { content:"Chapter: "; }
Introduction Chapter: Introduction
a:after { content:attr(href); }
U.Porto U.Porto http://www.up.pt
35
![Page 36: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/36.jpg)
Grouping Selectors
• Different selectors may be grouped in a single CSS rule, using commas.
ul li { color: red; margin: 5px; }p { color: red; }h1 a { color: red; }.new { color: red; }
ul li, p, h1 a { color: red; }ul li { margin: 5px; }
36
![Page 37: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/37.jpg)
Universal Selector
• The universal selector matches the name of any element. It selects any single element from the document.
* { font-family: Verdana, sans-serif; }
* { margin: 0; padding: 0;}
37
![Page 38: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/38.jpg)
Child Selectors
• A child selector matches when an element is the direct descendent (child) of some element.
p > a {}ul > li {}
38
![Page 39: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/39.jpg)
First Child Selectors
• The first child selector matches an element that is the first child of some element. The first child of any parent, not the first child of an element.
p:first-child {}p:first-child em {}
39
![Page 40: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/40.jpg)
Adjacent Selectors
• Adjacent (sibling) selectors matches an element that immediately follows another element at the same level.
strong + em {}
ul + p {}
Matches em elements that follow strong elements
Matches paragraphs that immediately follows lists
40
![Page 41: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/41.jpg)
Attribute Selectors
• Attribute selectors matches elements that have specific attributes defined.
• Attributes may match in four ways:
• [att] — match when attribute att is set.
• [att=val] — match when attribute att has value val.
• [att~=val] — match when attribute att includes the val keyword among a space separated list.
• [att|=val] — match when attribute att includes the val keyword among a dash separated list.
41
![Page 42: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/42.jpg)
h1[title]
h1[title="Porto"]
h1[title~="Porto"]
h1[title|="Porto"]
<h1 title="Portugal">...</h1>
<h1 title="Porto">...</h1><h1 title="Portugal">...</h1>
<h1 class="some">...</h1>
<h1 title="Porto Portugal">...</h1><h1 title="Porto-Portugal">...</h1>
<h1 title="Porto Portugal">...</h1><h1 title="Porto-Portugal">...</h1>
42
![Page 43: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/43.jpg)
Advices
• Don't "over DIV" your page.Keep it simple.
• Reuse HTML native elements if adequate.
• Don't "over class" your CSS.Use advanced selectors.
• Group selectors in common rules.
43
![Page 44: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/44.jpg)
Text Formatting
44
![Page 45: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/45.jpg)
Color Property
• The color property sets the foreground color of an element (i.e. text).
• The color property can be set by different ways: keyword, RGB code, Hex code.
Keyword:blackyellow
redblue
RGB code:rgb(100%, 40%, 0%) = rgb(255, 102, 0)rgb(40%, 20%, 20%) = rgb(102, 51, 51)
Hex code:#326432#0088ff#000000
45
![Page 46: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/46.jpg)
Text Properties
• text-indent: specifies the indentation of the first line of the text in a block.
• text-align: describes how inline content of a bloc container is aligned (left, right, center, justify).
• text-decoration: decorations added to the text (underline, overline, line-through).
• text-transform: controls the capitalization effects of text (capitalize, uppercase, lowercase).
46
![Page 47: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/47.jpg)
Text Properties
• letter-spacing: spacing behavior between text characters.
• word-spacing: spacing behavior between words.
• line-height: minimal height of lines within a block element.
• vertical-align: specifies the vertical position of content within a block element.
47
![Page 48: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/48.jpg)
Font Properties
• font-family: prioritized list of font family names and/or generic names.
• font-style: selects between normal and italic faces within a font family.
• font-size: specifies the font size.
• font-weight: select the weight of the font.
• font-variant: specifies the small-caps variation.
48
![Page 49: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/49.jpg)
Font Families
• Two types of font family names:
• <font-family> — the name of a font family of choice (e.g. Helvetica).
• <generic-family> — the name of a generic family name: serif, sans-serif, cursive, fantasy and monospace.
49
![Page 50: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/50.jpg)
Generic Font Families
• Serif fonts has finishing details (i.e. serifs) on the ends of symbols (e.g. Times, Georgia, Garamond).
• Sans-serif fonts don't have serifs at the end of strokes (e.g. Helvetica, Verdana, Trebuchet MS).
• Monospace fonts have equal width symbols (e.g. Courier).
AiAiAi
50
![Page 51: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/51.jpg)
Web-safe Fonts
• Fonts that are present in a wide range of browsers and operating systems.
• Microsoft's "Core fonts for the Web" had an important impact in web typography.
• High penetration fonts: Arial, Courier New, Georgia, Times New Roman, Trebuchet, Verdana.
51
![Page 52: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/52.jpg)
From Wikipedia "Core fonts for the Web"http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
Arial Courier
Georgia Times New Roman
Trebuchet Verdana
52
![Page 53: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/53.jpg)
Alternatives
• How to use non web-safe fonts?
• Image replacement: high control, low accessibility, higher bandwidth.
• Flash-based: selectable text, requires Flash.
• Others: JavaScript + SVG, CSS3's font-face.
53
![Page 54: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/54.jpg)
Font Sizes
• Font sizes can be specified with CSS using:
• <absolute-size> - large / medium / small, ...
• <relative-size> - larger / smaller.
• <length> - points, ems, pixels, centimeters, ...
• <percentage> - relative to parent's size.
• The font size property is inherited from parent.
54
![Page 55: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/55.jpg)
CSS Units
55
![Page 56: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/56.jpg)
CSS UnitsUnit Type Example
px (pixels) length width: 744px;
em (ems) length margin-left: 1.25em;
% (percent) length left: 34%;
pt (points) length font-size: 12pt;
in (inches) length margin-top: .75in;
cm (centimeters) length margin-top: 1.905cm;
xx-small … xx-large font-size font-size: large;
rgb(r,g,b) color (decimal) background-color: rgb(221,204,187);
#rrggbb color (hexadecimal) background-color: #ddccbb;
#rgb color (hexadecimal) background-color: #dcb;
From HTML & CSS: The Good Parts, Ben Jenick, O'Reilly (2010)
56
![Page 57: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/57.jpg)
Screen Display Units
• px (pixels) — Pixels are absolute units, equal to one pixel on the user's screen display; always expresses as an integer.
• em (ems) — An em is equivalent to the greatest possible height of a letter in the applicable font and size combination. Usually expressed as a floating-point value.
• % (percent) — Percentage units are computed relative to some baseline measurement, which varies according to property and context. Floating-points are allowed.
57
![Page 58: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/58.jpg)
Print-Friendly Units
• pt (points) — Type is traditionally measured in points. A point is roughly equivalent to 0.0352 cm, yielding slightly less than 28.35 points per centimeter.
• in (inches) — One inch is defined as being equal to 2.54 cm.
• cm — Centimeters.
58
![Page 59: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/59.jpg)
Color Units• CSS supports a three-channel (red, blue, green) color
space with 8 bits of depth per channel, i.e. 224 possible colors.
• Three styles of notation are available.
• rgb(r,g,b) — Three channels, decimal. Each channel takes a range of 0-255.
• #rrggbb — Three channels, hexadecimal. Each channel takes a range of 00-ff.
• #rgb — Three channels, hexadecimal, reduced depth. Each channel takes a range of 0-f. #6fc = #66ffcc
59
![Page 60: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/60.jpg)
CSS and Graphics
60
![Page 61: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/61.jpg)
CSS and Graphics
• It is possible to format graphics in web documents in two ways, using the img element or the background-image property.
• The img element inserts a graphic in the structure of the document.
• With the background-image property it is possible to use a graphic in the background of any element on a web document.
61
![Page 62: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/62.jpg)
img• CSS properties commonly used with images.
• Borders — border properties can be used to frame an image.
• Paddings — padding can be used to define the space between a border and an image.
• Margins — margins can be used to set the distance between the image and other page content.
• Float — the float property can be used to move the image to the right or left, side-by-side with the surrounding content.
62
![Page 64: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/64.jpg)
Background Images
• The background-image property adds a graphic to the background of an element.
• Absolute or relative URLs can be used.
• It is possible to control both image repetition and image position.
body { background-image: url("media/picture.jpg");}
64
![Page 65: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/65.jpg)
Background Repetition
• With the property background-repeat is possible to control how the background image is repeated in the available space.
• By default the background graphic is repeated until all the available space is filled.
• Possible values are: repeat (the default),no-repeat, repeat-x and repeat-y.
65
![Page 66: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/66.jpg)
repeat no-repeat
repeat-x repeat-y66
![Page 67: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/67.jpg)
Background Position
• With the background-position property is possible to define where the graphic should be placed.
• Background position can be defined in three ways: keywords, exact values, percentages.
• It is possible to control the vertical position and the horizontal position.
67
![Page 68: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/68.jpg)
Position Values
• Keywords: top, bottom, left, right, center.
• Values: background position is specified by the distance from the top left corner of the container.
• Percentages: background position is proportional to the width and height of the container.
68
![Page 69: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/69.jpg)
body { background-image: url("cat.jpg"); background-repeat: no-repeat; background-position: center center;}
body { background-image: url("cat.jpg"); background-repeat: no-repeat; background-position: 20px 20px;}
body { background-image: url("cat.jpg"); background-repeat: no-repeat; background-position: 20% 20%;}
69
![Page 70: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/70.jpg)
Background Shorthand
• Instead of using three different properties to control background images, the background property shorthand can be used.
• Property background, followed by the values for background-image, background-position and background-repeat.
• No need to specify all property values.
background-image: url("cat.jpg");background-repeat: no-repeat;background-position: center center;
background: url("cat.jpg") center center no-repeat;}70
![Page 71: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/71.jpg)
Finding Images
• http://search.creativecommons.org
• http://www.morguefile.com
• http://www.sxc.hu
• http://openphoto.net
71
![Page 72: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/72.jpg)
CSS Box Model
72
![Page 73: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/73.jpg)
CSS Box Model
• The CSS box model describes the rectangular boxes that are generated for elements in the HTML document.
• Each box has a content and optional surrounding padding, border and margin areas.
content
padding
border
margin
73
![Page 74: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/74.jpg)
Border
• The border properties specify the width, color, and style of the border area of a box.
• border-width: specifies the width of the border area.
• border-color: sets the color of the border.
• border-style: specifies the line style of a box's border (solid, double, dashed, etc).
• The border property is a shorthand for setting the same width, color and style for all four borders of a box. Other shorthands: border-top, border-left, border-right, border-bottom.
h1 { border-bottom: 1px solid red; }
strong { border: 1px dashed yellow; }
74
![Page 75: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/75.jpg)
solid red 3 pixels border
dashed left and right side only green 5 pixels border
dotted bottom side black 2 pixels border
75
![Page 76: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/76.jpg)
Padding
• Padding properties specify the width of the padding area of a box. The padding shorthand property sets the padding for all four sides.
• It is possible to independently control the padding for each side with: padding-top, padding-left, padding-right, padding-bottom.
h1 { padding: 10px; padding-bottom: 20px;}
76
![Page 77: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/77.jpg)
all around 20 pixels padding
all around 0 pixels padding
top and bottom 10 pixels, left and right 30 pixels
77
![Page 78: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/78.jpg)
Margin
• Margin properties specify the width of the margin area of a box. The margin shorthand property sets the margin for all four sides.
• It is possible to independently control the margin for each side with: margin-top, margin-left, margin-right, margin-bottom.
h1 { margin-top: 10px; margin-bottom: 50px;}
78
![Page 79: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/79.jpg)
Background• The background of an element can be specified
as either a color or an image.
• The background property shorthand refers to the background of the content, padding and border areas.
background: red;
background: url("picture.png") center repeat-y;
79
![Page 80: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/80.jpg)
Positioning
80
![Page 81: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/81.jpg)
CSS Positioning
• A box may be laid out according to three positioning schemes: normal flow, float, absolute positioning.
• Normal flow is the default scheme used for positioning. Boxes are laid out starting at the top and flow from left to right.
• In the float model, a box is laid out according to the normal flow and then taken out of the flow and shifted to left or right. Other content may flow along the side of a float.
• In the absolute positioning model, a box is removed from the normal flow entirely and assigned a new position.
81
![Page 82: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/82.jpg)
position and float
• The position and float properties determine which positioning algorithm is used to calculate the position of a box.
82
![Page 83: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/83.jpg)
position
• The position property may have four values:
• static: the box is positioned accordingto the normal flow (default value).
• relative: the box's position is calculated according to its position in the normal flow.
• absolute: the box's position is specified with the top, right, bottom and left properties.
• fixed: the box's position is calculated according to the absolute model, but in addition, the box is fixed with respect to the viewport (i.e. browser window).
83
![Page 84: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/84.jpg)
Positioning Properties
• The position property is used together with four box offset properties: top, right, bottom, and left.
• When laying out elements, it is also possible to specify an element's width and height.
• Units may be fixed or relative.
#logo { position: absolute; top: 0px; left: 0px;}
#logo { position: relative; bottom: 50px;}
84
![Page 85: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/85.jpg)
element
top
bottom
rightleft
height
width
85
![Page 86: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/86.jpg)
Relative Positioning
#id { position: relative; top: 50px; left: 50px;}
86
![Page 87: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/87.jpg)
Absolute Positioning
#id { position: absolute; top: 150px; left: 300px;}
87
![Page 88: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/88.jpg)
Fixed Positioning
88
![Page 89: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/89.jpg)
float• The float property specifies whether a box should
float outside its normal flow. There are three possible values:
• none: the default value, the element is not floated.
• left: the element is floated to the left and content flows on the right side of the box.
• right: the element is floated to the right and content flows on the left side of the box.
89
![Page 90: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/90.jpg)
img { float: none;}
img { float: left;}
img { float: right;}
90
![Page 91: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/91.jpg)
z-index• When elements are removed from their normal flow,
e.g. with absolute positioning, they can be stacked inside other elements.
• With the z-index property it is possible to control how elements are stacked (i.e. projected on the z-axis).
• The higher the value, the closer to theuser an element is.
#logo { background: url(logo.png) top left no-repeat; z-index: 10;}
#logo2 { background: url(logo2.png) top left no-repeat; z-index: 20;}
91
![Page 92: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/92.jpg)
Web Page Layouts
• Web page layouts fall into one of two types, fixed width or liquid.
• Fixed width layouts are independent of the user's viewport size and offer greater control to the developers. The majority of web sites are fixed width. 960px width is a common setting.
• Liquid layouts adjust to the browser's width and height. They are more challenging to the developer. Pure liquid layout are rarely used in practice.
92
![Page 93: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/93.jpg)
CSS Techniques
93
![Page 94: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/94.jpg)
CSS Reset
94
![Page 95: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/95.jpg)
CSS Reset
• Each browser sets different default properties for each element.How to deal with this?
• Reset all properties to make all browsers equal. Can be made manually or using an existing library (e.g. YUI CSS Reset).
<link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
95
![Page 96: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/96.jpg)
Horizontal Menu
96
![Page 97: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/97.jpg)
Horizontal Menu
from Max Designhttp://css.maxdesign.com.au/listamatic/horizontal02.htm
<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>
97
![Page 98: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/98.jpg)
Horizontal Menu
from Max Designhttp://css.maxdesign.com.au/listamatic/horizontal02.htm
ul#navlist { margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li { display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited { color: #fff; background-color: #036; text-decoration: none;}
#navlist a:hover { color: #fff; background-color: #369; text-decoration: none;}
98
![Page 99: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/99.jpg)
Active Item
99
![Page 100: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/100.jpg)
Active Item
<ul> <li class="active">Home</li> <li>Company</li> <li>Contacts</li></ul>
<ul> <li>Home</li> <li class="active">Company</li> <li>Contacts</li></ul>
Home page Company page
li { color: black; }li.active { color: red; }
Standard approach requires a different HTML pages per option.
100
![Page 101: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/101.jpg)
Active Item
<body class="company">...<ul> <li class="home">Home</li> <li class="company">Company</li> <li class="contacts">Contacts</li></ul>
use a different class for body in each page
li { color: black: }
body.home li.home,body.company li.company,body.contacts li.contacts { color: red;}
With CSS it is possible to have a fixed HTML code.
CSS fileHTML file
101
![Page 102: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/102.jpg)
CSS Sprites
102
![Page 103: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/103.jpg)
CSS Sprites
• Group multiple images into one single composite image and display using CSS background positioning.
• This technique can save a significant amount of HTTP requests (i.e. bandwidth).
• Can also improves the responsiveness of user interfaces (i.e. preloading).
103
![Page 104: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/104.jpg)
Sprites Examples
104
![Page 105: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/105.jpg)
CSS Sprites Workings
a { background: url("sprite.png") 0px 0px no-repeat;}
a:hover { background-position: 0px -100px;}
105
![Page 106: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/106.jpg)
Tools
106
![Page 107: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/107.jpg)
Web Developer
• "The Web Developer extension adds various web developers tools to a browser." [for Firefox and Chrome]
http://chrispederick.com/work/web-developer/
107
![Page 108: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/108.jpg)
Firebug
• "Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page."
http://getfirebug.com/
Network activity monitoring CSS layout HTML inspection
108
![Page 109: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/109.jpg)
CSS Validation
http://jigsaw.w3.org/css-validator/
109
![Page 110: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/110.jpg)
CSS 3
• CSS 3 is organized in several separate specifications, called modules.
• Introduces new selectors: last-child, nth-child(), etc.
• Decorations: rounded elements, opacity, fonts, etc.
• New column-based layout.
• Transformations: 2D, scale, rotate, 3D, etc.
• Animations, Transitions, and more.
110
![Page 111: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/111.jpg)
Sources
• Cascading Style Sheets 2.1 (2010)http://www.w3.org/TR/CSS2/
• Opera Web Standards Curriculumhttp://www.opera.com/developer/wsc/
• Complete CSS Guide from westcivhttp://www.westciv.com/style_master/academy/css_tutorial/
• CSS: The Missing Manual, 2nd Ed.David Sawyer McFarland, O'Reilly (2009)
• HTML & CSS: The Good PartsBen Henick, O'Reilly (2010)
111
![Page 112: CSS - FEUPssn/2010/lbaw/slides/lbaw-css.pdf · • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, ... Coding Conventions • CSS files can have](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f15f01e560932548e113cf1/html5/thumbnails/112.jpg)
Further Reading
• W3C - Cascading Style Sheetshttp://www.w3.org/Style/CSS/
• CSS - Dev.Operahttp://dev.opera.com/articles/css/
• The Elements of Typographic Style Applied to the Webhttp://webtypography.net
112