External Style Sheets

syntax summary

When it comes to designing and developing anything for the web or projects, you will always want to take the most efficient route to handling tasks. This is where the phrase "work smarter, not harder..." will come into play.

An external style sheet is the most efficient, and therefore, the most common method of implementing style to web projects. This is so because an external style sheet has the ability to cover the styling of more than one HTML file, thus making it possible to style an entire website with just one style sheet. 

So instead of having to hash and type out the same lines of code over and over and over again in an internal style method...with an external style sheet, you do away with all that nonsense, and just have one unilateral styling source for your website to refer to. 

As a matter of fact, the most difficult part about external style sheets, for me at least, was learning how to inject them into my code. It took several tries and attempts to get it right...but once I got the hang of it, they're like second nature and essential like blinking.

how we do...

The first thing you will need to do is create the style sheet.

This is done by creating a new document for your project folder, naming it whatever you will, and finally, ending the document with a .css extension. The .css file extension is what tells the browser that the document at-hand is a style sheet, and should be treated as such.

Now, because tidiness is an important virtue, keep your CSS files located in a separate folder. This will make things much easier as your web projects develop along with your coding abilities and you will find this practice to be quite useful.

Now that you have your CSS file created, you will need to have it so that your HTML document will link to it and be able to process it. To link your HTML document to the style sheet, you will need to create a link-tag in the head section...as so;

<head>
  
 <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
  
</head>

Now, you may notice something, there isn't a closing tag for the link-tag we just added. That's because the link-tag is a self-closing tag, and therefore, doesn't need a closing tag.

So what you're going to want to do is run a simple "background check."

So what you'll do here is make your background a certain color. We're doing this to test to see if the HTML document and the stylesheet are properly linked.

The first thing you should do is setup your HTML document, as I did here...

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    </head>
    <body>
       <h1>This is a background check...</h1> 
    </body>
</html>

Okay, now we need to setup our style sheet. A couple things, make sure your style sheet has a .css extension and that it is saved in a folder labeled css. In your style sheet, we're going to write out a few rules for the h1 element in our HTML document. Like this;

h1 {
    background-color: darkcyan;
    color: white;
}

If everything worked out, then what you should have appeared with your text editor is something like this;

This is a background check...

Alrighty, I know this was a lot to take in, but trust me, this is just the beginning of something really great and is opening you up to something powerful and useful to your coding life.

Go ahead and play around with this, and try to create and link a few external style sheets.

Until next time.

Encycodepedia is a reference guide to the common syntax and terminology used in everyday programming.

Encycodepedia CSS covers the styling component of building websites.