Health-promoting workplaces in Orkla Håkon Mageli, Group Director 1.
CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML...
Transcript of CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML...
![Page 1: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/1.jpg)
FALL 2017CS 498RK
CSSStyle
SheetsCascading
![Page 2: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/2.jpg)
WHAT IS CSS?
language for specifying the presentations of Web documents
www.w3.org/TR/CSS/
![Page 3: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/3.jpg)
IF THERE WAS NO CSS…
Håkon Wium Lie Interview
text in images
![Page 4: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/4.jpg)
1989 2015
1994: CSS draft Håkon Wium Lie
1993: 1st HTML spec Tim Berners-Lee
1996: CSS 1 W3C release
Timeline
1999-2012: CSS3 released in modules
CSS4?
HTML2 HTML3
![Page 5: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/5.jpg)
Separation of CONTENT from PRESENTATION
![Page 6: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/6.jpg)
img { border:1px solid black; } .photo { width:300px; } .photo h3 { font-weight:bold; } ...
CSS RULES
describe how markup should be rendered
visual properties
positioning in page’s layout
![Page 7: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/7.jpg)
.photo {
width:300px;
}
CSS RULESSelector
Declaration
![Page 8: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/8.jpg)
<!DOCTYPE html> <html> ... <body> <div class="photo"> <h3>My first photo</h3> <img src="picture1.jpg"/>
</div> ... </body> </html>
.photo { width:300px; } .photo h3 { font-weight:bold; } img { border:1px solid black; } ...
CSS SELECTORS
map HTML elements to CSS rules
![Page 9: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/9.jpg)
img {
border:1px solid black;
}
selects all elements matching the tag name
html:
ELEMENT SELECTORS
css:<img src="picture1.jpg"/>
![Page 10: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/10.jpg)
<div class=“photo”>…
.photo {
width:300px;
}
html:css:
class SELECTORS
![Page 11: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/11.jpg)
<div id=“llama-photo”>…
#llama-photo {
width:300px;
}
html:css:
id SELECTORS
![Page 12: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/12.jpg)
<div class="photo"> <h3>My first photo</h3>…
HIERARCHICAL SELECTORS
www.w3schools.com/cssref/css_selectors.asp
.photo h3 {
font-weight:bold;
}
html:css:
![Page 13: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/13.jpg)
Which selectors promote the most reuse?
![Page 14: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/14.jpg)
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)
![Page 15: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/15.jpg)
LINKING TO HTML
higher priority
<link rel=“stylesheet" href=“gallery.css" type="text/css"/>
<html> <head>
<style> h1 {color:red;} p {color:blue;}
</style>
<div style="color:blue;text-align:center">
(1)
(2)
(3)
![Page 16: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/16.jpg)
Hello World!
CSS PROPERTIES
background
background-image
color
font-family
font-size
font-weight
font-style
text-align
text-decoration
![Page 17: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/17.jpg)
CSS3 PROPERTIES
border-radius@font-faceHello World!
box-shadow
text-shadow
background: linear-gradient(…
![Page 18: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/18.jpg)
Box Model
control over white space
CONTENT
PADDING
BORDER
MARGIN
![Page 19: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/19.jpg)
Box Model
CONTENT
PADDING
BORDER
MARGIN
width
height
width and height properties refer to content area
to calculate full-size of the element add padding, border, and margins
VALUES
default value is auto
length +/- (px, em, in, cm, pt)
% of parent’s width
![Page 20: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/20.jpg)
Box Model: Margin
CONTENT
PADDING
BORDER
MARGINPROPERTIES margin (shorthand) margin-top
margin-bottom
margin-left margin-right
VALUES
default value is 0
length +/- (px, em, in, cm, pt)
% of parent’s width auto
margin-top
margin-bottom margin-rightmargin-left
![Page 21: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/21.jpg)
Box Model: Border
CONTENT
PADDING
BORDER
MARGINPROPERTIES border(shorthand)
border-top
border-bottom
border-left
border-right
—————————————————
border-width
border-style
border-color
border-width
border-bottom
border-right
![Page 22: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/22.jpg)
Box Model: Padding
CONTENT
PADDING
BORDER
MARGINPROPERTIES padding (shorthand) padding-top padding-bottom padding-left padding-right
VALUES
default value is 0 length (px, em, in, cm, pt)
% of the element’s width
padding-top
padding-bottom
padding-rightpadding-left
![Page 23: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/23.jpg)
LAYOUT
rendered with preceding and following line breaks (stacked)
line breaks within nested elements collapsed if no other content
width of auto (default) will expand to fill entire width
www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding
Block
Inlinerendered on a common baseline or wrap onto a new baseline below
margin, width, height properties don’t affect these elements
can only contain text or other inline elements
![Page 24: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/24.jpg)
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 different units
![Page 25: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/25.jpg)
positionVALUE DESCRIPTION
fixed positioned relative to browser window; will not move when window is scrolled
static default. positioned by the flow model; unaffected by top, bottom, left, right
relative positioned relative to its normal position
absolute positioned relative to the first ancestor where position!=static
use with top
bottom left right
![Page 26: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/26.jpg)
displayVALUE DESCRIPTION
block default if the element is a block-element (e.g., div) displays element as block element
inline default if the element is an inline element (e.g., span) displays element as inline element
table element behaves like table element
www.w3schools.com/cssref/pr_class_display.asp
none element not displayed (doesn’t appear in DOM)
not the same as visibility: hidden;
![Page 27: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/27.jpg)
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
![Page 29: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/29.jpg)
SOLUTION
.outer { height: 300px; background-color: #144057;
}
.inner { width: 100px; height: 100px; background-color: #B6C4C9;
margin: 0 auto; }
<div class="outer"> <div class="inner"> </div> </div>
![Page 30: CSS - uiuc-web-programming.github.io · 1989 2015 1994: CSS dra! Håkon Wium Lie 1993: 1st HTML spec Tim Berners-Lee 1996: CSS 1 W3C release Timeline 1999-2012: CSS3 released in modules](https://reader033.fdocuments.us/reader033/viewer/2022060220/5f07059e7e708231d41ae835/html5/thumbnails/30.jpg)
NEXT CLASS: JAVASCRIPT
courses.engr.illinois.edu/cs498rk1/