Google Fonts Selective Formatting

Google fonts

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

Selective Formatting

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

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

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

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.

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 {

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

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.

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>

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

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;

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

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