HTML and CSS Reference
In-Depth Information
CSS
1.
.btn
{
2.
font-size: 16px;
3.
}
4.
.btn-danger
{
5.
background: red;
6.
}
7.
.btn-success
{
8.
background: green;
9.
}
Here you can see two anchor elements, both with multiple class attribute values. The first
class,
btn
, is used to apply a font size of
16
pixels to each of the elements. Then, the first
anchor element uses an additional class of
btn-danger
to apply a
red
background col-
or while the second anchor element uses an additional class of
btn-success
to apply a
green
background color. Our styles here are clean and modular.
Using multiple classes, we can layer on as many styles as we wish, keeping our code lean
and our specificity weights low. Much like understanding the cascade and calculating spe-
cificity, this is a practice that will take time to fully absorb, but we'll get better with each
lesson.
Common CSS Property Values
We've used a handful of common CSS property values already, such as the keyword color
values of
red
and
green
. You may not have thought too much about them; that's okay.
We're going to take time now to go over some previously used property values as well as
to explore some of the more common property values that we'll soon be using.
Specifically, we'll look at property values that relate to colors and length measurements.
Colors
All color values within CSS are defined on an sRGB (or standard red, green, and blue) col-
or space. Colors within this space are formed by mixing red, green, and blue color channels
together, mirroring the way that televisions and monitors generate all the different colors
they display. By mixing different levels of red, green, and blue, we can create millions of
colors—and find nearly any color we'd like.
Currently there are four primary ways to represent sRGB colors within CSS: keywords,
hexadecimal notation, and RGB and HSL values.
Search WWH ::
Custom Search