Although we looked at a few examples in the previous article on writing CSS code, let’s look at it a little more in depth. We will focus on the external stylesheet, but the same principles that are covered there can be translated to internal styling and inline styling.

HTML Element Styling

CSS can style HTML elements based on the element type, the element’s class, or the element’s id. What that means is that CSS takes the HTML element and applies styling to it. Some examples of element types include: <p>, <a>, <div>, etc. We’ll start by styling the paragraph <p> tag below.

<p>
    This paragraph will contain text that will be stylized by an 
    external css document. Open style.css to view the content. 
</p>

If you view the file in the browser, the paragraph will be displayed with the default browser styling.

For demonstration purposes, we’ll add the following styles to the <p> tag:

• Change font color to dim-gray
• Change the font weight to bold
• Add padding to the paragraph
• Set the maximum width of the paragraph to 300 pixels
• Add a solid black border around the paragraph

/* 
    style.css 
    CSS Stylesheet 
*/

p {
    color: dimgray;           /* Text color */
    font-weight: bold;        /* Make font bold */
    padding: 10px;            /* Internal padding */
    max-width: 300px;         /* Set container max width */
    border: 1px black solid;  /* Add black border */
}

After saving the file and refreshing the index.html page in your browser, you’ll notice that the paragraph tag, and the content inside it, have changed drastically.

 

For each other HTML element, you will repeat a similar process. You enter the element name (selector) followed by curly braces. The declarations will be written inside the curly braces. Each declaration is written in a property: value; pair. The property is the type of style that will be applied, and the value is the acceptable term that’s allowed for that specific property. For example, the color property expects one of the following values:

• Keyword color value: red
• HEX color value: #0000FF
• RGB value: rgb(100, 80, 100)
• RGBA value: rgba(100, 80, 100, 0.3)
• HSL value: hsl(100, 50%, 65%)
• HSLA value: hsla(100, 50%, 65%, 0.4)

Comments can be added to your CSS external file and enclosed in /* */. The comments are there just for you. You’ve already seen comments in action in the external stylesheet in the previous article and this one.

Styling through ID’s

Applying a style to an HTML element is a great way to change the style for all HTML elements with the specified tag. However, if your document has multiple, identical HTML tags, but you want to change only one or a couple, a new approach must be introduced. If your document has multiple <h3> tags and you wanted each <h3> tag to contain its own style, the HTML id attribute would work perfectly. The id attribute must be unique per HTML document. We start by adding the id attribute to each <h3> tag that we want to modify.

<h3 id="first-h3">First H3 Tag</h3> 
<h3 id="second-h3">Second H3 Tag</h3> 
<h3 id="third-h3">Third H3 Tag</h3>

Without adding any styling yet, the <h3> tags would produce the following result:

We can open our external stylesheet (style.css) and apply a unique style to each id. In order to specify that the style is for an id, and not a selector, the pound sign, #, is used.

#first-h3 { color: red; }
#second-h3 { color: green; }
#third-h3 {
    color: #0000FF; /* Blue */
    padding: 30px;
}

If we refresh our page, you will notice that the first <h3> tag has red text inside it, the second <h3> tag has green text, and the third <h3> tag has blue text with some additional padding.

Styling through Classes

To apply a style to multiple, but not all, tags of one type, the class attribute must be used. Unlike the id tag, which must be unique, the class attribute does not need to be. Let’s create the <h4> tags inside our HTML document and add the class attribute to each element.

<h4 class="first-h4">This tag's style will look identical...</h4>
<h4 class="first-h4">...to this one.</h4>
<h4 class="second-h4">This one's style will look identical...</h4>
<h4 class="second-h4">... to this one right here.</h4>

To reference the class attribute inside the external CSS document, a period is used prior to the name of the class.

first-h4 {
    background-color: rgb(100, 255, 80); /* Greenish color */
    padding: 10px;
    max-width: 400px;
}
.second-h4 { color: hsl(50, 30%, 60%); } /* Tan color */

The following result is produced when you refresh the page inside your browser.

The first two <h4> elements have a green background color, while the second two <h4> elements appear tan in color. The class and id attributes can be applied to all HTML elements.

Multiple classes can be applied to one HTML element. To add a second class to the first element, separate the class names with a space. We’ll start by creating the two styles in our CSS document.

.red-background { background-color: red; }
.h5-padding { padding: 10px; }

Let’s add the two classes to the <h5> tag in our HTML code.

<h5 class=”h5-padding red-background”>
    This background will be red
</h5>

I think this is a good time to stop and digest. Next time we’ll cover more styling.