How to Use CSS

There are three different ways that you can use CSS: inline, as a dedicated file loaded with a meta tag, and as an HTML tag.

Although any one of the three methods will work, I believe it is important to learn all three in case you need to edit CSS code created by someone else.

Inline CSS

With inline CSS, the code is placed inside of the HTML tag that will be altered by the CSS code. This method is the most straightforward, although it also has some drawbacks and limitations.

First, this method tends to create bloated code (more code than what is really needed). This happens because every HTML tag that needs to be altered with CSS needs dedicated inline CSS code to accomplish that. This can result in the same CSS code being repeated many times on a single page, which is the code bloat.

When inline CSS code is overused, you can cause web pages to load slower because of the extra data that needs to be loaded. However, this delay from CSS code bloat is honestly fairly minimal because of the small file size for text compared with other things like images.

As long as you do not find yourself repeating the same CSS code over and over again on the same page, you can use this method without worry.

A major advantage to this method is the ease of use, especially for those just getting started with CSS. The other two methods of using CSS both require additional information in the CSS code to identify the HTML tags that will be altered, while this information isn't needed with inline CSS because the code alters the tag where it is used.

To use inline CSS code, you simply use the STYLE attribute on an HTML tag. The value of that attribute is the CSS code.

I have provided a brief example of inline CSS code below:

<a href="http://ryanstevensonplugins.com/" style="font-weight:bold;color:#FF0000;">Ryan Stevenson Plugins</a>

Note the STYLE attribute in the HTML code above. The value of that attribute is the CSS code, which is enclosed in double quotes. The basics of this and other CSS code will be explained in more detail in the next chapter.

HTML Tag CSS

The next method for using CSS is typically used inside of the HEAD tags of a page, but it will still work when used anywhere in your page content as long as it is used before the content you want to alter.

This method (and the meta tag method covered next) offers the most control, but this control also requires some extra work to identify the HTML tags that should be altered with the CSS code.

To use this method, start with an opening and closing STYLE HTML tag. The opening tag needs the attribute TYPE with a value of text/css. Anything between the STYLE tags will be CSS code.

The big difference between this CSS code and the CSS code used for inline CSS is that this code needs identifiers. Identifiers will be discussed in more detail in the CSS basics chapter next.

I have provided a brief example of a CSS STYLE tag below:

<style type="text/css">
a {font-weight:bold;color:#FF0000;}
</style>

In the example above, I actually used the exact same CSS coding from the inline example. However, you should notice the letter 'a' at the beginning of the line and the opening and closing brackets around the CSS code: { }

The letter 'a' is the identifier for that CSS code, which applies to all of the CSS found between the brackets in front of that identifier.

META Tag CSS (Dedicated File)

This last method of using CSS is actually considered to be the best to use, simply because it makes for cleaner code by keeping all of the CSS code in a dedicated file that is simply loaded by the page. However, this method also requires the most work and can be the most confusing for beginners to use, especially using WordPress.

This method works exactly like the HTML tag method above with one main exception - the CSS code for this method is in a dedicated CSS file and is loaded by a META tag. This tag should always be in the HEAD tags of a page. If you are using WordPress, your theme may offer you a way to easily add code to the HEAD tags.

I have provided a brief example of a CSS META tag below:

 <link rel="stylesheet" href="https://ryanstevensonplugins.com/wp-includes/css/admin-bar.min.css" type="text/css" media="all" />

In the example above, I have used the LINK HTML tag to load a CSS file. A few attributes are required for this tag to work. The REL attribute should have a value of stylesheet. The TYPE attribute should have a value of text/css. The value of the HREF attribute is set to the website URL for the CSS file you want to load.

Also note the MEDIA attribute with a value of all. This actually controls whether one or more CSS stylesheet is used depending on what is accessing the page. All is the default value, which simply makes this code work for everything that accesses the site. However, you could create multiple CSS files (one for each type of device) and use different values of MEDIA to declare a specific CSS file for each device. These devices can be used as the value of the MEDIA attribute: all, aural, braille, handheld, projection, print, screen, tty, & tv. All, handheld (mobile/touchpad), print, and screen (computer screens) are the most commonly used of these.

If I was using the example above to load a CSS file that had the same CSS code from the previous two methods, the example below shows the entire content of that CSS file:

a {font-weight:bold;color:#FF0000;}

As you can see, the CSS file simply contains the code that was between the STYLE tags in the previous method.

In the first method, I mentioned CSS code bloat. Imagine that you had a web page that had 20 links, and you wanted to style them all the same way using CSS. If you used inline CSS code, you would have to repeat that same code in the STYLE attribute of every link. However, by using the HTML tag or META tag method, you could simply have one line of CSS code that changed the style of all of the links on the page (like the example code above does).