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>
<meta charset="utf-8">
<title> Starbuzz Coffee - Blog </title>
<link rel="stylesheet" type="text/css" href="starbuzz.css">
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…
Search WWH ::

Custom Search