CS498RK SPRING 2020 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
THE POWER OF CSS CSS Zen Garden
Timelin e 1996: CSS 1 1993: 1st HTML spec Tim Berners-Lee W3C release CSS4? 1999-2012: CSS3 released in modules HTML2 HTML3 1989 1994: CSS draft Håkon Wium Lie
Separatio n of CONTENT fro m PRESENTATION
CSS RULES describe how markup img { should be rendered border:1px solid black; } . photo { visual properties width:300px; } positioning in page’s . photo h3 { font-weight:bold; layout } ...
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; }
PSEUDO-CLASSES Enhance existing selectors by defining a particular state Syntax: . selector :pseudo-class :hover, :visited, :focus :first-child, :last-child, :nth-child https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
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, border, and margins height VALUES width default value is auto px, em, rem, in, cm, pt, %, vw, vh
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 px, em, rem, in, cm, pt, %, vw, vh 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-top PADDING padding-top padding-bottom CONTENT padding-left padding-right VALUES default value is 0 padding-left padding-right px, em, rem, in, cm, pt, padding-bottom %, vw, vh
SHORTHAND top, right, bottom, left 10px padding: 10px; top, bottom 1em | right, left 1.5em padding: 1em 1.5em top 6pt | right, left 1em | bottom 12pt padding: 6pt 1em 12pt top 2px | right 4px | bottom 6px | left 8px padding: 2px 4px 6px 8px
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,rem , % ) em: relative to the font-size of its direct or nearest parent rem: relative to the html (root) font-size. be careful when mixing different units
position VALUE DESCRIPTION default. positioned by the flow model; static unaffected by top, bottom, left, 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 table element behaves like table element none element not displayed (doesn’t appear in DOM) no t th e sam e a s 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 often 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 suffers from presentational div bloat
Separatio n of CONTENT fro m PRESENTATION? good in theory, doesn’t always work in practice DOMs are often 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
EXTEND .text-upper { .text-upper, font-size: 14px; .product-title, letter-spacing: 0.1em; .card-content { compile s int o text-transform: uppercase; font-size: 14px; } letter-spacing: 0.1em; text-transform: uppercase; .product-title { @extend .text-upper } } .card-content { @extend .text-upper } All examples are written in SASS
NEXT CLASS: JAVASCRIPT Course Web Page https://uiuc-web-programming.gitlab.io/sp20/ Piazza https://piazza.com/illinois/spring2020/cs498rk
Recommend
More recommend
