Work in progress

Learn CSS

CSS stands for Cascading Style Sheets. CSS is a sister technology to Hypertext Markup Language (HTML), because it enables you to modify the appearance of your HTML. If you think of a website as a house, then HTML is used to provide structure like the frame, walls, appliances and furniture, while CSS is used to paint the walls, hang the lights, frame the pictures, and even to position your furniture.

This introduction to CSS assumes that you know basic HTML. If you have not learned HTML yet, then I recommend you read HTML.Haus for an easy to read single page tutorial.

What is CSS?

CSS is a specific language for styling web pages written in HTML. You can change the color and size of HTML elements with CSS. You can change the font of textual elements, as well as characteristics like bold, italics, and spacing. You can change the layout of a web page as well as where the elements display on the page. If HTML lets you build with raw materials, then CSS gives you a paint brush, a measuring tape, a level, all the tools you need to refine the appearance, layout, and style of a page.

If you completed the HTML.Haus tutorial, then you've already seen a little CSS, at least in its simplest form. The easiest way to start using CSS is by applying it directly to individual elements using the style attribute in your HTML:

Think of London, a small city

Inline Styles

This way of using CSS is called in-line styling, because the styles appear in the same line as the HTML. You can probably see the shortcomings of this approach almost immediately. If you want to make all your paragraphs display in blue, then you'll have to add this style attribute to each one. That's going to quickly add up to a lot of duplicative work, and if you ever want to change the color later on, then it'll be even more work to update each one.

Build to Learn

Before we go any further, as a part of active learning it's important to do exercises and practice, as well as read and comprehend. Actively exercising the knowledge you just learned actually ingrains that knowledge in your brain, making it accessible later on. For that reason, for every concept we learn, I highly recommend you try it yourself. Take the sample I provide and make it your own by changing the styling. Typing it out and practicing will really help with your retention. You will learn best through this tutorial by building a number of sample pages and styling them alongside the exercises.

Learn as you build.

Embedded Styles

Let's get back to our problem of having to add a style attribute to every HTML element we want to change. There's an easier way to do this. If you want to add styles to an entire page, then you can also put these in the head section of your HTML.

Here's an example:

Copy and paste the code above into a text editor and save it as 'index.html'. Opening it with a browser will give you a local playground where you can safely complete the rest of these exercises and continue learning CSS. Just save your file, then reload your browser to see your changes.

Alternatively, you can click here to Download the HTML.

As you can see in your local playground, we've changed the color of both paragraphs. How'd we do it? These 5 lines of code:

What we see defined above is a CSS rule. Each CSS rule is composed of three parts: selector, property, and value:

These three parts break down succinctly as:

• Selector defines the target of the rule or what part of the HTML this rule will be applied on (e.g. all p tags or paragraphs).
• Property defines what about the target is going to be changed, so in this case it's the font color of paragraphs.
• Value defines the property's new setting, so in this case, the font color property now has a value of royalblue.

This second way of defining styles is more useful, because you can define rules that apply to an entire HTML web page. Think of all the HTML elements you know. You can now change the color of anything! However, once again, you're probably already asking questions about the shortcomings that might accompany using the style tag in the head of your document.

Questions like:

• What if I have a lot of CSS rules? My head element will be really big.
• What if I want to share the same styles across multiple pages?

The final (most widely accepted) way to incorporate CSS into HTML is through using external stylesheets.

External Styles

You can link to a separate CSS file where you save all of your rules apart from your HTML. This answers both of the questions above, because now you can reference as many external stylesheets as you need, and you only need a single line of code for each stylesheet. Let's see what that looks like.

Your index.html file would contain the following:

Do you see the new link element in the head?

While your styles.css file (which needs to be in the same directory) would contain the rule:

By adding the link element, identifying the relative reference as being to a stylesheet, and through using the href attribute to refer to the location of that stylesheet, you tell the browser what CSS rules to apply to the HTML document it just received. The CSS sheet referenced can contain any number of rules.

Now that we understand how to incorporate CSS in our HTML, let's learn the different ways we can select elements.