Martin Kruliš 5. 11. 2015 by Martin Kruliš (v1.0)1.

by Martin Kruliš (v1.0) 1

Cascading Style SheetsMartin Kruliš

5. 11. 2015


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, ..)


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

…


Styles are assigned to visible elements◦ And affect page rendering

5. 11. 2015


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;


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



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



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>...


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


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>...


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


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


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


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


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


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.";}


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


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


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


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


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


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


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


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


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


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


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


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


@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


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

Date post:	18-Jan-2016
Category:	Documents
Upload:	priscilla-alexander
View:	224 times
Download:	0 times

Martin Kruliš 5. 11. 2015 by Martin Kruliš (v1.0)1.

Documents