CSS - Girls Can Codegirlscancode.io/assets/pdf/css.pdf · 2019-08-16 · Styling HTML Elements CSS. CSS Style Sheet Rules h2 {color: purple;} Selector. CSS Style Sheet Rules h2 {color:

S E C T I O N 4

CSSAdding Style to Your HTML

What is CSS

CSS

Cascading Style Sheet

Cascading Style Sheet

CSS

<h2>How to Become an Astronaut</h2>

<h2>Women in Space</h2>

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

CSS

Class Selectors

<p class=“caption”>National Aeronautics and Space Administration (NASA)</p>

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

<p class=“caption”>National Aeronautics and Space Administration (NASA)</p>

<a class=“caption” href=“https://en.wikipedia.org/wiki/NASA”>Read more about NASA</a>

CSS

Class Selectors

<p class=“caption”>National Aeronautics and Space Administration (NASA)</p>

<a class=“caption” href=“https://en.wikipedia.org/wiki/NASA”>Read more about NASA</a>

S C R E E N C A S T

Adding a Class to the Anchor Tag

CSS

ID Selectors

HTML CSS

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

#site-content { padding: 40px; background-color: whitesmoke;}

ID Attribute ID Selector

CSS

ID Selectors

HTML CSS

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

#site-content { padding: 40px; background-color: whitesmoke;}

ID Attribute ID Selector

CSS

ID Selectors

HTML CSS

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

#site-content { padding: 40px; background-color: whitesmoke;}

ID Attribute ID Selector

CSS

ID Selectors

HTML CSS

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

#site-content { padding: 40px; background-color: whitesmoke;}

ID Attribute ID Selector

CSS

ID Selectors

HTML CSS

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

#site-content { padding: 40px; background-color: whitesmoke;}

ID Attribute ID Selector

CSS

ID Selectors

<header id=“site-header”><h2>How to become an astronaut</h2>

</header>

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

<footer id=“site-footer”><h2>How to become an astronaut</h2>

</footer>

GoodBad

<header id=“site”><h2>How to become an astronaut</h2>

</header>

<main id=“site”><h2>How to become an astronaut</h2>

</main>

<footer id=“site”><h2>How to become an astronaut</h2>

</footer>

CSS

ID Selectors

<header id=“site-header”><h2>How to become an astronaut</h2>

</header>

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

<footer id=“site-footer”><h2>How to become an astronaut</h2>

</footer>

GoodBad

<header id=“site”><h2>How to become an astronaut</h2>

</header>

<main id=“site”><h2>How to become an astronaut</h2>

</main>

<footer id=“site”><h2>How to become an astronaut</h2>

</footer>

CSS

ID Selectors

<header id=“site-header”><h2>How to become an astronaut</h2>

</header>

<main id=“site-content”><h2>How to become an astronaut</h2>

</main>

<footer id=“site-footer”><h2>How to become an astronaut</h2>

</footer>

GoodBad

<header id=“site”><h2>How to become an astronaut</h2>

</header>

<main id=“site”><h2>How to become an astronaut</h2>

</main>

<footer id=“site”><h2>How to become an astronaut</h2>

</footer>

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

<footer id=“site-footer”><p>Women in Space</p></footer>

#site-footer { background-color: black;color: white;

}

HTML CSS

CSS

Cascading Style Sheets

<footer id=“site-footer”><p>Women in Space</p></footer>

#site-footer { background-color: black;color: white;

}

HTML CSS

CSS

Cascading Style Sheets

<footer id=“site-footer”><p>Women in Space</p></footer>

#site-footer { background-color: black;color: white;

}

HTML CSS

CSS

Cascading Style Sheets

<footer id=“site-footer”><p>Women in Space</p></footer>

#site-footer { background-color: black;color: white;

}

HTML CSS

Parent

Parent

CSS

Cascading Style Sheets

<footer id=“site-footer”><p>Women in Space</p></footer>

#site-footer { background-color: black;color: white;

}

HTML CSS

Parent

Parent

Child

CSS

Cascading Style Sheets

<footer id=“site-footer”><p>Women in Space</p></footer>

#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

CSS

Adding Custom Fonts

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!