Cascading Style Sheets and Webpage Layout

1. Cascading Style Sheetsand Webpage Layout Martin Kruliš by Martin Kruliš (v1.0)

2. CSS Revision • Last time we covered … • CSS principles and syntax • Selectors • id, class, type, and universal selector • Selector combinations and aggregations • Pseudo-classes and attribute selectors • Cascading and selector specificity • Basic properties • Fonts, colors, backgrounds • Box model (margins, paddings, borders) by Martin Kruliš (v1.0)

3. More on 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)

4. More on 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)

5. More on 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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20. Transformations • Projection Transformations • Linear transformations of projection matrix transform: func1(…) func2(…) … • 2D transformations by Martin Kruliš (v1.0)

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

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

23. Compatibility Issues • CSS Development • CSS3 has modular structure • Modules have their own implementation lifecycle • Browsers usually introduce new features using vendor-specific prefixes for CSS properties • -moz- Mozilla (Firefox) • -webkit- Chrome, new Opera (old Opera had -o-) • -ms- Microsoft Internet Explorer • Browsers should ignore unknown properties -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; by Martin Kruliš (v1.0)

24. Discussion by Martin Kruliš (v1.0)