1. Google Fonts Selective Formatting

2. Google fonts

3. External CSS: Google fonts!
google.com/fonts
2 steps
Link to font (second style sheet!)
Use name in CSS

4. Selective Formatting

5. Multiple selectors May use the same formatting for two elements
h1, h2 {
font-family: cursive; }
Maintains consistency

6. Basic page design Header, includes h1 title Nav(igation)
main for main body
Footer
Layout
What do you want your website to look like?
What are you putting on the site, and will you have enough space to do so?
Simple
Don’t overdue or overthink.
Don’t add too many extraneous features.
AKA. Don’t get carried away
Header
Contain title
Navigation bars
Search elements
Important tidbits; not full on data or information – think of it like a thesis statement
Next/back elements
Body
The meat of the webpage
All the information and content
Make it look nice and understandable
Some next/back elements if necessary
Footer
Copyright information
Location and address
Contact information

7. Formatting by section
Paragraph in each section may want to look different
Smaller in header or footer
Lists
No bullets
In a line
Different spacing

8. Selecting one of several definitions for the same tag
Name the context in the css by using a space
header p {
text-align: center; }
footer p {
text-align: right;
Any div with the class of center can look like this.

9. Multiple selectors with context
May use the same formatting for two elements
h1, h2 {
font-family: cursive; }
When using context, need to repeat it
header h1, main h2 {

10. Multiple Styles: Classes
HTML: class=“name”
Use names to imply content, not style
Multiple ways to define
Style that applies to only one element
Style that applies to many elements

11. Class for one element
Name the declaration set for a specific selector (tag)
HTML: class=“name”
CSS: tag.name
div.intro{
text-align: center; }
<div class=“intro”>
</div>
Any div with the class of center can look like this.

12. Class for many elements
HTML: class=“name”
CSS: .name
Particularly useful for maintaining consistency
.intro{
text-align: center;
color: red; }
<h1 class=“intro”>Header 1</h1>
<h2 class=“intro”>Header 2</h2>

13. Using class and pseudo
p.intro:first-letter { color: red; } a.highlight:hover { color: red; }

14. Nested Selector Only applies within context
Avoids putting class= everywhere!
Useful for formatting lists
HTML: class=“name” only for encompassing
CSS: tag.name tag
ul.horizontal {
list-style-type: none; }
ul.horizontal li {
display: inline;

15. Referencing Ids Or limit ids to location and classes to format
id can also act as a class
But notice that you can only use it once on any page
Can repeat it on multiple pages
To reference an id in CSS
#idname instead of .classname
All the same forms (one element, any element, context)
Or limit ids to location and classes to format
can have both

16. Inheritence Some times multiple formatting applies
Formatting with no classes or scope
Formatting with a class or scope
When the second applies, BOTH APPLY
Override
Additive