Google Fonts Selective Formatting Google fonts External CSS

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 h 1, h 2 { font-family: cursive; } Maintains consistency

Basic page design Header, h 1 includes title Nav(igation) main for main body Footer

Formatting by section Paragraph in each section may want to look different Smaller in header or footer Lists No In bullets 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; }

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

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>

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

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

Nested Selector Only applies within context Avoids Useful putting class= everywhere! 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 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