CSS WORKSHOP Design Principles for Web Standards.
-
Upload
arnold-greene -
Category
Documents
-
view
217 -
download
0
Transcript of CSS WORKSHOP Design Principles for Web Standards.
![Page 1: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/1.jpg)
CSSWORKSHOP
Design Principles for Web Standards
![Page 2: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/2.jpg)
“Every line of CSS you write is a suggestion. You are not dictating how the HTML should be rendered; you are suggesting how the HTML should be rendered.”
Jeremy Keithhttps://adactio.com/journal/7653
![Page 3: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/3.jpg)
CSS RULES
p.introduction {line-height: 1.5;text-align: center;margin-bottom: 1rem;
}
selector
propertyvalue
declaration
![Page 4: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/4.jpg)
CASCADING PRINCIPLES
Browser's default
User's styles
Author's styles
![Page 5: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/5.jpg)
INHERITANCE
<h1>The headline
<em>is</em> important!</h1>
![Page 6: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/6.jpg)
SELECTORS
Selectors allow us to target a specific HTML element to apply rules to it in a CSS declaration.
http://www.w3.org/TR/selectors/
![Page 7: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/7.jpg)
SELECTORS- Type Selectors- ID Selectors- Class Selectors- Contextual Selectors- Attribute Selectors- Pseudo-classes Selectors- Pseudo-elements Selectors- Adjacent Selectors
![Page 8: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/8.jpg)
p {font-size: 0.9em
}
TYPE SELECTORS
![Page 9: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/9.jpg)
#main {border: 1px solid;
}
ID SELECTORS
![Page 10: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/10.jpg)
.alert {color: #C00;
}
CLASS SELECTORS
![Page 11: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/11.jpg)
p span{font-size: 90%;
}
CONTEXTUAL SELECTORS
![Page 12: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/12.jpg)
input[type=submit] {color: #FFF;background: #C00;
}
ATTRIBUTE SELECTORS
![Page 13: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/13.jpg)
a:hover {text-decoration: none;
}
PSEUDO-CLASSES SELECTORS
![Page 14: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/14.jpg)
li:last-child {border: none;
}
STRUCTURAL PSEUDO-CLASSES
![Page 15: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/15.jpg)
p::before {content: ‘>’;
}
PSEUDO-ELEMENTS SELECTORS
![Page 16: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/16.jpg)
/* Descendents */
#main h2 {…}
#main > h2 {…}
/* Siblings */
h2 ~ h3 {…}
h2 + h3 {…}
CHILD & ADJACENT SELECTORS
![Page 17: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/17.jpg)
SELECTOR SPECIFICITY
![Page 18: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/18.jpg)
SELECTOR SPECIFICITY
- Equal specificity: the latest rule is the one that counts.
- Unequal specificity: the more specific rule is the one that counts.
![Page 19: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/19.jpg)
PROPERTIES AND VALUES
- Font &Text Styles- Color & Shape- Display & Dimensions- Positioning and Layout
![Page 20: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/20.jpg)
SELECTORS
Hands-on
![Page 21: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/21.jpg)
FONT & TEXT STYLES
My text
p.mytext {font-family:
Arial, sans-serif;font-size: 2em;font-weight: bold;
}
![Page 22: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/22.jpg)
FONT & TEXT STYLES
M Y T E X T
p.mytext {…text-align: center;letter-spacing: 0.3em;text-transform: uppercase;
}
![Page 23: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/23.jpg)
COLOR & SHAPE
M Y T E X T
p.mytext {…color: #00CC33;background: #FFFFF;border-weight: 5px;border-type: solid;border-color: #FF0000;
}
![Page 24: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/24.jpg)
COLOR & SHAPE
M Y T E X T
p.mytext {…color: #0C3;background: #FFF;border: 5px solid #F00;
}
![Page 25: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/25.jpg)
COLOR & SHAPE
M Y T E X T
p.mytext {…background-image:
url(myimage.jpg);background-position: 0 0;background-repeat: no-repeat;
}
![Page 26: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/26.jpg)
BASICS
Hands-on
![Page 27: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/27.jpg)
DISPLAY & DIMENSIONS
When your browser displays an element, the element takes up space. You can think of all HTML elements as boxes. All boxes have certain dimensions and are specified by four properties: a content area of the element (e.g., a picture, a text header, etc.) and the optional padding, border and margin properties.
http://docs.webplatform.org/wiki/tutorials/box_model
![Page 28: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/28.jpg)
DISPLAY & DIMENSIONS: The Box Model
![Page 29: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/29.jpg)
DISPLAY & DIMENSIONS: The Box Model
div.mybox {width: 500px;height: 200px;padding: 20px;margin: 10px 5px 10px 5px;border: 5px solid #FFF;
}
![Page 30: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/30.jpg)
DISPLAY DIMENSIONS: The Box Model
div.mybox {box-sizing: border-box;
// or padding-boxwidth: 500px;height: 200px;padding: 20px;margin: 10px 5px 10px 5px;border: 5px solid #FFF;
}
![Page 31: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/31.jpg)
DISPLAY & DIMENSIONSBlock Elements
- A block-level element occupies the entire space of its parent element.
- Browsers typically display the block-level element with a new line both before and after the element.
div, section, article, aside, footer, header, h1, h2…, p, etc.
![Page 32: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/32.jpg)
DISPLAY & DIMENSIONSInline Elements
- An inline-level element has no dimensions (no width/height)
- Browsers typically display the inline-level elements one beside the other.
a, span, strong, em, input, etc.
![Page 33: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/33.jpg)
DISPLAY & DIMENSIONS
a {display: inline-block;
}
Home
<p><a href=“index.html”>Home</a><a href=“next.html”>Next</a>
</p>
Next
![Page 34: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/34.jpg)
DISPLAY & DIMENSIONS
a {display: block;
}
Home
Next
![Page 35: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/35.jpg)
POSITIONING AND LAYOUT
- Position- Float- Flex- Grid, …
![Page 36: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/36.jpg)
POSITION PROPERTY
Absolute
<div class=“child”></div>
. child{position: absolute;width: 55%;top: 0;left:0;
}
![Page 37: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/37.jpg)
POSITION PROPERTY
Absolute
<div class=“father”><div class=“child”></div>
</div>
.father { margin: 20px; }
.child{position: absolute;width: 55%;top: 0;left:0;
}
![Page 38: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/38.jpg)
POSITION PROPERTY
Absolute <div class=“father”>
<div class=“child”></div> </div>
.father { position: relative;margin: 20px;
}.child{
position: absolute;width: 55%;top: 0;left:0;
}
![Page 39: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/39.jpg)
POSITION PROPERTY
Relative <div class=“father”>
<div class=“child”></div> </div>
.father { position: relative;margin: 20px;top: 20pxleft: 20px;
}.child{
position: absolute;width: 55%;bottom: 5px;right: 5px;
}
![Page 40: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/40.jpg)
FLOAT POSITIONING
1
3
4
2
<div></div><div></div><div></div><div></div>
![Page 41: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/41.jpg)
FLOAT POSITIONING
1 2 3
4
<div></div><div></div><div></div><div></div>
div {float: left;width: 30%;margin: 1% 1% 0;
}
![Page 42: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/42.jpg)
FLOAT POSITIONING
3 2 1
4
<div></div><div></div><div></div><div></div>
div {float: right;width: 30%;margin: 1% 1% 0;
}
![Page 43: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/43.jpg)
FLOAT POSITIONING
1 2 3
4
<div class=“father”> <div></div>
<div></div><div></div><div></div>
</div>
.father {background-color: #CCC;
}.father div {
float: left;width: 30%;margin: 1% 1% 0;
}
![Page 44: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/44.jpg)
FLOAT POSITIONING
1 2 3
4
<div class=“father”> <div></div>
<div></div><div></div><div></div>
</div>
.father {float: left;width: 100%;background-color: #CCC;
}.father div {
float: left;width: 30%;margin: 1% 1% 0;
}
![Page 45: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/45.jpg)
POSITIONING
Hands-on
![Page 46: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/46.jpg)
FLEX POSITIONING
The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.
![Page 47: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/47.jpg)
FLEX POSITIONING
![Page 48: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/48.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;
}
<div class=“father”> <div></div>
<div></div><div></div><div></div>
</div>
First, tell the container its kids are « flex »:
![Page 49: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/49.jpg)
FLEX POSITIONING
div.father div {flex: 1 0 auto;-webkit-flex: 1 0 auto;
}
<div class=“father”> <div></div>
<div></div><div></div><div></div>
</div>
Then, determine how the kids will behave:
![Page 50: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/50.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-direction: row;-webkit-flex-direction:
row; }
Flow of content: flow-direction
1 2 3 4 5
![Page 51: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/51.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;
}
Flow of content: flow-wrap
1 2 3 4
5
![Page 52: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/52.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;
}
Flow of content: A Shorthand
1 2 3 4
5
flexcontainer {flex-flow: <flex-direction> || <flex-wrap>;
}
![Page 53: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/53.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;justify-content: center;-webkit-justify-content:
center; }
Alignment of content (main-axis): justify-content
1 2 3 4
5
![Page 54: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/54.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;align-content: center;-webkit-align-content: center;
}
Alignment of content (cross-axis): align-content
1 2 3 4
5
My kids are displayed in multiple lines!
![Page 55: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/55.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;align-items: center;-webkit-align-items: center;
}
Alignment of content (perpendicular): align-items
1 2 3 4
5
![Page 56: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/56.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;
}
div.father div {flex-basis: 35%; -webkit-flex-basis: 35%;
}
Flex item behavior: flex-basis
1 2
3 45
![Page 57: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/57.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;
}
div.father div {flex-basis: 5%;
} div.father div:nth-child(3) {
flex-grow: 3; }
Flex item behavior: flex-grow
1 2 3 4 5
![Page 58: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/58.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;
}
div.father div {flex-basis: 5%;
} div.father div:nth-child(3) {
flex-shrink: 0; }
Flex item behavior: flex-shrink
1 2 3 4 5
![Page 59: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/59.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;
}
div.father div {flex: 1 1 auto;
}
Flex item behavior: A Shorthand
flexitem {flex: <flex-grow> || <flex-shrink> || <flex-basis>;
}
1 2 3 4
5
![Page 60: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/60.jpg)
FLEX POSITIONING
div.father {display: flex;display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;
}
div.father div:nth-child(3) {flex: 1 1 auto;order: -1;
}
Flex item order: order
3 1 2 4
![Page 61: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/61.jpg)
FLEX POSITIONING
Hands-on
![Page 62: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/62.jpg)
MEDIA QUERIES
- Syntax- Types- Features- Tools
![Page 63: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/63.jpg)
MEDIA QUERIES
The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
![Page 64: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/64.jpg)
MEDIA QUERIESSyntax
#wrapper { … }
@media <types><features> { /* media-specific rules */#wrapper { … }
}
![Page 65: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/65.jpg)
MEDIA QUERIESTypes
- All- Print- Screen- Speech
![Page 66: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/66.jpg)
MEDIA QUERIESFeatures
- min-width- max-width- orientation, resolution, …
![Page 67: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/67.jpg)
MEDIA QUERIESSyntax
#wrapper { … }
@media screen and (min-width: 500px ){
/* media-specific rules */
#wrapper { … } }
![Page 68: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/68.jpg)
MEDIA QUERIESSyntax
#wrapper { … }
@media screen and (min-width: 500px)and (max-width: 800px) {
/* media-specific rules */
#wrapper { … } }
![Page 69: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/69.jpg)
MEDIA QUERIESTools
- Ripple- Google Chrome Console- Firefox (Ctrl+Maj+M)
![Page 70: CSS WORKSHOP Design Principles for Web Standards.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649f2b5503460f94c456bb/html5/thumbnails/70.jpg)
REFE
REN
CES - Kawwa
https://kawwa.atosworldline.com/
- Web Platformhttp://www.webplatform.org/
- Mozilla Developer Networkhttps://developer.mozilla.org/
- Flex Box Cheatsheets http://www.sketchingwithcss.com/samplechapter/cheatsheet.html http://jonibologna.com/flexbox-cheatsheet/