Introduction to Cascading Style Sheets (CSS)

Hey there! Congrats on your decision to use CSS in your projects.

Making great looking websites is SO much easier when you know just the basics of CSS. That’s why I created this guide for you.

This guide walks you step-by-step through learning and using CSS.

First we’ll get familiar with CSS, what it’s used for, and why. Once you know the basics, you can start running with it. After this introductory section, we will turn to the heart of the piece: the tutorial.

Also, just to give you an overview, here are the sections of the tutorial so that you can jump around if you need to:

Also, here are jump links to the sections on this page:

Let’s get started!

Cascading Style Sheets (CSS): An Overview

CSS, which is the acronym for “Cascading Style Sheets,” is a version of HTML language that allows you to alter the fonts, margins, lines, height, width, background images, color, and other features on your webpage.

This extension of HTML, while not challenging to use, can take some time to learn. Whether you are a professional or a website owner, having background in a bit of HTML and CSS enables you to take your website design a step further. You can create amazing emails, corporate newsletters, and alter your company’s WordPress website in many new ways.

One very simple example of an HTML tag is:


<u>text you want to underline</u>

While this is a fine approach, the trouble is that now, if you want to change the text that you initially underlined in your text, then you need to go through every single area that you wrote the code into and tweak it. Essentially, it’s an easy fix that is also very time consuming.

Another issue that you will encounter is altering the text by adding color, a different font, and the like. Similar to the concept above, if you want to change the text in certain ways, your HTML code will get to be a bit more complicated.

Here is an example:


<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">
<strong>This is text</strong></font>

The code line above is now not only bolded, but the font style is also now Verdana instead of Arial or Helvetica or Sans-Serif. The more styles you use on a one-off basis in your code, the messier your HTML gets.

If you do opt for this system, know that it is only really ideal for smaller webpage projects or when you need to work on one page. For multiple pages, normally you would need to copy the above code into every single webpage. As you can image, this is also time consuming and it can also make each page look pretty cluttered.

Moreover, it is likely that not every page is going to have the same style. As a result, you would need to tweak the code repeatedly on each page to achieve the look you are aiming for. The simpler strategy operates much like JavaScript does. Like with JavaScript, you can create a separate file that links to the webpage that you would like to make changes to.

In the next section below, we’ll learn how to use a stylesheet:

back to menu ↑

Getting Started With CSS

Creating Your Stylesheet

A linked external stylesheet is the best way to control styles easily across your whole website. The first step in the process is actually quite easy. Just open a text document on your computer; if you are using windows, then right-click and click “new text document.” Once you have the text document set up, change the form of the file from .txt to .css.

What we just did here is change the file type by altering the extension. The extension is what notifies the computer what files you are working with and since the computer now knows you are working with a .css file, it will open it differently as opposed to a .txt document.

When it comes to .css files, the extension is not really the major change that takes place. What really is significant is the text in the file. This is where you’ll add CSS “code” that controls the styles on your webpage.

The stylesheet contains all the styles you want to use for any elements on your site, and all you have to do is assign styles to those html elements using classes – the styles will be applied.

For example, let’s say you want to style the text in the paragraphs below (the text inside the p tags):


<h3>Section Title</h3>
<p>This is a paragraph on my site. I want to style this text.</p>
<p>This is another paragraph on my site. I want to style this text too.</p>

Let’s add CSS code in your stylesheet to accomplish this. We’re going to create a new class called myParagraph:

.myParagraph {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

Now you can apply that style to the html in a very clean, simple way:


<h3>Section Title</h3>
<p class="myParagraph">This is a paragraph on my site. I want to style this text.</p>
<p class="myParagraph">This is another paragraph on my site. I want to style this text too.</p>

But hmmmm… There’s still some redundancy there. We had to use class=”myParagraph” for every single paragraph.

Let’s imagine you want all the paragraphs in your articles/posts to be styled a certain way by default. Here’s a way you can accomplish this:


<div class="post-content">

<h3>Section Title</h3>
<p>This is a paragraph on my site. I want to style this text.</p>
<p>This is another paragraph on my site. I want to style this text too.</p>

</div>

As you can see, I’ve added a div which is wrapped around all the html we previously used. To make this a bit more visual for you, I’m going to add some more code to make it look a bit more like an article. I’ve also explained why I used h2/h3.


<div class="post-content">
<h1>Article/Post Title</h1>
<p>Some introduction text goes here.</p>

<h2>Main Section Title</h2>
<p>h2 (heading 2) tags should be used for headings in your article.</p>

<h3>Sub-Section Title</h3>
<p>h3 (heading 3) tags should be used for headings of sections that are children of the h2 section above.</p>
<p>This is a paragraph on my site. I want to style this text.</p>
<p>This is another paragraph on my site. I want to style this text too.</p>

</div>

Now, remember our myParagraph class from earlier?

.myParagraph {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

Now we’re going to change that to this:

.post-content p {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

Recognize “post-content” in there? Yep! That’s the class we used in our div that wraps around all the headings and paragraphs in our code.
This tells the browser to apply the style in .post-content p to all p tags that are within that div with the class of post-content.

Another Method – Resetting default CSS for html elements

Another method to apply CSS is to change the way the HTML tag looks by globally redefining it, like so:


h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }

In the example above, the code set the font style and size for all h1 tags – all in one go. As you can tell, you now do not need to go through your entire document to alter or apply a CSS class since everything has now changed automatically.

Below is what a page-wide change would look like that gives the page larger margins:


body { margin-left: 15%; margin-right: 15%; }

The great thing about redefining tags is that you can change the appearance of the page.

For example, here is a more powerful and extensive change:


div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}

In the above example, instead of using the extensive code for “green,” we just added the word “green.”

Essentially, we got the exact color by using the code – you just need to make sure you know the names of the codes when using this approach. There are many programs that you can use to figure out the values of the code.

Finally, here is another CSS code example that enables you to generate link roll-over effects sans images:


a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }

With the CSS code above, your webpage links will change color when a user hovers over the link with their mouse. Voila! Now you have instant rollovers without pesky images involved. When using the code above, the key thing to remember is that the style declarations must be in the correct order – for instance:

“link-visited-hover-active”

If you do not use the correct order, the code may break in a few browsers.

What we have just covered allows you to do some pretty neat things to your webpage and is just enough to get you started. Overall though, CSS has many capabilities, but most people do not need to use the majority of them. Also, you should not feel obligated to use CSS. It is just a tool to give you more leeway when constructing your webpages.

Now that you’ve made completed the overview and introduction to CSS, let’s continue to part one of the CSS tutorial (with code examples).

Proceed To The Next CSS Tutorial
We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0