Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
S E C T I O N 4
CSSAdding Style to Your HTML
What is CSS
CSS
Cascading Style Sheet
Cascading Style Sheet
CSS
How to Become an Astronaut
Women in Space
Styling HTML Elements
CSS
CSS
Style Sheet Rules
h2 {color: purple;
}
Selector
CSS
Style Sheet Rules
h2 {color: purple;
}
Opening Curly Brace
Closing Curly Brace
CSS
Style Sheet Rules
h2 { font-size: 22px;}
Property Value
CSS
Style Sheet Rules
h2 { font-size: 22px;}
CSS
Style Sheet Rules
h2 { font-size: 22px;}
CSS
Style Sheet Rules
h2 { font-size: 22px;}
S C R E E N C A S T
Setting Style Sheet Rules
CSS
Style Sheet Rulesh2 { font-size: 22px;color: deeppink;
font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
CSS
Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}
S C R E E N C A S T
Finishing Up Our Styles
CSS Cheat Sheetbit.ly/gcc-css
CSS
http://bit.ly/gcc-css
CSS
Class Selectors
National Aeronautics and Space Administration (NASA)
Class Attribute Value
HTML
CSS
Class Selectors
.caption { font-size: 13px;}
Class Selector
S C R E E N C A S T
Adding a Class
CSS
Class Selectors
National Aeronautics and Space Administration (NASA)
Read more about NASA
CSS
Class Selectors
National Aeronautics and Space Administration (NASA)
Read more about NASA
S C R E E N C A S T
Adding a Class to the Anchor Tag
CSS
ID Selectors
HTML CSS
How to become an astronaut
#site-content { padding: 40px; background-color: whitesmoke;}
ID Attribute ID Selector
CSS
ID Selectors
HTML CSS
How to become an astronaut
#site-content { padding: 40px; background-color: whitesmoke;}
ID Attribute ID Selector
CSS
ID Selectors
HTML CSS
How to become an astronaut
#site-content { padding: 40px; background-color: whitesmoke;}
ID Attribute ID Selector
CSS
ID Selectors
HTML CSS
How to become an astronaut
#site-content { padding: 40px; background-color: whitesmoke;}
ID Attribute ID Selector
CSS
ID Selectors
HTML CSS
How to become an astronaut
#site-content { padding: 40px; background-color: whitesmoke;}
ID Attribute ID Selector
CSS
ID Selectors
How to become an astronaut
How to become an astronaut
How to become an astronaut
GoodBad
How to become an astronaut
How to become an astronaut
How to become an astronaut
CSS
ID Selectors
How to become an astronaut
How to become an astronaut
How to become an astronaut
GoodBad
How to become an astronaut
How to become an astronaut
How to become an astronaut
CSS
ID Selectors
How to become an astronaut
How to become an astronaut
How to become an astronaut
GoodBad
How to become an astronaut
How to become an astronaut
How to become an astronaut
S C R E E N C A S T
Adding an id to the Header Element
CSS
Selector Examples
Classes
.captions.astronauts.widget
Elements
h1imgp
IDs
#site-header#main-nav#sidebar
Cascading Style Sheets
CSS
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
Parent
Parent
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
Parent
Parent
Child
CSS
Cascading Style Sheets
Women in Space
#site-footer { background-color: black;color: white;
}
HTML CSS
S C R E E N C A S T
Style the Footer
CSS
Selecting Named Colors
bit.ly/gcc-colors
http://bit.ly/gcc-colors
CSS
Adding Custom Fonts
bit.ly/gcc-fonts
http://bit.ly/gcc-fonts
S C R E E N C A S T
Adding Custom Fonts
What is CSS
CSS
Cascading Style Sheet
THANKS!