CSS applying-css-styles-part2

Published on May 21st, 2013 | by Mark Ammay

0

Applying CSS – Part 2

In the previous guide we learned how to use HTML to build the beginning framework of our awesome site. Now, let’s begin applying CSS styles for our website. If you haven’t done the first part of this Introduction Course to building a website, you can go there by clicking here: HTML Basics.

Did You Know? CSS stands for Cascading Style Sheets. In short, the order in which you style your website’s elements are weighed and prioritized, so it knows which “style command” will trump the other. We’ll talk more about this later on.

What You’ll Need:

What You’ll Learn / Get:

  • CSS basics
  • 4 Methods to Adding CSS
  • A prettier HTML document

The above code is using what we call inline CSS because we are directly putting our styling properties in the HTML itself. This way of putting CSS takes highest priority over the 3 other ways you can integrate CSS. This way is not bad, but it is highly insufficient and can clutter your HTML.

Imagine trying to style and decorate your house before the walls are even put up! What a mess! And worst, imagine trying to sell the house… you’d have a very hard time separating and removing your decoration from the wooden framework!

The same goes with your website styling. Let’s say you apply the same CSS styles to every <p> tag, but then wanted to change its style in the future. If you did it all through inline CSS, you’d have trouble changing every single <p> tag!

This is why we should be using this method of applying CSS only as a last resort. For now, let’s avoid this way, and focus on more efficient ways.


4 Methods of Adding CSS

Here are the 4 methods of adding CSS to your website, and a brief explanation of each use. Later on we will uncover the advantages and disadvantages to each method.

  • Inline CSS: What you just saw in the above code. The CSS style is added within the HTML elements itself.
  • Embedding CSS: This is when you place your CSS styles together as part of your HTML document, in the <head> tag.
  • Linking to a separate CSS file: This is the most common method of adding CSS, by linking to an external file.
  • Importing a CSS file within CSS: By linking to multiple CSS files within one file, you save time during maintenance mode.

Method 1: Inline CSS

Here’s a piece of HTML code that we’re going to be improving through the different CSS methods. It uses inline CSS.

 Pros of Inline CSS – The advantages of using inline CSS is that it takes the highest priority over all the other methods. This is especially helpful if you just need to style one element but don’t have direct access to the CSS file.

Cons of Inline CSS – In the above example, it would be a nightmare if we needed to apply all that CSS to each and every <p> tag on the whole website! Maintenance would be hard, and your HTML would have high amounts of code bloat.


Method 2: Embedding CSS

Let’s improve the way we use CSS by separating the style from the HTML framework. We can do this by adding the CSS to the <head> tag, and to embed CSS all we need to do is add a few lines of code in the <style> tag, like so:

What does this mean? Here we are declaring in our CSS (which is now in the <head> tag of our HTML document), that we want all <p> tags to have the following style applied to them. Now, we no longer have to apply the style to each and every <p> tag on every single page!

Here is an example of the complete code (lines 5-12):

Pros of Embedding CSS – The advantages of embedding CSS is that you can control the style of your page better, by separating the CSS from the HTML. We are one step closer to better coding!

Cons of Embedding CSS – Although we improved our code by separating the CSS from the HTML, we still would need to embed CSS on every single page we have on our website. Maintenance would still be tedious! So now, let’s imrpove our CSS even more by linking an external CSS file.


Method 3: Linking to an External CSS file

Linking your web pages to an external CSS file is by far the most common method to adding CSS. It allows you to declare the style of all your elements through a central source, therefore maintenance will be a breeze. If you need to change the CSS of something, you only need to do it once, on this CSS file (not every single page, and definitely not on every single HTML element).

Follow Along

For this exercise, let’s create a folder on your desktop called “My Awesome Website” like so:

my-awesome-website

Create an index.html page by going to your text editor and saving that file as “index.html“. Then, create a new document and save that as “styles.css” like so:

css-files

In your “index.html” copy and paste this code. This is just the HTML structure, without any CSS at all:

What does this mean? Here you have a basic HTML document with a <link> tag declaring that you want to like a style sheet at “styles.css”, the empty .css file you created earlier. This is what links the external CSS file.

And now, copy and paste this CSS code into your “styles.css” file:

What does this mean? In your external CSS file called “styles.css”, you are declaring your styles in this central place. You are saying that you want all your <p> tags to have an Arial font, size of 14px and with a  color of Dim Gray.

Now if you preview your index.html file in your browser of choice, you won’t see anything too exciting yet. This is just to demonstrate how to link an external CSS file.

Pros to Linking an External CSS file – The advantages of linking an external CSS file is that you now have a central place where you store and modify your CSS code. If you need to make a global change to all of your styles, you can do so in an instant with one file update. This method also renders your page quicker since it doesn’t have to reload it every time you refresh the page.

Method 4: Importing a CSS file

For the sake of this guide, we don’t have to get into this method too much; you just need to be aware of it. The import method basically lets you link an external CSS file within another CSS file. This is especially helpful if you have a large website and need to add another CSS file. Would you rather go through every single page to link to this external CSS file, or would you rather just add one line of code to your main styles.css file? The latter sounds easiest and most efficient.

Here’s what it would look like:

Really Brief Explanation of Selectors

So far you’ve used a CSS element selector within your CSS; you styled the <p> tag by using the p selector. Now let’s talk about a few more CSS selectors:

  • element selectors – Targets all p, div, h1, h2, h3, body, and other HTML elements.
  • ID selectors – Targets all elements with a specific ID.
  • class selectors – Targets all elements with a specific class.
  • :hover selectors – Targets all “hover states” for your <a> tags or links.

There are many more CSS selectors out there, but this will get us started. Here’s my JSFIDDLE where I demonstrate a few different CSS Selectors, to style my very basic page: http://jsfiddle.net/markammay/hwB22/1/

Experiment: Take a look at my JSFIDDLE code sandbox and experiment with the CSS selectors. Note that I declared the <p> tag to have a specific font size and some padding, but I also targeted specific <p> tags by their class attribute and gave those selectors more styling.

css-selectors

Do You Like This Guide? Help support this website and all the guides by sharing this n your social networks such as Facebook and Twitter! Share this page!

Up Next: JavaScript Interactivity, Part 3

In the next guide, we add some interactivity to our web page with JavaScript. See you tomorrow!


Introduction Course Outline:

Tags: , ,


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑