css - girls can code · 2019. 8. 16. · styling html elements css. css style sheet rules h2...
TRANSCRIPT
-
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!