Lesson 7 - Class struggles in CSS
IDs and Classes
So far we've learned how to styles tags in CSS. While this gives us a lot of freedom with the design, there is one major problem. If we want to style a type of tag, we have to style everything on the HTML page that falls under that type of tag. All paragraph tags have to be styled the same, all h3 tags have to be styled the same, etc. What if we want to style just one specific paragraph tag (or any tag) a certain way? Luckily in CSS there is an easy way to do this. By using the tag attribute "id", we can give any tag a unique value (ID), we can style it by name in CSS.
In the code, the HTML is written like this:
<p id="myname">paragraph</p>
On the stylesheet, you can style an ID similar to a tag. IDs are designated with the "#" mark:
#myname {font-size:24px;}
Now, what if you want to give certain tags a similar look? Similar to IDs, you can give tags a Class and style them independently of the their tags. The difference is that many different tags can fall under one class and are styled together by class. Not everything has to be styled the same, just what is styled specifically on the stylesheet. For instance, say we wanted to make all the headings red in one area, we would give them all the same class:
<h1 class="redheadings">big</h1>
<h2 class="redheadings">medium</h2>
<h3 class="redheadings">small</h3>
Now all these headings can be styled in a group by class. If we want to make them all red, we can write that in the stylesheet. Classes are designated with a "." symbol:
.redheadings {color:#ff0000;}
The best way to understand how classes work is to try them out.
Divs and Spans
Now we know how to style individual tags with IDs and groups of tags with classes. But what if we arbitrarily want to style a block of text or a single line? So far we have learned to write HTML in a semantic way, but sometimes we want to make our own tag so we can style the content by our own rules. That's were divs and spans are useful. Div means "division" and is a way to put your content into its own division. Divs don't have a default style like headings or paragraphs, but be styled exactly like other tags. Most often, divs are used in conjunction with IDs to really style one section uniquely.
If I wanted to put three paragraphs together in a single column in the middle of the page, I would make a div just for those three paragraphs. Divs open and close like most tags, with all the affected code in between. I would write it like this:
<div id="maincolumn">
<p>This is the first paragraph</p>
<p>This is the first paragraph</p>
<p>This is the first paragraph</p>
</div>
Because this div has a unique ID, I can style these three specific paragraphs however I want by its ID in CSS. One thing to remember is that divs are block level and will create a new line before and after the opening and closing tags, much in the way that paragraphs do.
Spans are exactly like divs, except they are "inline", meaning that they don't break to flow of text like divs do. In this way they are very similar to <em> and <strong> tags. Often times, spans are used with classes to call out certain phrases. One common usage is to put the first letters of paragraphs in spans with the same class so we can style drop caps. That would be written as such:
<p><span class="dropcap">T</span>his the first letter of the paragraph.</p>
If we put this class on the first letter of every paragraph, we can create some really interesting text styling. Once again, we can style this by its class in CSS.