CS 498RK SPRING 2019 Cascadin g Sheet s CSS Styl e
WHAT IS CSS? language for specifying the presentations of Web documents www.w3.org/TR/CSS/
IF THERE WAS NO CSS… tex t i n image s Håkon Wium Lie Interview
Timelin e 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
Separatio n of CONTENT fro m PRESENTATION
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; } ...
CSS RULES Selecto r . photo { width:300px; } Declaratio n
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
ELEMENT SELECTORS htm l : < img src="picture1.jpg"/> cs s : img { border:1px solid black; } selects all elements matching the tag name
class SELECTORS htm l : < div class=“photo”>… cs s : . photo { width:300px; }
id SELECTORS htm l : < div id=“llama-photo”>… cs s : #llama-photo { width:300px; }
HIERARCHICAL SELECTORS < div class="photo"> htm l : < h3 >My first photo</ h3 >… cs s : . photo h3 { font-weight:bold; } www.w3schools.com/cssref/css_selectors.asp
Which selectors promote the most reuse ?
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 )
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"> highe r priorit y
CSS PROPERTIES color background font-family background-image font-size Hello World! font-weight font-style text-align text-decoration
CSS 3 PROPERTIES text-shadow Hell o Worl d ! @font-face border-radius background: linear-gradient(… box-shadow
B ox Mode l MARGIN BORDER PADDING CONTENT control over white space
B ox Mode l 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
B ox Mode l : Margi n 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
B ox Mode l : Borde r 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
B ox Mode l : Paddin g 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
LAYOUT rendered with preceding and following line breaks (stacked) Bloc k 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 Inlin e 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
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
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 us e wit h 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
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 no t th e sam e a s www.w3schools.com/cssref/pr_class_display.asp visibility: hidden;
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
Desig n Challeng e : horizontally center a <div> CODEPEN
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; }
Desig n Challeng e : vertically center a <div> CODEPEN
SOLUTION .outer { height: 300px; background-color: #144057; position:relative; } know n heigh t ! <div class="outer"> <div class="inner"> .inner { </div> width: 100px; </div> height: 100px; background-color: #B6C4C9; position: absolute; top: 50%; margin-top: -50px; }
Desig n Challeng e : vertically center a <div> of unknown height CODEPEN
SOLUTION .table-outer { width: 100%; display: table; } cs s table s ! .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; }
Separatio n of CONTENT fro m PRESENTATION? purel y presentationa l htm l ! <div class=“table-outer"> < div class="outer"> < div class="inner"></ div > </ div > </div> a lot of HTML su ff ers from presentational div bloat
Separatio n of CONTENT fro m 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.]
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
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
NESTING .class { div { .class div { font-family: $nav_font; font-family: $nav_font; } } a { .class a { compile s int o 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
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; compile s int o } 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
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.” ca n b e implemente d i n Javascrip t Håkon Wium Lie Interview
NEXT CLASS: JAVASCRIPT courses.engr.illinois.edu/cs498rk1/
Recommend
More recommend
