Learn CSS – Part 2: Other Ways to Write CSS

If you read my last CSS article, you learned that the preferred method for writing your stylesheet is in an external document. In today’s lesson, you’ll be introduced two additional HTML tags and two attributes that you’ll use quite often in your CSS career.

Learn CSS: Other Ways to Write CSS

Learn CSS – Part 2: Using The HTML DIV Tag

The HTML Div Tag, <div>, or the divider as it’s called, works similar to the paragraph tag <p>, HTML Tags – Part 1: Structural Elements, in that it creates a division of the content within the document. But the major difference is that the <div> tag is use to section off a larger area of content.

Here is how to write the <div> tag and what it will look like in the browser:

HTML Div Tag Example

Alone, the <div> tag doesn’t look very appealing but it does give you leeway into adding additional content to your page, unlike the paragraph tag. When you get to my articles Learn CSS – Part 6: The Box Model and Learn CSS – Part 7: Positioning, you’ll learn how to accurately position both div tags next to one another and adjust their contents.

Learn CSS – Part 2: Using The Class Attribute

Stylesheet coding can be added to any HTML element but a more refined way of adding them is to use the class attribute. The Class Attribute, class=””, holds a name, of your choosing, that will refer to a line or more of CSS commands that you want to use for a specific HTML element.

Before you can add the CSS coding, you have to provide a name for the class attribute. The following is a list of good naming conventions.

  • .upperCase
  • .greenbg
  • .border2pxSolidRed
  • .img_src_thumb
  • .p-font-size-12px

Each class name starts with a period (.), a letter, and is followed by either a string of letters, numbers, hyphens (-), and/or underscores (_). Including a space ( ) or adding symbols, such as the ampersand (&), dollar sign ($), or at symbol (@) are not permitted. Here is an example of an external stylesheet that uses a class attribute for a <div> tag:

External Stylesheet

.upperCase {text-transform: uppercase;}

HTML Document

<div class=”upperCase”>

<p>All of the copy in this <div> tag will be uppercase.</p>
<p>It doesn’t matter what paragraph the copy is in, as long as it’s in this particular <div> tag.
</p>

</div>

Results

ALL OF THE COPY IN THIS <DIV> TAG WILL BE UPPERCASE.

IT DOESN’T MATTER WHAT PARAGRAPH THE COPY IS IN, AS LONG AS IT’S IN THIS PARTICULAR <DIV> TAG.

As you can see, the class attribute has to be placed within the <div> tag with the name of the class name inside of double quotes. This can be use in any HTML Element.

Learn CSS – Part 2: Using The ID Attribute

The same tactics for the class attribute can be done when you use an id attribute. An ID Attribute, id=””, uses the same naming convention a class uses when defined inside of an external stylesheet. The only difference is that instead of using a period in front of the name, you’d use a pound sign or hash tag (#). After that, the rest is the same:

External Stylesheet

#boldText {font-weight: bold;}

HTML Document

<div id=”boldText”>

<p>All of the copy in this <div> tag will be bold.</p>

<p>It doesn’t matter what paragraph the copy is in, as long as it’s in this particular <div> tag.
</p>

</div>

Results

All of the copy in this <div> tag will be bold.

It doesn’t matter what paragraph the copy is in, as long as it’s in this particular <div> tag.

The difference between the class and id attributes is that the same class can be used on as many HTML tags as you want within a webpage. The id can also be used on many elements but its CSS coding commands should be used for one specific HTML element. So if you created #fontSize12px for one paragraph, it should not be used for another paragraph or any other HTML element.

Learn CSS – Part 2: Using The HTML Span Tag

The HTML Span Tag, <span>, affects only the content it is surrounded by. If you recall the inline styles section in Part 1 of this series, using the style attribute within an HTML tag allows you to focus on one segment of your document. The <span> tag does the same thing but it will require the use of the Class or ID attributes.

Here is an example of how you can use the <span> tag.

<p style=”font-size: 18px;”>All the copy in this paragraph, <span id=”fontSize12px;”>except for this section</span>, has a size of 18 pixels.
</p>

In the example above, the paragraph uses the style attribute and tells it to make the font size for this paragraph 18 pixels. The <span> tag hones in on the words “except for this section” and makes it stay at a font size of 12 pixels by using the ID attribute “fontSize12px”.

All the copy in this paragraph, except for this section, has a size of 18 pixels.

Your Thoughts On Learning CSS

As I wrap up this article, I want get your thoughts…

What creative use do you see in utilizing the <div> and <span> tags? If you had a choice, which attribute would you use most often and why? Leave a comment or question on my Facebook Page.