Forum Moderators: not2easy
<span class="darktan">
<span class="bookheadings">Foundation by Isaac Asimov</span>
This is one of the finest books I've read.
</span>
As you can see what I've done is define darktan at the start then used another span class tag within that one. I'm wondering should I write it as follows:
<span class="bookheadings">Foundation by Isaac Asimov</span>
<span class="darktan>This is one of the finest books I've read.</span>
The reason I don't want to do that is because by defining it at the start all I need to do is write the bookheadings tag over again. Anything outside will simply be darktan. Yet will this create conflict or is it safe to do. I'll illustrate my point below:
<span class="darktan">
This will be tan
<span class="bookheadings">Foundation</span>
this will also be tan so I won't need to type the span class again.
<span class="lightblue>Kewl</span>
This is tan also.
</span>
So what you end up with is less work than writing darktan for each area. But should I do it?
Glad to see youre using a Doctype, that will help with HTML validation [validator.w3.org]. Which is useful tool to learn with as it will very quickly point out incorrect nesting, unclosed elements etc...
Note: where you say <tags> I say element ..but it's OK we know what you mean..
<p> and <span> on their own are opening "tags", </p> and </span> are closing "tags"
but the entire structure..
<p>....</p> or <span>....</span>
is referred to as an element
possibly not important to this question yet.. but worth noting as people start to talk about nesting elements, block level elements, inline elements... etc..
Your Question:
I've setup some span class tags for text. Can I do something in the .htm files similar to this:
You could do it this way, but I would advise not. The span element is an inline element and as such should only used for spanning areas within a block level element. The scenario you have described appears to be a block which would be better handled with a block-level element such as a div (division).
to take your example:
<span class="darktan">
This will be tan
<span class="bookheadings">Foundation</span>
this will also be tan so I won't need to type the span class again.
<span class="lightblue>Kewl</span>
This is tan also.
</span>
take out the presentation aspect for a minute and just think about how you would type that text into a written document..
e.g.
This will be tanFoundation
this will also be tan so I won't need to type the span class again.
Kewl
This is tan also.
This would then be written in pure HTML something like this:
<div class="review">
<p>This will be tan</p><h2>Foundation</h2>
<p>this will also be tan so I won't need to type the span class again.</p>
<p>Kewl</p>
<p>This is tan also.</p>
</div>
By surrounding the logical page division (a book review?) in a div with a class name you can then use that division multiple times on the page and you give yourself a specific area of the page (different form the rest of your text) that you can target from your CSS file using specificity.
Secondly it's good practice to have all text on the page within HTML's predefined elements. So put a paragraph in a <p> element and any headings in a <hn> ~ where n is the required level of your heading. <h1> is ususally the overall page heading ~ used only once.. then sub-headings, like book titles, are generally <h2> or <h3>.
Yet will this create conflict or is it safe to do.
To produce your stylesheet now, you need to think the other way around.. i.e. don't write your HTML to suit your design, write HTML logically and then design to suit it ;)
if you're using <span>s because there is no "spacing" between them, then don't worry CSS can also control/override the default spacing that is given to <p> and <hn> elements..
So to get specific or not as the case may be.. if the majority/ main text color on the entire body of your pages is tan, then you could assign that color directly to the body element in the CSS file:
body {
color: #d2b48c;
background: #fff;
}
That would ensure you only ever have to override it where necessary as opposed to putting in classes everywhere on the page.. but for this example I'll assume that the division we've created is actually a different color from your main body text..
to specifically target the review div from the CSS:
div.review {
color: #d2b48c;
background: #fff;
}
assigns the color tan to the entire div with the classname of "review"
The heading <h2> and the <p>'s within this division will inherit the color from their parent {the <div>} so they are now all tan..
If you then want the the <h2> to be a different color, size, font-weight etc.. you just need to target it a bit more specifically.
div.review h2 will target only <h2>'s whose parent is div class="review".
div.review h2 {
color: #000;
background: transparent;
font-size: 120%;
}
Then lastly re: the last paragraph if that's a comment/note that you would like to be in a different color you could logically use a span there if you want or if it's a feature that will be used many times then just put a different classname onto the <p> element itself
<p>This was a <span class="comment">Kewl</span> book</p>
or:
<p class="comment">Kewl</p>
depending on if you only want to "highlight" part of the paragraph or not..
Notice how the <span> is just used to span part of an existing element, whereas to use <span> in the second example would be to use an unneccessary extra element, because the class name can be put directly onto the <p> instead..
either way the CSS would remain the same:
div.review .comment {color: #add8e6; background: transparent;}
Because in that CSS rule we didn't specify that .comment actually be attached to a specific element just who it's parent element is, it will target all elements (<p>, <span> etc... ) with the classname ="comment" inside the review div and will make them lightblue.
The whole example put together with some examples of controlling the spacing too...
CSS:
div.review{
color: #d2b48c; /* tan */
background: #fff;
}div.review h2 {
margin: 0; /* remove default margin */
padding: 5px 0; /* this gives required top/bottom padding ~ adjust to suit */
color: #000;
background: transparent;
font-size: 120%;
}div.review p {
margin: 0;
padding: 5px 0;
}div.review .comment {
color: #add8e6;
background: transparent;
}
HTML:
<div class="review">
<p>This will be tan</p>
<h2>Foundation</h2>
<p>this will also be tan so I won't need to type the span class again.</p>
<p>This is a <span class="comment">Kewl</span> book!</p>
<p class="comment">Kewl</p>
</div>
I think you may also find Nick's CSS Crash Course [webmasterworld.com] helpful!
Good Luck
Suzy
