Welcome to the CSS introduction! In my earlier posts, I went through the basics and some of the advanced parts of HTML. If you’ve read them, you hopefully have a good understanding of HTML and feel confident enough to create your own HTML documents. Just remember that practice makes perfect. From now on, I’ll also try to split up my posts into more bite-sized parts. This means I can go into more detail about specific subjects without a post becoming overly long. If something isn’t clear, feel free to ask your question in the comments! I am constantly learning new material myself and I am trying my absolute best to clearly explain what I have learned.

CSS introduction: what exactly is CSS?

I briefly explained what CSS is in this post. Let’s go over it in more depth this time. CSS stands for Cascading Style Sheets. It’s a language that describes the presentation (or style) of different markup languages, the most popular one being HTML, which is a markup language for webpages. When using only HTML, your options to style the page are extremely limited. It’s also a bad practice to have styling inside of your HTML document. CSS on the other hand gives you a complete toolbox to work with and control how your webpages look.

A great example of how versatile CSS is, is the CSS Zen Garden. There, you can see one single HTML document styled in more than 200 different ways. I strongly encourage you to look at a few of the designs. By doing so, you’ll get a feel for all the possibilities you have when using CSS. Just keep in mind that, just like with HTML, you need to learn the language properly in order to use it to create designs like that.

CSS introduction Zen Garden

In order to write and implement CSS, you first need a document containing HTML. If you already know how to write HTML documents; great! If not, I encourage you to read this post, where I explain the absolute basics, and this post, where I finish the basics and look ahead. If you have finished reading these posts, practiced and really grasp the various subjects and concepts, continue by going through my post about more advanced subjects. When you’re done, come back here and continue!

The Stylesheet

The stylesheet is the document that contains all the CSS you have written. The file extension is always .css (stylesheet.css for example). If you want to create a stylesheet, open your preferred text editor (I recommend Sublime Text). Then, create a new file and save it as <filename>.css. Before we start with a simple CSS example, create a new HTML document with the following markup:

<!DOCTYPE html>
<html>
   <head>
      <title>My first styled HTML page!</title>
   </head>
   <body>
      <h1>Welcome to my first styled HTML page!</h1>
      <p>Just remember though, this won't be looking great just yet, but we'll get there later on. Just keep it locked on iconicdevs.com!</p>
   </body>
</html>

After you have done that, create a new CSS document (it can have any file name). In this document, we will write some very simple CSS to style the above markup. First of all, you need to now the general rule when writing CSS. You start by writing what piece of markup you want to style (e.g. all h1 tags). Then, you choose what property (e.g. color) and what value (e.g. blue) that specific markup should have. As a result of this rule, your basic CSS code looks like this:

Selector {	
	property: value;
}

Take a look at our HTML markup and look at the tags we use in the body. We have one h1 tag and one paragraph tag. Let’s say you want to make the header blue and the paragraph red. Following the general rule, we need two separate selectors, both using the same property, but with a different value.

Learn and take a shot!

I recommend you check out this great list of the most used CSS selectors. Don’t worry if you don’t understand most things on that page. The idea is to give you a feel for the many different selectors and a list to use as reference when you need it. Also, take a look at this reference for CSS colors. It contains valuable information about using the color property.

Before I get to the solution of how to go about properly styling our HTML document, why don’t you first give it a try yourself? It’s by far the best way to learn! When you’re ready to view the solution, check it out here:

CSS Solution

A few important notes.

The first thing most people do is opening their HTML document to see if everything is styled as intended. However, even if you have written the above solution perfectly, your HTML document (when viewed in a browser), won’t be styled just yet.  That’s because we haven’t actually linked the stylesheet and the HTML document. That’s the last thing we learn in this CSS introduction.

Also, note that when using the above solution, you will style all h1 and paragraph tags. 99% of the time, that’s not what you want to happen. That’s why, in a future post, I will definitely explain some of the most used selectors. If you want to get ahead, be sure to use the list I referenced earlier.

Linking your stylesheet

The last concept today, which you normally implement right away when setting up the HTML boilerplate, is linking your HTML document with the stylesheet. First, take a look at the reference page for the link tag. As you will see, the link tag is used to link to an external resource (i.e. outside of your HTML document). Since the stylesheet is also an external resource, you need the HTML document to be linked with it. You do so by adding this line of markup to the head of your HTML document:

<link href="style.css" rel="stylesheet">

The bold part contains the name of your stylesheet. So if you were to name it iconicdevs.css, that’s what you write there. Finally, note that the above example assumes that the stylesheet is in the same folder as your HTML document. If it’s not, you’ll probably need to link to it a bit differently. Since looking up how to do this stuff is part of being a good developer, I will let you find out how to do that yourself!

Wrapping up

That was it for this CSS introduction! As always, be sure to practice and experiment with what you have learned here, because that’s the best way to really solidify your knowledge. Since I have tried to keep this post bite-sized, we’ve only covered a small part of the basics. Next time, I’ll dive further in!

Finally, be sure to leave a comment with your thoughts on this post and what you have gained from it. 

There are currently no comments.