Post on 31-Mar-2020
transcript
CSSPatrick Behr
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
Styles in HTML
• Browser• Browser wars
Styles in HTML
• Browser• Browser wars
• HTML elements• <FONT>
• <CENTER>
• <MARQUEE>
• <BLINK>
Styles in HTML
• Browser• Browser wars
• HTML elements• <FONT>
• <CENTER>
• <MARQUEE>
• <BLINK>
• CSS• CSS1=1996, CSS2=1998, CSS3=Ongoing
• Style attribute•
CSS in HTML
• Style attribute•
• Style element (inline style sheet)
•
CSS in HTML
• Style attribute•
• Style element (inline style sheet)
•
• External Style Sheets •
CSS in HTML
Cascading
• Allows multiple styles
Cascading
• Allows multiple styles
• Precedence• Browser
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
H1 {color : yellow;}
H1 {color : red;}
H1 {color : blue;}
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
Cascading
body {color : yellow;}
div {color : red;}
p {color : blue;}
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
p {color : lightblue;}
.dark {color : darkblue;}
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
p {color : lightblue;}
.dark {color : darkblue;}
#first {color : red;}
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
• Inline
h1 {color : blue;}
Cascading
• Allows multiple styles
• Precedence• Browser
• Order
• Specificity• Type selector
• Class selector
• ID selector
• Inline
• !important
h1 {color : blue !important}
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
Rules
• Made up of • Selector
• Declaration• Property
• Value
h1 { color: yellow; }
Selectors
• Type selector h1 {color: blue}
Selectors
• Type selector
• Class selector
h1 {color: blue}
.required {border: solid red}
Selectors
• Type selector
• Class selector
• ID selector
h1 {color: blue}
.required {border: solid red}
#error {color: red}
Selectors
• Type selector
• Class selector
• ID selector
• Grouping
h1 {color: blue}
.required {border: solid red}
#error {color: red}
h1, h2, h3 {color: blue}
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}
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}
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}
Selectors
• Grouping article, aside, details,
figcaption, figure, footer,
header, hgroup, menu, nav,
section {display : block}
Selectors
• Descendant div {color : green;}
p {color : blue;}
div p {color : orange;}
Selectors
• Combinations p {color : blue;}
.bright {color : yellow;}
div.bright {color : red;}
Selectors
• Combinations article > h1 + p {
color : blue;
}
Menu
• Unordered List
• List Items
• Anchors
Menu
• Remove underlines ul li a {
text-decoration : none;
}
Menu
• Remove the bullets ul li {
list-style-type : none;
}
Menu
• List horizontally ul li {
list-style-type : none;
display : inline;
}
Menu
• Add a border ul li {
list-style-type : none;
display : inline;
border : 1px solid black;
}
Menu
• Add a little padding ul li {
list-style-type : none;
display : inline;
border : 1px solid black;
padding : 2px;
}
Menu
• Mouse over/Hover ul li:hover {
background-color : lightgray;
}
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
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
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
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
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;
Media Query
• Apply specific presentation for specific output devices
• Same content
• Different CSS for desktop, mobile, print• Fluid/Responsive design
Media Query
• Media type• all | print | screen | speech
• Media features• width
• height
• hover
Media Type
• Set font for print
• Set font for screen
@media print {
body {font-size : 10pt}
}
@media screen {
body {font-size : 14pt}
}
Media features
• Screen <= 600px
• Screen >= 600px
@media (max-width:600px) {
body {font-size : 10pt}
}
@media (min-width:600px) {
body {font-size : 14pt}
}
Media features
• Menu ul li {
list-style-type : none;
border : 1px solid black;
padding : 2px;
}
@media (min-width:250px) {
ul li {display : inline;}
}
Media features
• Menu
Media features
• Menu
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
Box Model
Margin
Border
Padding
Content
Box Model
Box Model
span {
border : 1px solid black;
}
Box Model
span {
margin : 10px;
}
Box Model
span {
padding : 10px;
}
Float
Float
Float
Float
Float
Float
Float
Float
Float
Float
Float
Float
Float – 2 column layout
Float – 2 column layout
Float – 2 column layout
Float – 2 column layout
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
Flexbox
Aligns and evenly spaces items inside a container
Container
Item Item Item Item
Flexbox
Container
Item Item Item Item
container { flex-direction: row }
Flexbox
container { flex-direction: row-reverse }
Container
Item Item Item Item
Flexbox
Container
Item
Item
container { flex-direction: column }
Item
Item
Flexbox
Container
Item
Item
container { flex-direction: column-reverse }
Item
Item
Flexbox
Container
Item Item Item Item
container { flex-wrap: wrap }
Item Item Item Item
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
Grids
A container element represents the entire grid (.container)
Grids
A parent element represents each row (.row)
Grids
Apply classes to elements to determine how many columns wide
.col-3 .col-2.col-7
Grids
A parent element represents each row (.row)
.col-3 .col-2.col-7
Grids
Apply classes to elements to determine how many columns wide
.col-6
.col-3 .col-2.col-7
.col-3 .col-3
Grids
A parent element represents each row (.row)
.col-3 .col-2.col-7
.col-6.col-3 .col-3
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
Pre-processors
• Adds functionality to CSS
• Variables
• Nesting
• Mixins
• Pre-processors:• SASS - written in Ruby
• LESS – written in JavaScript
• Others
Pre-processors
• Variables
$font-stack: Arial, Helvetica, sans-serif;
$main-color: #cc4123;
body {
color: $main-color;
font : $font-stack;
}
Pre-processors
• Nesting
nav {
border: 1px solid black;
}
nav ul {
list-style: none;
}
nav ul a {
text-decoration: none;
}
Pre-processors
• Nesting
nav {
border: 1px solid black;
ul {
list-style: none;
a {
text-decoration: none;
}
{
}
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