Cascading Style Sheets

Cascading Style Sheets
Martin Kruliš by Martin Kruliš (v1.1)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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) by Martin Kruliš (v1.1)

CSS Selectors Example * { ... } body { ... } p { ... } #pageheading { ... } .hlight { ... } <body> <h1 id="pageheading">CSS Examples</h1> <p>Example of using selectors</p> <p>The basic selectors are:</p> <ul> <li>#id</li> <li class="hlight">.class</li> <li>tag selectors</li> <li>* <span class="hlight">universal</span> </li> </ul> </body> by Martin Kruliš (v1.1)

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 by Martin Kruliš (v1.1)

CSS Selectors Example div.info { … } p.info { … } li+li { … } li+li+li { … } section.small p { … } section.small > p {…} <section> <div class="info">...</div> <p class="info">...</p> <ul> <li>first item</li> <li>second item</li> <li>third item</li> <li>fourth item</li> </ul> </section> <section class="small"> <p>Paragraph of smaller text</p> <p>Another one of smaller text</p> by Martin Kruliš (v1.1)

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)

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)

What is the actual color of text here?
Cascading Motivational Example #div1 { color: red; } .blue-text { color: blue; } div { color: green; } … <div id="div1" class="blue-text">…</div> What is the actual color of text here? by Martin Kruliš (v1.1)

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)

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 !important suffix 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)

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 by Martin Kruliš (v1.1)

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)

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)

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)

Discussion by Martin Kruliš (v1.1)

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 1 by Martin Kruliš (v1.1)

CSS Selectors Pseudo-classes 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) by Martin Kruliš (v1.1)

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)

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)

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)

CSS Properties Controlling Whitespace Importing Fonts
All whitespace is treated as uniform separator Except in <pre> element whitespace property Whether whitespace is pre-formated, no-breaking, … Importing Fonts @font-face { font-family: myCustomFont; src: url(myCustomFont.tff); } Supports TTF, OTF, WOFF, SVG, and EOT formats Not all browsers support all formats ( its better to provide multiple src properties with the same font in different formats. by Martin Kruliš (v1.0)

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 by Martin Kruliš (v1.1)

CSS Properties Gradient Backgrounds Shadows
Special values for background property linear-gradient(direction, color1, color2, …) radial-gradient(shape, color1, color2, …) Also repeating- versions Shadows Shadows for whole elements box-shadow: x y blur spread color; Shadows for inner text text-shadow: x y blur color; Example 1 by Martin Kruliš (v1.0)

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 Box model applies to block elements (not inline elements) by Martin Kruliš (v1.1)

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)

CSS Properties Round Borders Custom Images for Borders
Created by specifying radius border-radius: 1-4 values Custom Images for Borders Using repeating image (texture) for element border border-image-* properties -source URL to the image used for border -width Width of the border (i.e., the image) -repeat Whether the image should be repeated or stretched -slice How to slice the image for border sides and corners -outset How much the image extends beyond the border box by Martin Kruliš (v1.0)

Display Element Display Modes Elements have specific ways of rendering
Inline elements (<em>), block elements (<p>), table elements, lists, … display property can override default behavior Most common values are block Standard block element inline Element rendered inline with the text inline-block Small block inserted in text flow none Hidden element (no effect on layout) list-item Default for <li> elements table, table-* Tables rows and cells have specialized formatting CSS3 introduced flex and inline-flex values along with flex* properties. See by Martin Kruliš (v1.0)

Floating Elements Floating Elements
Inline elements that change standard content flow The floating element is placed at left or right side of the page and rest of the contents flows around it float: left; or float: right; Originally intended for narrow side-figures Can be used for page layout (e.g., navigation menu) Other elements may prevent their content to flow around floating elements clear: left; clear: right; clear: both; Specify that on one (or both) sides cannot be a floating element (the content is moved below floating element) Example 3 by Martin Kruliš (v1.0)

Content Positioning Page Rendering Algorithm
The elements and their content are processed from the beginning to the end Each element is positioned according to its size, margins, and display properties (block, inline, …) Except for the floating elements mentioned before This behavior can be modified by positioning static Default page rendering algorithm is used relative Like static, but element is moved relative to its computed position after the layout is created absolute Element is positioned inside closest positioned ancestor fixed Element is fixed within the browser viewport by Martin Kruliš (v1.0)

It does not make sense to set left, width, and right simultaneously
Content Positioning Positioning-related Properties Size properties (for all positioning types) width, height – size of the element contents min-/max- width/height – size limits Location properties (for positioned elements only) top, bottom, left, right Distance from the edge at the corresponding side !!! Width is the width of the contents, not the whole element box !!! Content width right It does not make sense to set left, width, and right simultaneously by Martin Kruliš (v1.0)

Determined by page width
Content Positioning Absolute Positioning Example #absDiv { position: absolute; left: 10px; right: 20px; top: 30px; height: 50px; } absDiv 30px 50px 10px Determined by page width 20px by Martin Kruliš (v1.0)

Content Positioning Positioning-related Properties
Additional properties z-index – depth in the stack of positioned elements Higher number ~ closer to the top opacity – useful (not only) for overlapping elements 0 ~ fully transparent, 1 ~ opaque overflow – what should browser do when element contents does not fit its explicitly-set size visible – content overflows and may overlap hidden – content is cropped to the element boundaries scroll – scroll bars are added and the element has its own viewport in which the whole content is displayed auto – similar to scroll, but scroll bars are initially hidden Example 4 by Martin Kruliš (v1.0)

Page Layout Layout Visual structure of the content blocks of the whole page or its logical part Placement of menu-bar, additional sidebar, page header and footer, … Many different approaches Whether the page scrolls as whole or not How each container handle content overflows … content header footer menu bar side bar by Martin Kruliš (v1.0)

Page Layout Creating Sidebars Floating Sidebars
Quite easy to design, but The sidebars must precede main content It is a little bit tricky to ensure correct sidebar height Absolute/Fixed Sidebars Cover the contents underneath Sidebars can be almost anywhere in the document More modern approach, which can be used for more complex situations than floating sidebars Slightly more difficult to design and code There are other possibilities using grid layout: by Martin Kruliš (v1.0)

Page Layout Additional Tips Use sufficient margins
For floating or absolutely positioned elements margin-left: auto; margin-right: auto; Centers elements with fixed width Матрёшка (Matryoshka) hack Problem with setting accurate width along with padding and border Solution: double the container (e.g., <div><div>) Outer container gets the width (and margin) property, inner container gets the padding and border Relative elements with absolute children Also check out box-sizing CSS3 property, which can override the default behavior of boxing model (so you should not need Matryoshka anymore). However, this property is still marked as experimental. Example 5 by Martin Kruliš (v1.0)

Media Media Types Media Features (Properties) Utilization
Select style sheets for particular media PC screen, printer, projector, handheld devices, … Media Features (Properties) Add additional conditions to the types Viewport size limits, orientation, color depth, … Utilization Attribute media in <style> and <link> elements @media rule inside style sheet @media screen and (min-width: 480px) { CSS rules } by Martin Kruliš (v1.0)

Media Media Query Syntax Media Types
Media type and arbitrary number of media features concatenated with and operator print and (monochrome) Features are either flags or name-value pairs Queries can be concatenated by comma Which acts as or operator Media Types all All possible media inputs (default) screen Screen of a computer (laptop, tablet, …) print Printer speech Screen reader that presents the page in vocal form by Martin Kruliš (v1.0)

Media Media Features Additional properties required from the media
width height Length that specifies width/height of the viewport. Property accepts min- and max- prefixes, which are more useful (e.g., min-width: 300px) device-width device-height Width/height of the whole rendering surface (also accepts min- and max- prefixes) orientation Possible values portrait and landscape aspect-ratio The width/height ratio of the view port color Indicating a color device; optional value indicate number of bits per channel (e.g., min-color: 8) monochrome Indicating a monochrome/greyscale device resolution Output smoothness in dpi or dpcm by Martin Kruliš (v1.0)

Responsive Web Responsive Web Design
The web adjusts layout (and other properties) to the properties of display device So it can effectively present its contents on small handheld devices as well as on 4K monitors Possible approaches Important measurements are expressed relatively in %, vh, and vw units Multiple layouts (style sheets) are prepared for different devices (and selected by media conditions) There are frameworks and boilerplates that help with creation of responsive web design (e.g., Bootstrap). Example 6 by Martin Kruliš (v1.0)

Filters Graphical Filters Rendering effects performed on the element
filter: filter_fnc1(…) filter_fnc2(…) … blur(radius) Gaussian blur effect brightness(%) Applies linear multiplier contrast(%) Adjusts contrast of the image drop-shadow(…) Creates shadow given particular direction, color, … grayscale(%) Unifies color components into greyscale output hue-rotate(deg) Adjusts hue component of HSB/HSL color space invert(%) Performs color inversion saturate(%) Linearly multiplies the saturation color component sepia(%) Creates sepia (old photograph) effect by Martin Kruliš (v1.0)

Transformations Projection Transformations
Linear transformations of projection matrix transform: func1(…) func2(…) … 2D transformations translate(x,y) Translate by vector (x,y) rotate(deg) Rotation around z-axis (perpendicular to screen) scale(x,y) Enlarge or shrink by given factor skew(xdeg,ydeg) skewX(deg) skewY(deg) Create a skew effect (asymmetrical rotation) matrix(…) Specify linear transformation matrix by Martin Kruliš (v1.0)

Transformations Projection Transformations 3D transformations
Analogical to 2D case (except for skew) rotate -> rotate3d, rotateX, rotateY, rotateZ matrix(6 vals) -> matrix3d(16 vals) perspective() – distance between z-plane and user Additional properties transform-origin – center of transformation (rotate) transform-style – flat or preserve-3d transform-box –bounding box for the transformation border-box, fill-box, or view-box Make sure to use perspective() BEFORE rotate(): transform: perspective(600px) rotateY(30deg); -- GOOD transform: rotateX(25deg) perspective(300px); -- WILL NOT WORK PROPERLY by Martin Kruliš (v1.0)

Transitions CSS Property Transitions
Modifications of CSS properties are animated When pseudo-class changes (e.g., :hover or :target) Client-side script changes classes, style attribute, … Properties transition-property Which CSS properties are animated transition-duration How long should each animation last transition-timing-function Interpolation function used for the animation (linear, ease, ease-in, ease-out, …) transition-delay Delay before the change is started transition Sets all previous properties at once Interesting combination of Transitions a Transformations: open YouTube and write “do the harlem shake” into the search bar. Example 7 by Martin Kruliš (v1.0)

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 8 by Martin Kruliš (v1.1)

Discussion by Martin Kruliš (v1.0)

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback