martin kruliš 5. 11. 2015 by martin kruliš (v1.0)1
TRANSCRIPT
by Martin Kruliš (v1.0) 1
Cascading Style SheetsMartin Kruliš
5. 11. 2015
by Martin Kruliš (v1.0) 2
Scr
ipti
ng
JavaScr
ipt,
Fla
sh, …
5. 11. 2015
Evolution of Web Presentation
HTML time
Str
uct
ure
& S
em
anti
csPre
sen
tati
on
& D
esi
gn
HTML4.01
CSS
XHTML
CSS3.0
HTML5
SVG
MathML
Multimedia
data-*attributes
by Martin Kruliš (v1.0) 35. 11. 2015
CSS and HTML Content
CSS Introduction
…
<h1>CSS Introduction</h1>font: 20pt Calibri;color: brown;
HTML provides semantics:
“This is a heading”
CSS provides visual properties (font, color, ..)
by Martin Kruliš (v1.0) 4
Document Object Model
<html><head>...</head><body> <h1>Text</h1> <p> Some <b>bold</b> and some plain text. </p> ...</body></html>
5. 11. 2015
Cascading Style Sheets
Document
body
h1 p
Text Someand some plain text.
b
bold
…
by Martin Kruliš (v1.0) 5
Styles are assigned to visible elements◦ And affect page rendering
5. 11. 2015
Cascading Style Sheets
Document
body
h1 p
Text Someand some plain text.
b
bold
…
font: 12pt Arial;background-color: #fff;
font-size: 24pt;margin: 10px 0;
text-align: justify;padding: 5px;
by Martin Kruliš (v1.0) 6
Versions◦ CSS 1 (1996)
Basic text properties (fonts, alignment, spacing, …) Color of text and backgrounds Margins, paddings, and borders
◦ CSS 2 (1998) New types of positioning Concept of media introduced
◦ CSS 2.1 (2004-2011) Fixes serious problems of CSS 2 Replaces problematic features with already
implemented properties from existing browsers
5. 11. 2015
Cascading Style Sheets
by Martin Kruliš (v1.0) 7
Versions◦ CSS 3 (1999-present)
Divide CSS specification into modules Selectors, color, cascade, box, layout, background, …
Improve existing properties More elaborate backgrounds, custom borders, …
Introduce additional visual effects Round corners, shadows, …
Allows using custom fonts (TrueType, OpenType, …) Provide more complex selector relations Add transitions and animations
5. 11. 2015
Cascading Style Sheets
by Martin Kruliš (v1.0) 8
Element <style>◦ Embedded CSS within
HTML document◦ Placed in header◦ Element contents must
be in CSS syntax◦ Useful for single-file
pages and for fasterloading via HTTP
5. 11. 2015
Embedding CSS<!DOCTYPE HTML><html><head> <title>CSS Example</title> <style type="text/css"> body { font: 12pt Calibri; } p { margin: 10px; } ... </style></head>
<body>...
by Martin Kruliš (v1.0) 9
Linking External Style Sheet File◦ Separate files for separate languages◦ Better code (style sheet) reusability
5. 11. 2015
Linking CSS
<!DOCTYPE HTML><html><head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="styles.css"></head>
<body>...
body { font: 12pt Calibri;}p { margin: 10px;}...
styles.css
by Martin Kruliš (v1.0) 10
Global Attribute style◦ HTML attribute applicable for all visual elements◦ Contains CSS properties only (without selector)
Associated with the element of the style attribute◦ Used in rare cases (usually by scripts)
5. 11. 2015
Inline CSS
<!DOCTYPE HTML><html>
<body> <h1 style="color: red;">Red Heading</h1>...
by Martin Kruliš (v1.0) 11
Cascading Style Sheets◦ Simple plain-text syntax based on English
keywords◦ File is a sequence of rulesselector { some-property: value1; another-property: value2;}
◦ Selector is used to select a subset of HTML elements for which the declaration are used
◦ Declaration block contains list of declarations, that specify values for CSS properties
5. 11. 2015
CSS Syntax
Declaration block
by Martin Kruliš (v1.0) 12
Selectors◦ Simple declarative query-like language◦ Basic selector types
Element name selectorp selects all elements p (paragraphs)
Selecting single element of given ID#myId selects an element with attribute id="myId"
Selecting elements with assigned class.myClass selects all elements with class="myClass" One element may have multiple classes assigned<li class="specialOffer discount">Great Deal!…
* universal selector (selects all elements)
5. 11. 2015
CSS Selectors
Example 1
by Martin Kruliš (v1.0) 13
Combining Selectors◦ Simple combinations
div.info select all div elements with info class h1#main selects h1 element with id="main"
◦ Using relative positions in the document E F selects elements F which have ancestor E E > F selects elements F which have parent E E + F selects elements F which are immediately
preceded by E E ~ F selects elements F which are preceded by E We can use any other selectors instead of E and F
5. 11. 2015
CSS Selectors
Example 2
by Martin Kruliš (v1.0) 14
Pseudo-classes Selectors◦ Usually used in with another selector (e.g., a:visited)
5. 11. 2015
CSS Selectors
:link Unvisited hyperlink
:active Active (currently clicked on) hyperlink
:visited Visited hyperlink
::first-line First line of the text inside
::first-letter First letter of the text inside
:disabled Disabled (e.g., input with disabled attribute)
:checked Checked input checkbox
:focus Element which has focus
:hover Element over which a mouse cursor hovers
:target Element that matches fragment part of current URL
:root Root element of the document
Example 3
by Martin Kruliš (v1.0) 15
Pseudo-classes Selectors
5. 11. 2015
CSS Selectors
:first-child Element which is the first child of its parent
:last-child Element which is the last child of its parent
:only-child Element which is the only child of its parent
:first-of-type Element which is the first/last/only sibling of its type (e.g., p:first-of-type selects the first p within its parent no matter other element types)
:last-of-type
:only-of-type
:nth-child(e) The expression e in the parenthesis can be B, An, or An+B, where A and B are numeric literals. It selects elements that have exactly An+B-1 preceding children/type-siblings for any n ≥ 0.E.g., 2n selects even items, 2n+1 odd items, …
:nth-of-type(e)
:nth-last-child(e)
:nth-last-of-type(e)
Example 4
by Martin Kruliš (v1.0) 16
Pseudo-classes Selectors
5. 11. 2015
CSS Selectors
:not(X) Negation pseudo-class selects elements that does not match simple selector X
::selection Part of the text selected by user
::before::after
Inserts additional content before/after selected element. An example that inserts Q.E.D. at the end of each proof:p.proof::after{ content: "Q.E.D.";}
by Martin Kruliš (v1.0) 17
Attribute Selectors◦ Select elements with given attribute(s)
[attr] selects elements with attribute attr (the value of the attribute does not matter)
[attr=val] attribute attr with exact value val [attr^=val] attribute that starts with given value
(e.g., a[href^="https"] selects links to secured pages) [attr$=val] attribute that ends with given value [attr*=val] attribute that contains a value as a
substring [attr~=val] attribute with list of whitespace-separated
values where val matches one of the items on the list [attr|=val] attribute with value val or beginning with val immediately followed by ‘-’ (intended for lang)
5. 11. 2015
CSS Selectors
by Martin Kruliš (v1.0) 18
Aggregating Rules◦ One declaration block can be used with multiple
selectors separated by commas1, s2 { properties used for s1 and s2 }
Selector Syntax Pitfalls◦ ul li
consider <ul><li><ol><li> structure◦ p.info vs. p .info
careful with whitespace◦ main ul, ol
main belongs only to the first selector (ol stands alone)
5. 11. 2015
CSS Syntax
by Martin Kruliš (v1.0) 19
Property Values◦ Numerical values (size, angle, duration, …)
font-size: 12pt;◦ Color
background-color: black;◦ Link to external source (e.g., an image)
background-image: url("paper-texture.png");◦ Strings and identifiers
font-family: "Courier New";◦ Specific value enumerated in property definition
border-style: solid;
5. 11. 2015
CSS Properties
by Martin Kruliš (v1.0) 20
Property Values◦ Many properties have aggregated alternations
E.g., border property has three values that correspond to border-width, border-style, and border-color
◦ Color Values List of predefined names (red, black, blue, …)
transparent stands for fully transparent black By RGB value
#00f, #0000ff, rgb(0,0,255), rgb(0%,0%,100%) By RGBA
rgba(0,0,255,1), rgba(0%,60%,10%,0.2) By HSL and HSLA (analogically to RGB/RGBA)
5. 11. 2015
CSS Properties
by Martin Kruliš (v1.0) 21
Units for Numeric Values◦ All numbers must have a unit (except for 0)
5. 11. 2015
CSS Properties
cm, mm, in Centimeters, Millimeters, Inches (1in = 2.54cm)
px Pixels (1px = 1/96 in)
pt Typographical points (1pt =1/72 in)
pc Picas (1pc = 12pt)
em Relative to the font-size of current element
ex Relative to the height of ‘x’ in current font size
% Special – relative to some existing/inherited value
vh, vw Relative to 1% of width/height of the viewport
deg Degrees (rotation)
s Seconds
by Martin Kruliš (v1.0) 22
Text Styling◦ Many properties that affect font and text
formatting
5. 11. 2015
CSS Properties
font-family Font used for the text (e.g., Arial)
font-size Size of the font (usually specified in pt)
font-weight Font bold-ness
font-style Makes font italic
font Sets all font properties at once
text-align Alignment of a text block (left, right, center, …)
text-decoration Adds additional decorations (underline, …)
text-indent Indentation of the first line of the text block
line-height Height of all lines in the block
letter-spacing Modifies spacing of letters within words
word-spacing Modifies spacing between adjacent words
by Martin Kruliš (v1.0) 23
Color Properties◦ color – foreground color (text)◦ background-color – fills background continuously
Background Images◦ background-image – URL to external image◦ background-position - location within element◦ background-repeat – used for tile textures◦ background-attachment – whether background is
relative to the document or window
5. 11. 2015
CSS Properties
Example 5
by Martin Kruliš (v1.0) 24
Box Model◦ Border – visible bounding box around contents
Have width, color, and style (solid, dotted, …)◦ Padding – space between content and border◦ Margin – minimal space to nearest border of
another element◦ Properties can be set for each side separately
5. 11. 2015
CSS Properties
Content
padding
border
margin
Another Content
by Martin Kruliš (v1.0) 25
Property Inheritance◦ Some properties inherit their values from parent
HTML elements These properties have inherit value as default E.g., font properties
Setting font at body selector changes entire document
◦ Relative numerical values implicitly use inheritancebody { font-size: 10pt; }h1 { font-size: 150%; } Makes h1 15pt large
5. 11. 2015
Inheritance
by Martin Kruliš (v1.0) 26
Combining Style Properties◦ More than one rule can apply to an element◦ Complex schema of priorities (weights) is defined◦ The priorities are based on
Style sheet origin Selector specificity Order of appearance (latter overrides former)
◦ Importance CSS property may be marked as importantcolor: blue !important; Important properties take precedence
5. 11. 2015
Cascading
by Martin Kruliš (v1.0) 27
Origin Precedence (descending order)1. Transition declarations (will be explained later)2. Important user agent declarations3. Important user declarations4. Important override (by client-script) declarations5. Important author declarations6. Animation declarations (will be explained later)7. Normal override declaration8. Normal author declarations9. Normal user declarations10. Normal user agent declarations
5. 11. 2015
Cascading
Styles in HTML documentor in linked CSS file
Styles provided by browseruser (e.g., via configuration)
Browser (default) style sheets
by Martin Kruliš (v1.0) 28
Selector Specificity◦ Defines priority for selectors from the same origin◦ For given selector , let
= number of ID sub-selectors of = number of class, pseudo-class, and attribute sub-
selectors of = number of type sub-selectors in Concatenation (in sufficiently high base) gives
selector specificity◦ For example #d1 ul li.new span:hover
Has 1 ID, 2 classes, and 3 types ⇨ specificity 123
5. 11. 2015
Cascading
Example 6
by Martin Kruliš (v1.0) 29
@import Rule◦ Include another stylesheet into current one@import "another.css";@import url("another.css"); @import rule must precede all other rules
Except @charset
◦ Import may be media dependent @import url("printer.css") print; Media will be explained later
5. 11. 2015
Importing Style Sheets
by Martin Kruliš (v1.0) 30
Automated Numbering◦ CSS counters are operated by two properties
counter-reset: counterID [ number ]; Initialize given counter (with default or specified
number) counter-increment: counterID;
Increments selected counter by 1
◦ The counter values may be used in ::before and ::after rules in the content property
body { counter-reset: chapter; }h1::before { content: counter(chapter) ". "; counter-increment: chapter;}
5. 11. 2015
Counters
Example 7
by Martin Kruliš (v1.0) 315. 11. 2015
Discussion