scriptygoddessI'm a little slow on the uptake with all this CSS stuff, and the longer an article is, the less likely I am to understand it. So when I can, I try to make things simpler.
One concept I have been trying to wrap my head around is the difference between class vs ID. I always specified styles using the attribute class="classname". I could never understand why/when you'd use ID="classname"… that is until today when I read this article on digital-web
So, here's my cliffnotes version "dumbed" down so I could finally understand it.
The basic idea, let's say you have two sections on your site. a header, and a content area. You want to use the H1 style in each section but you want it to "behave" (look) slightly differently depending on which section it's in….
So first you define the sections (in your stylesheet). So, that would look like this:
#header {
//put any generic styling for the div… like background color, etc. if any…
background-color: Olive;
}
#content {
//put any generic styling for the div… like background color, etc. if any…
border : medium dotted;
}
Then you can define the H1 tag as it should appear in those sections:
#header h1 {
//put specific styles for header-h1 in here.
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
#content h1 {
//put specific styles for content-h1 in here.
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
Then on your page you put a DIV tag around the "header area", when you use the H1 tag inside that area.. it'll look like the HEADER version. And the same with the content area:
<div id="header">
<h1> HEADER STYLE HEADLINE </h1>
</div>
<div id="content">
< h1 >CONTENT STYLE HEADLINE </h1>
</div>
