HTML and CSS Reference
In-Depth Information
Setting up the CSS for the blog page
You might have noticed that both the “index.html” file and the “blog.html” file
link to the same CSS file, “starbuzz.css”. Let's take a quick look at “blog.html”:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Starbuzz Coffee - Blog
</title>
<link rel="stylesheet" type="text/css" href="starbuzz.css">
</head>
...
Now, we haven't yet added any CSS to target our new section with an id of
“blog”, so let's do that now. We know we want the “blog”
<section>
to be
styled exactly like the “main”
<section>
on the home page, so we can just
reuse the same rule by adding the rule for the blog section to the existing rule
for the main section, like this:
We c
an use th
e same r
ule for bo
th <sect
ion> eleme
nts by us
ing
the
two selec
tors sepa
rated by
a comma.
This say
s, apply a
ll
thes
e propert
ies to bo
th of the
selected
elements
.
section#main, section#blog {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
That's it! All the other styling we need for the “blog”
<section>
of the page is
already in the CSS, and we're not adding any special styling for
<article>
. So
it's time to…
