css
play

CSS Style WHAT IS CSS? language for specifying the presentations - PowerPoint PPT Presentation

Apr 12, 2023 •246 likes •664 views

CS 498RK FALL 2016 Cascading Sheets CSS Style WHAT IS CSS? language for specifying the presentations of Web documents www.w3.org/TR/CSS/ IF THERE WAS NO CSS text in images Hkon Wium Lie Interview Timeline 1993: 1st HTML spec

  1. CS 498RK FALL 2016 Cascading Sheets CSS Style

  2. WHAT IS CSS? language for specifying the presentations of Web documents www.w3.org/TR/CSS/

  3. IF THERE WAS NO CSS… text in images Håkon Wium Lie Interview

  4. Timeline 1993: 1st HTML spec 1996: CSS 1 Tim Berners-Lee W3C release CSS4? 1999-2012: CSS3 released in modules HTML2 HTML3 1989 2015 1994: CSS dra fu Håkon Wium Lie

  5. Separation of CONTENT from PRESENTATION

  6. CSS RULES describe how markup img { border:1px solid black; should be rendered } . photo { visual properties width:300px; } . photo h3 { positioning in page’s layout font-weight:bold; } ...

  7. CSS RULES Selector . photo { width:300px; } Declaration

  8. CSS SELECTORS <!DOCTYPE html> . photo { < html > width:300px; ... } < body > . photo h3 { < div class="photo"> font-weight:bold; < h3 >My first photo</ h3 > } < img src="picture1.jpg"/> img { </ div > border:1px solid black; ... } </ body > ... </ html > map HTML elements to CSS rules

  9. ELEMENT SELECTORS html: < img src="picture1.jpg"/> css: img { border:1px solid black; } selects all elements matching the tag name

  10. class SELECTORS html: < div class=“photo”>… css: . photo { width:300px; }

  11. id SELECTORS html: < div id=“llama-photo”>… css: #llama-photo { width:300px; }

  12. HIERARCHICAL SELECTORS < div class="photo"> html: < h3 >My first photo</ h3 >… css: . photo h3 { font-weight:bold; } www.w3schools.com/cssref/css_selectors.asp

  13. Which selectors promote the most reuse ?

  14. WHY CASCADING? more than one rule can apply to an HTML element priority rules for resolving conflicts more specific = higher priority (class trumps element) some properties ( font-size ) are inherited, while others aren’t ( border , background )

  15. LINKING TO HTML (1) <link rel=“stylesheet" href=“gallery.css" type="text/css"/> (2) <html> <head> < style > h1 {color:red;} p {color:blue;} </ style > (3) <div style ="color:blue;text-align:center"> higher priority

  16. CSS PROPERTIES color background font-family background-image font-size Hello World! font-weight font-style text-align text-decoration

  17. CSS 3 PROPERTIES text-shadow Hello World! @font-face border-radius background: linear-gradient(… box-shadow

  18. Box Model MARGIN BORDER PADDING CONTENT control over white space

  19. Box Model MARGIN width and height BORDER properties refer to content area PADDING CONTENT to calculate full-size of the element add padding, height border, and margins VALUES width default value is auto length +/- (px, em, in, cm, pt) % of parent’s width

  20. Box Model: Margin MARGIN margin-top PROPERTIES BORDER margin (shorthand) margin-top PADDING margin-bottom CONTENT margin-left margin-right VALUES default value is 0 length +/- (px, em, in, cm, pt) % of parent’s width auto margin-left margin-bottom margin-right

  21. Box Model: Border MARGIN PROPERTIES BORDER border(shorthand) PADDING border-top CONTENT border-bottom border-left border-right border-right ————————————————— border-width border-width border-style border-bottom border-color

  22. Box Model: Padding MARGIN PROPERTIES BORDER padding (shorthand) PADDING padding-top padding-top padding-bottom CONTENT padding-left padding-right VALUES padding-left padding-right default value is 0 length (px, em, in, cm, pt) padding-bottom % of the element’s width

  23. LAYOUT rendered with preceding and following line breaks (stacked) Block line breaks within nested elements collapsed if no other content width of auto (default) will expand to fill entire width rendered on a common baseline or wrap onto a new baseline below Inline margin, width, height properties don’t a ff ect these elements can only contain text or other inline elements www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

  24. UNITS absolute ( px , in , cm , pt ) vs relative ( em , % ) em relative to the font-size of the element (or its parent when used to set font-size ) be careful when mixing di ff erent units

  25. position VALUE DESCRIPTION default. positioned by the flow model; static una ff ected by top, bottom, le fu , right positioned relative to browser window; fixed use with will not move when window is scrolled top bottom positioned relative to its normal position relative left right positioned relative to the first ancestor absolute where position!=static

  26. display VALUE DESCRIPTION default if the element is an inline element ( e.g., span ) inline displays element as inline element default if the element is a block-element ( e.g., div ) block displays element as block element element behaves like table element table element not displayed (doesn’t appear in DOM) none not the same as www.w3schools.com/cssref/pr_class_display.asp visibility: hidden;

  27. float breaks with the flow model pushes element to left or right , allowing other elements to wrap around it use clear ( left , right , both ) to force other elements below floated ones o fu en used to flow text around images

  28. Design Challenge: horizontally center a <div> CODEPEN

  29. SOLUTION .outer { height: 300px; background-color: #144057; } <div class="outer"> <div class="inner"> .inner { </div> width: 100px; </div> height: 100px; background-color: #B6C4C9; margin: 0 auto; }

  30. Design Challenge: vertically center a <div> CODEPEN

  31. SOLUTION .outer { height: 300px; background-color: #144057; position:relative; } known height! <div class="outer"> <div class="inner"> .inner { </div> width: 100px; </div> height: 100px; background-color: #B6C4C9; position: absolute; top: 50%; margin-top: -50px; }

  32. Design Challenge: vertically center a <div> of unknown height CODEPEN

  33. SOLUTION .table-outer { width: 100%; display: table; } css tables! .outer { <div class=“table-outer"> height: 200px; <div class="outer"> background-color: #144057; <div class="inner"> </div> display: table-cell; </div> vertical-align: middle; </div> } .inner { width: 100px; height: 50%; background-color: #B6C4C9; }

  34. Separation of CONTENT from PRESENTATION? purely presentational html! <div class=“table-outer"> < div class="outer"> < div class="inner"></ div > </ div > </div> a lot of HTML su ff ers from presentational div bloat

  35. Separation of CONTENT from PRESENTATION? good in theory, doesn’t always work in practice DOMs are o fu en cluttered with presentational HTML Add higher-level design attributes to CSS 
 ( i.e., CSS3 implemented rounded corners ) Research: Cascading Tree Sheets (CTS) [Benson et al.]

  36. CSS PREPROCESSORS languages that extend CSS in meaningful ways features: variables, nesting, mixins, inheritance shrinks developer’s codebase and compiles into CSS popular CSS preprocessors: LESS and SASS

  37. VARIABLES $heading_font:'Source Sans Pro', sans-serif; $body_font: 'Raleway', sans-serif; $nav_font: 'Maven Pro', sans-serif; $text_color: #181818; $attention_color: #ff500a; body { font-family: $body_font; font-size: 14px; color: $text_color; } … All examples are written in SASS

  38. NESTING .class { div { .class div { font-family: $nav_font; font-family: $nav_font; } } a { .class a { compiles into color: $attention_color; color: $attention_color; text-decoration: none; text-decoration: none; } } li { .class li { margin-bottom: 10px; margin-bottom: 10px; } } } All examples are written in SASS

  39. MIXINS .small-box { -webkit-border-radius: 5px; @mixin border-radius($radius) { -moz-border-radius: 5px; -webkit-border-radius: $radius; -ms-border-radius: 5px; -moz-border-radius: $radius; border-radius: 5px; -ms-border-radius: $radius; compiles into } border-radius: $radius; } .big-box { -webkit-border-radius: 10px; .small-box { @include border-radius(5px); } -moz-border-radius: 10px; .big-box { @include border-radius(10px); } -ms-border-radius: 10px; border-radius: 10px; } All examples are written in SASS

  40. CSS LIMITATION? “ Having a constraint solver allows you to express relationships between arbitrary elements and have conflicts resolved automagically . However, things can get complex when elements disappear and new ones arrive, like they do through DOM operations. Circular dependencies must also be handled gracefully. Therefore, the idea of allowing CSS to express layout constraints between any elements were dropped at an early stage.” can be implemented in Javascript Håkon Wium Lie Interview

  41. NEXT CLASS: JAVASCRIPT courses.engr.illinois.edu/cs498rk1/

Recommend

More recommend