HTML and CSS Reference
In-Depth Information
Even though you've just glanced at CSS, you've already begun to see
what it can do. Match each line in the style definition to what it does.
Defines the font to use for text.
background-color: #d2b48c;
Defines a border around the body that is
dotted and the color black.
margin-left: 20%;
margin-right: 20%;
Sets the left and right margins to take up
20% of the page each.
border: 2px dotted black;
Sets the background color to tan.
padding: 10px 10px 10px 10px;
Creates some padding around the body of
the page.
font-family: sans-serif;
Q:
CSS looks like a totally different
language than HTML. Why have two
languages? That's just more for me to
learn, right?
A:
You are quite right that HTML and
CSS are completely different languages,
but that is because they have very different
jobs. Just like you wouldn't use English to
balance your checkbook, or math to write a
poem, you don't use CSS to create structure
or HTML to create style because that's not
what they were designed for. While this does
mean you need to learn two languages,
Q:
Why is there a “body” in front of
the CSS rules? What does that mean?
A:
The “body” in the CSS means that all
the CSS between the “{” and “}” applies to
content within the HTML <body> element. So
when you set the font to sans-serif, you're
saying that the default font within the body of
your page should be sans-serif.
you'll discover that because each language
is good at what it does, this is actually easier
than if you had to use one language to do
both jobs.
Q:
#d2b48c doesn't look like a color.
How is #d2b48c the color “tan”?
A:
There are a few different ways to
specify colors with CSS. The most popular is
called a “hex code,” which is what #d2b48c
is. This really is a tan color. For now, just go
with it, and we'll be showing you exactly how
#d2b48c is a color a little later.
We'll go into a lot more detail about how
CSS works shortly, so keep reading. Soon,
you'll see that you can be a lot more specific
about how you apply these rules, and by
doing so, you can create some pretty cool
designs.
