CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none;...
Transcript of CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none;...
![Page 1: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/1.jpg)
CSSPatrick Behr
![Page 2: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/2.jpg)
CSS
• HTML = content
• CSS = display
• It’s important to keep them separated• Less code in your HTML
• Easy maintenance
• Allows for different mediums• Desktop
• Mobile
• Braille
![Page 4: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/4.jpg)
Styles in HTML
• Browser• Browser wars
![Page 5: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/5.jpg)
Styles in HTML
• Browser• Browser wars
• HTML elements• <FONT>
• <CENTER>
• <MARQUEE>
• <BLINK>
![Page 6: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/6.jpg)
Styles in HTML
• Browser• Browser wars
• HTML elements• <FONT>
• <CENTER>
• <MARQUEE>
• <BLINK>
• CSS• CSS1=1996, CSS2=1998, CSS3=Ongoing
![Page 7: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/7.jpg)
• Style attribute•
CSS in HTML
![Page 8: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/8.jpg)
• Style attribute•
• Style element (inline style sheet)
•
CSS in HTML
![Page 9: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/9.jpg)
• Style attribute•
• Style element (inline style sheet)
•
• External Style Sheets •
CSS in HTML
![Page 10: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/10.jpg)
Cascading
• Allows multiple styles
![Page 11: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/11.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
![Page 12: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/12.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
H1 {color : yellow;}
H1 {color : red;}
H1 {color : blue;}
![Page 13: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/13.jpg)
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
Cascading
body {color : yellow;}
div {color : red;}
p {color : blue;}
![Page 14: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/14.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
p {color : lightblue;}
.dark {color : darkblue;}
![Page 15: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/15.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
p {color : lightblue;}
.dark {color : darkblue;}
#first {color : red;}
![Page 16: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/16.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
• Inline
h1 {color : blue;}
![Page 17: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/17.jpg)
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
• Inline
• !important
h1 {color : blue !important}
![Page 18: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/18.jpg)
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
![Page 19: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/19.jpg)
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
![Page 20: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/20.jpg)
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
![Page 21: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/21.jpg)
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
![Page 22: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/22.jpg)
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
![Page 23: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/23.jpg)
Selectors
• Type selector h1 {color: blue}
![Page 24: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/24.jpg)
Selectors
• Type selector
• Class selector
h1 {color: blue}
.required {border: solid red}
![Page 25: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/25.jpg)
Selectors
• Type selector
• Class selector
• ID selector
h1 {color: blue}
.required {border: solid red}
#error {color: red}
![Page 26: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/26.jpg)
Selectors
• Type selector
• Class selector
• ID selector
• Grouping
h1 {color: blue}
.required {border: solid red}
#error {color: red}
h1, h2, h3 {color: blue}
![Page 27: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/27.jpg)
Selectors
• Type selector
• Class selector
• ID selector
• Grouping
• Descendant
h1 {color: blue}
.required {border: solid red}
#error {color: red}
h1, h2, h3 {color: blue}
ul li a {text-decoration:none}
![Page 28: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/28.jpg)
Selectors
• Type selector
• Class selector
• ID selector
• Grouping
• Descendant
• Child
h1 {color: blue}
.required {border: solid red}
#error {color: red}
h1, h2, h3 {color: blue}
header > h1 {color: blue}
article > h1 {color: blue}
ul li a {text-decoration:none}
![Page 29: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/29.jpg)
Selectors
• Type selector
• Class selector
• ID selector
• Grouping
• Descendant
• Child
• Adjacent
h1 {color: blue}
.required {border: solid red}
#error {color: red}
h1, h2, h3 {color: blue}
header > h1 {color: blue}
article > h1 {color: blue}
ul li a {text-decoration:none}
h1 + p {color: blue}
![Page 30: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/30.jpg)
Selectors
• Grouping article, aside, details,
figcaption, figure, footer,
header, hgroup, menu, nav,
section {display : block}
![Page 31: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/31.jpg)
Selectors
• Descendant div {color : green;}
p {color : blue;}
div p {color : orange;}
![Page 32: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/32.jpg)
Selectors
• Combinations p {color : blue;}
.bright {color : yellow;}
div.bright {color : red;}
![Page 33: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/33.jpg)
Selectors
• Combinations article > h1 + p {
color : blue;
}
![Page 34: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/34.jpg)
Menu
• Unordered List
• List Items
• Anchors
![Page 35: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/35.jpg)
Menu
• Remove underlines ul li a {
text-decoration : none;
}
![Page 36: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/36.jpg)
Menu
• Remove the bullets ul li {
list-style-type : none;
}
![Page 37: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/37.jpg)
Menu
• List horizontally ul li {
list-style-type : none;
display : inline;
}
![Page 38: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/38.jpg)
Menu
• Add a border ul li {
list-style-type : none;
display : inline;
border : 1px solid black;
}
![Page 39: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/39.jpg)
Menu
• Add a little padding ul li {
list-style-type : none;
display : inline;
border : 1px solid black;
padding : 2px;
}
![Page 40: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/40.jpg)
Menu
• Mouse over/Hover ul li:hover {
background-color : lightgray;
}
![Page 41: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/41.jpg)
Declarations
• General• height (min & max) specifies the height of an element
• width (min & max) specifies the width of an element
• padding padding between content & border
• margin sets the margin between elements
• position alternative element positioning
![Page 42: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/42.jpg)
Declarations
• Background• background-color sets a background color
• background-image adds a background image
• background-attachment determines the image position
• background-repeat determines if images are repeated
![Page 43: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/43.jpg)
Declarations
• Border• border-width sets the width of the border
• border-style sets the line style of the border
• border-color sets the line color of the border
![Page 44: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/44.jpg)
Declarations
• Font• color sets the foreground color
• font-family sets the font type
• font-size sets the size of the font
• font-style applies italics or oblique
• font-weight sets the boldness of the font
• line-height sets the minimum height of line
• text-align text alignment within an element
![Page 45: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/45.jpg)
Declarations
• font-family
font-family: Cambria, Times, "Times New Roman", serif;
font-family: Calibri, Tahoma, Helvetica, Arial, sans-serif;
font-family: Consolas, "Courier New", Courier, monospace;
![Page 46: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/46.jpg)
Media Query
• Apply specific presentation for specific output devices
• Same content
• Different CSS for desktop, mobile, print• Fluid/Responsive design
![Page 47: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/47.jpg)
Media Query
• Media type• all | print | screen | speech
• Media features• width
• height
• hover
![Page 48: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/48.jpg)
Media Type
• Set font for print
• Set font for screen
@media print {
body {font-size : 10pt}
}
@media screen {
body {font-size : 14pt}
}
![Page 49: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/49.jpg)
Media features
• Screen <= 600px
• Screen >= 600px
@media (max-width:600px) {
body {font-size : 10pt}
}
@media (min-width:600px) {
body {font-size : 14pt}
}
![Page 50: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/50.jpg)
Media features
• Menu ul li {
list-style-type : none;
border : 1px solid black;
padding : 2px;
}
@media (min-width:250px) {
ul li {display : inline;}
}
![Page 51: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/51.jpg)
Media features
• Menu
![Page 52: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/52.jpg)
Media features
• Menu
![Page 53: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/53.jpg)
Box Model
• Each element is represented as a box
• The box model describes the space taken by the element
• 4 edges• Content
• Padding
• Border
• Margin
![Page 54: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/54.jpg)
Box Model
Margin
Border
Padding
Content
![Page 55: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/55.jpg)
Box Model
![Page 56: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/56.jpg)
Box Model
span {
border : 1px solid black;
}
![Page 57: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/57.jpg)
Box Model
span {
margin : 10px;
}
![Page 58: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/58.jpg)
Box Model
span {
padding : 10px;
}
![Page 59: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/59.jpg)
Float
![Page 60: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/60.jpg)
Float
![Page 61: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/61.jpg)
Float
![Page 62: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/62.jpg)
Float
![Page 63: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/63.jpg)
Float
![Page 64: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/64.jpg)
Float
![Page 65: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/65.jpg)
Float
![Page 66: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/66.jpg)
Float
![Page 67: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/67.jpg)
Float
![Page 68: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/68.jpg)
Float
![Page 69: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/69.jpg)
Float
![Page 70: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/70.jpg)
Float
![Page 71: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/71.jpg)
Float – 2 column layout
![Page 72: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/72.jpg)
Float – 2 column layout
![Page 73: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/73.jpg)
Float – 2 column layout
![Page 74: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/74.jpg)
Float – 2 column layout
![Page 75: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/75.jpg)
Flexbox
• Layouts used floats and positioning
• Things that were a real pain:• Vertically centering content inside its parent
• Making elements use equal amount of the available width/height
• Making all columns the same height if they contain a different amount of content
• Flexbox fixes that
![Page 76: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/76.jpg)
Flexbox
Aligns and evenly spaces items inside a container
Container
Item Item Item Item
![Page 77: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/77.jpg)
Flexbox
Container
Item Item Item Item
container { flex-direction: row }
![Page 78: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/78.jpg)
Flexbox
container { flex-direction: row-reverse }
Container
Item Item Item Item
![Page 79: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/79.jpg)
Flexbox
Container
Item
Item
container { flex-direction: column }
Item
Item
![Page 80: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/80.jpg)
Flexbox
Container
Item
Item
container { flex-direction: column-reverse }
Item
Item
![Page 81: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/81.jpg)
Flexbox
Container
Item Item Item Item
container { flex-wrap: wrap }
Item Item Item Item
![Page 82: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/82.jpg)
Grids
• A grid breaks the page up into rows and columns
• Native CSS grids are on the way!
• 3rd party grid systems (search “CSS Grid framework”)• Bootstrap
• Flexbox Grid
• Skeleton
![Page 83: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/83.jpg)
Grids
A container element represents the entire grid (.container)
![Page 84: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/84.jpg)
Grids
A parent element represents each row (.row)
![Page 85: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/85.jpg)
Grids
Apply classes to elements to determine how many columns wide
.col-3 .col-2.col-7
![Page 86: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/86.jpg)
Grids
A parent element represents each row (.row)
.col-3 .col-2.col-7
![Page 87: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/87.jpg)
Grids
Apply classes to elements to determine how many columns wide
.col-6
.col-3 .col-2.col-7
.col-3 .col-3
![Page 88: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/88.jpg)
Grids
A parent element represents each row (.row)
.col-3 .col-2.col-7
.col-6.col-3 .col-3
![Page 89: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/89.jpg)
Grids
Apply classes to elements to determine how many columns wide
.col-6
.col-3 .col-2.col-7
.col-3 .col-3
.col-4.col-8
![Page 90: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/90.jpg)
Pre-processors
• Adds functionality to CSS
• Variables
• Nesting
• Mixins
• Pre-processors:• SASS - written in Ruby
• LESS – written in JavaScript
• Others
![Page 91: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/91.jpg)
Pre-processors
• Variables
$font-stack: Arial, Helvetica, sans-serif;
$main-color: #cc4123;
body {
color: $main-color;
font : $font-stack;
}
![Page 92: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/92.jpg)
Pre-processors
• Nesting
nav {
border: 1px solid black;
}
nav ul {
list-style: none;
}
nav ul a {
text-decoration: none;
}
![Page 93: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/93.jpg)
Pre-processors
• Nesting
nav {
border: 1px solid black;
ul {
list-style: none;
a {
text-decoration: none;
}
{
}
![Page 94: CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for](https://reader031.fdocuments.us/reader031/viewer/2022022710/5bf0e6c909d3f22e178be67f/html5/thumbnails/94.jpg)
Avoid Spaghetti Code
• SMACCS – Scalable and Modular Architecture for CSS• Base, Layout, Module, State, Theme
• https://smacss.com/
• BEM – Block, Element, Modifier• menu, menu item, a disable menu item
• http://getbem.com/
• OOCSS – Object Oriented CSS• https://github.com/stubbornella