1 / 55

Cascading Style Sheets

Learn about the evolution of web presentation with Cascading Style Sheets, JavaScript, Flash, SVG, and multimedia. Explore the different versions of CSS and their features.

dennisarthur
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Evolution of Web Presentation Scripting JavaScript, Flash, … Multimedia SVG CSS CSS 3.0 Presentation & Design HTML4.01 HTML5 HTML time Structure & Semantics XHTML data-* attributes MathML by Martin Kruliš (v1.1)

  3. CSS and HTML Content 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 b and some plain text. bold by Martin Kruliš (v1.1)

  5. Cascading Style Sheets • Styles are assigned to visible elements • And affect page rendering Document font: 12pt Arial; background-color: #fff; body h1 p … font-size: 24pt; margin: 10px 0; Text Some b and some plain text. text-align: justify; padding: 5px; bold 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 (2004-2011) • 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 <!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 withinHTML document • Placed in header • Element contents mustbe in CSS syntax • Useful for single-filepages and for fasterloading 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> ... styles.css body { font: 12pt Calibri; } p { margin: 10px; } ... 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 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 Declaration block by Martin Kruliš (v1.1)

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

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

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

  15. 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"> <section> <p>Paragraph of smaller text</p> </section> <p>Another one of smaller text</p> </section> by Martin Kruliš (v1.1)

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

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

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

  19. 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 importantcolor: blue !important; • Important properties take precedence by Martin Kruliš (v1.1)

  20. 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 !importantsuffix Styles in HTML documentor in linked CSS file Styles provided by browser user (e.g., via configuration) Browser (default) style sheets by Martin Kruliš (v1.1)

  21. Cascading • Selector Specificity • Defines priority for selectors from the same origin • For given selector , let • = number of IDsub-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 ulli.newspan:hover • Has 1 ID, 2 classes, and 3 types ⇨ specificity 123 by Martin Kruliš (v1.1)

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

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

  24. CSS Properties • Units for Numeric Values • All numbers must have a unit (except for 0) by Martin Kruliš (v1.1)

  25. Discussion by Martin Kruliš (v1.1)

  26. CSS Selectors • Pseudo-classes Selectors • Usually used in with another selector (e.g., a:visited) Example 1 by Martin Kruliš (v1.1)

  27. CSS Selectors • Pseudo-classes Selectors by Martin Kruliš (v1.1)

  28. CSS Selectors • Pseudo-classes Selectors by Martin Kruliš (v1.1)

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

  30. CSS Properties • Text Styling • Many properties that affect font and text formatting by Martin Kruliš (v1.1)

  31. CSS Properties • Controlling Whitespace • 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 by Martin Kruliš (v1.0)

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

  33. CSS Properties • Gradient Backgrounds • 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)

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

  35. CSS Properties • Box Model padding border margin Content Margins (typically) collapse – i.e., adjacent margins overlap Another Content by Martin Kruliš (v1.1)

  36. CSS Properties • Round Borders • Created by specifying radius border-radius: 1-4 values • Custom Images for Borders • Using repeating image (texture) for element border • border-image-* properties by Martin Kruliš (v1.0)

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

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

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

  40. 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 Content It does not make sense to set left, width, and right simultaneously width right by Martin Kruliš (v1.0)

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

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

  43. 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 scrollsas whole or not • How each container handlecontent overflows • … header content menu bar side bar footer by Martin Kruliš (v1.0)

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

  45. 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 Example 5 by Martin Kruliš (v1.0)

  46. Media • Media Types • 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)

  47. Media • Media Query Syntax • 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 by Martin Kruliš (v1.0)

  48. Media • Media Features • Additional properties required from the media by Martin Kruliš (v1.0)

  49. 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) Example 6 by Martin Kruliš (v1.0)

  50. Filters • Graphical Filters • Rendering effects performed on the element filter: filter_fnc1(…) filter_fnc2(…) … by Martin Kruliš (v1.0)

More Related