Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
Martin Kruliš by Martin Kruliš (v1.1)
2
Evolution of Web Presentation
JavaScript, Flash, … Scripting SVG Multimedia CSS CSS 3.0 Presentation & Design HTML 4.01 HTML HTML5 time Structure & Semantics XHTML data-* attributes MathML by Martin Kruliš (v1.1)
3
CSS and HTML Content CSS Introduction … font: 20pt Calibri;
color: brown; <h1>CSS Introduction</h1> CSS Introduction … HTML provides semantics: “This is a heading” CSS provides visual properties (font, color, ..) by Martin Kruliš (v1.1)
4
Cascading Style Sheets
Document Object Model <html> <head>...</head> <body> <h1>Text</h1> <p> Some <b>bold</b> and some plain text. </p> ... </body> </html> Document body h1 p Text Some and some plain text. b bold … by Martin Kruliš (v1.1)
5
Cascading Style Sheets
Styles are assigned to visible elements And affect page rendering Document body h1 p Text Some and 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.1)
6
Cascading Style Sheets
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 ( ) Fixes serious problems of CSS 2 Replaces problematic features with already implemented properties from existing browsers by Martin Kruliš (v1.1)
7
Cascading Style Sheets
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 by Martin Kruliš (v1.1)
8
Embedding CSS Element <style> Embedded CSS within HTML document
<!DOCTYPE HTML> <html> <head> <title>CSS Example</title> <style type="text/css"> body { font: 12pt Calibri; } p { margin: 10px; ... </style> </head> <body> Element <style> Embedded CSS within HTML document Placed in header Element contents must be in CSS syntax Useful for single-file pages and for faster loading via HTTP by Martin Kruliš (v1.1)
9
Linking CSS Linking External Style Sheet File
Separate files for separate languages Better code (style sheet) reusability <!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.1)
10
Inline CSS 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) <!DOCTYPE HTML> <html> <body> <h1 style="color: red;">Red Heading</h1> ... by Martin Kruliš (v1.1)
11
CSS Syntax Cascading Style Sheets
Simple plain-text syntax based on English keywords File is a sequence of rules selector { 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 Declaration block by Martin Kruliš (v1.1)
12
CSS Selectors Selectors Simple declarative query-like language
Basic selector types Element name selector p 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) Example 1 by Martin Kruliš (v1.1)
13
CSS Selectors 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 A nice training for CSS selectors may be found at Example 2 by Martin Kruliš (v1.1)
14
CSS Selectors Pseudo-classes Selectors
Usually used in with another selector (e.g., a:visited) :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.1)
15
CSS Selectors Pseudo-classes Selectors Example 4 :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.1)
16
CSS Selectors Pseudo-classes 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.1)
17
CSS Selectors 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) by Martin Kruliš (v1.1)
18
CSS Syntax Aggregating Rules Selector Syntax Pitfalls
One declaration block can be used with multiple selectors separated by comma s1, 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) by Martin Kruliš (v1.1)
19
CSS Properties 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; by Martin Kruliš (v1.1)
20
CSS Properties 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) by Martin Kruliš (v1.1)
21
CSS Properties Units for Numeric Values
All numbers must have a unit (except for 0) 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.1)
22
CSS Properties Text Styling
Many properties that affect font and text formatting 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.1)
23
CSS Properties Color Properties Background Images
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 Example 5 by Martin Kruliš (v1.1)
24
CSS Properties 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 by Martin Kruliš (v1.1)
25
Margins (typically) collapse – i.e., adjacent margins overlap
CSS Properties Box Model Content padding border margin Another Content Margins (typically) collapse – i.e., adjacent margins overlap by Martin Kruliš (v1.1)
26
Inheritance 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 inheritance body { font-size: 10pt; } h1 { font-size: 150%; } Makes h1 15pt large What is the difference between body { font: 12pt Arial; } and * { font: 12pt Arial; } ? by Martin Kruliš (v1.1)
27
Cascading 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 important color: blue !important; Important properties take precedence The complete Cascade rules specification are here by Martin Kruliš (v1.1)
28
Cascading Origin Precedence (descending order)
Transition declarations (will be explained later) Important user agent declarations Important user declarations Important override (by client-script) declarations Important author declarations Animation declarations (will be explained in adv. lectures) Normal override declaration Normal author declarations Normal user declarations Normal user agent declarations Styles in HTML document or in linked CSS file The complete Cascade rules specification are here Styles provided by browser user (e.g., via configuration) Browser (default) style sheets by Martin Kruliš (v1.1)
29
Cascading 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 Example 6 by Martin Kruliš (v1.1)
30
Importing Style Sheets
@import Rule Include another stylesheet into current one @import "another.css"; @import url("another.css"); @import rule must precede all other rules Import may be media dependent @import url("printer.css") print; Media will be explained later by Martin Kruliš (v1.1)
31
Counters 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; } Example 7 by Martin Kruliš (v1.1)
32
Discussion by Martin Kruliš (v1.1)
Similar presentations
