Back to Basics: The Beauty of External CSS

Occasionally, web design can be a a meticulous and frustrating job.  Don’t get me wrong, web design is my passion but sometimes it can be down right annoying.  Luckily for us, we have a beautiful magical thing called cascading style sheets AKA CSS!  Get this imprinted into your brain right now… CSS IS YOUR FRIEND.  Someday you will be working with hundreds of pages at a time.  Do you want to have to go through every page to change the color of your nav bar or the positioning of a paragraph?  If you answered yes, please check yourself in to the nearest mental health hospital.  If you answered no, welcome to my tutorial to make your life that much more stress free.  Remember, styling things individually in every page is bad and having an external CSS page is good.  Here is how to create and link an external CSS page to your HTML:

First, let’s create the CSS.

If you are using an IDE like netbeans (recommended) all you have to do is right click on the folder that you would like to have it in, and click on new — cascading style sheet.  Now, all the styling that you are going to be doing is going to go into this page.

Next, we are going to have to link this style sheet to your HTML.

(please ignore the rest of the mess and look at the highlighted field)

In your <head> tag you are going to put in something that resembles this:

<link rel=”stylesheet” href=”/yourfolder/yourcss.css”>.  And there you go, your CSS is now linked to your HTML!  Go ahead and try out putting a style in to your CSS like this:

html{
background-color:  black;
}

This will turn your background black.  Nothing too special, just seeing if it works.

And there you have it!  Now every time you make a page make sure to include that link to your CSS in your <head> tag.  This will allow you to edit many pages only one time.  It is also great for relieving headaches, freeing up time, and making the web a better place.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: