CSS introduction
CSS — the look
The chocolate to our peanut
The only thing CSS knows how to do is make something look a certain way
It doesn’t understand content—only style
In a separate file — main.css
HTML
<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>
CSS html {
background-color: cornsilk;
font-family: Georgia, serif;
}
b {
color: forestgreen;
font-weight: normal;
}
.intro {
color: darkolivegreen;
font-style: italic;
}
HTML
<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>
CSS html {
background-color: cornsilk;
}
b {
color: #22bb22;
}
.intro {
background-color: rgba(85, 107, 47, .4);
color: #fff;
}
CSS
/*
Reset the layout math:
- the padding is inside the width
- friendlier for flexible layouts
Put this at the top of EVERY CSS file
*/
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}