HTML & CSS: CSS Basics

Now that you know some basic HTML, let's get to work on putting some CSS in there to try and style it! There are a variety of ways you can put CSS styling into an HTML document - we will cover three ways (although you'll probably just want to use the first) and some extreme styling basics in this tutorial.

External CSS files

This is the method you'll probably want to use most of the time. It's neat, tidy, works well for multiple pages that use the same styles and is usually considered the standard. Basically you have a (or multiple) ".css" file(s) (the general file type for CSS files) that contain all of your CSS styling, and then you link to this/these in the head of your HTML document (so the browser knows where to look for the styling). To create a ".css" file you do exactly what you did to create the ".html" file - you simply write the file in a text editor (such as Sublime Text or Notepad) and then save it with the ".css" extension.

Once you've created the ".css" file (we'll learn how to actually put some stuff inside it later on in the tutorial), you can link it using the link tag. This is a tag that shows relationships between the HTML document and external resources, and we'll have to set some of its attributes to tell it exactly where to look (and what we're linking to). An attribute is simply some additional information about an element, this is specified in the element's (starting) tag and generally has the format of attribute="value" (note that the quotation marks are optional for most attributes - it's personal preference again, I like using them).

In the case of linking an external stylesheet - the number of attributes we need to specify depends on the version of HTML being used. The required attributes are the rel attribute, which needs to be set to stylesheet (to tell the browser we are specifying an external stylesheet), and the href attribute which needs to be set to the location of your stylesheet. The location can be relative to where your HTML document is (for example css/style.css to go into the css directory and use the "style.css" file in there) or static (for example http://www.dev-hq.net/assets/application.css). In versions of HTML prior to HTML5 (which changes a lot of things - you'll see me bring it up a lot in the tutorials) - you also need to set the type attribute to text/css to tell the browser that the linked file is of type text/css.

As if these little differences weren't enough - there are also differences between the XHTML and HTML versions. XHTML is a stricter version of HTML that requires some special things, and it requires a forward slash before the end of the tag to show that the tag is an "empty tag" because the link tag doesn't actually have an end tag (and if you think about it, it doesn't really need one - it's indivisible, it doesn't need a start or an end). In these tutorials I will be using the "/" (which is optional in non-XHTML versions) because I think it looks neat, but if you don't want to (and you're not using an XHTML doctype - which you shouldn't be since we haven't covered them) then you don't have to.

1

<link rel="stylesheet" type="text/css" href="path_to_css/style.css" />

Obviously you can change the stylesheet name to whatever you like, as long as the full path leads to a ".css" file. And that's it! You can now edit the styling in your CSS file and it will take effect when you view your HTML webpage!

Internal CSS

This method is often used when you have certain styling for just a single page and usually is used simply because it's easy and quick to implement (no messing around with external paths and such). For this you can simply surround CSS in style tags in the head section of your document. This needs the type attribute set to text/css in anything less than HTML5 in order to be "valid markup":

1
2
3

<style type="text/css">
	/* CSS GOES HERE */
</style>

Any CSS in here will apply to the webpage on which the code is on!

The style attribute

This method isn't really used all that often and in my opinion shouldn't really be used at all unless it's just for a quick test or a small one-off style, as it can clutter your markup greatly. Basically, instead of actually writing "normal CSS" you just set the style attribute for any given tag to whatever CSS properties you want. You might not quite know what this means yet, but it'll become clear in time - I'm just letting you know right now that this method of styling HTML elements using CSS exists.

The basics

There are many different properties (different things we can modify and customise) in CSS (and there are different things depending on which version you use) - but for now let's just change the style of our basic HTML webpage a bit by changing the text colour. It's definitely worth remembering that CSS lower down (later) in the document will override that earlier in the document - so specifying a text colour of black at the top of the document, and then specifying the text colour of white at the bottom of the document would result in a white text colour.

Changing text colour of a component of the structure is very easy in CSS, we simply set the color (American spelling must be used) property to either the HEX, RGB, or word of the colour you want. If you don't know what I'm talking about:-

  • HEX is a way of representing colour through a series of 6 hex digits, usually prefixed with a hash symbol (for example #FFCC00) in which the first two represent red, the next two green and the last two blue.
  • RGB is a way of expressing colour through three values (one for red, one for green, and one for blue) that go from 0 to 255 (for example rgb(0, 0, 255)).
  • Word colours are simply some default supported colours - for example red or green.

When writing CSS (external or internal - but not inline), we must first, however, start with something called a selector. This specifies a section which we want the following stylings to apply to -- in this case, we want the selector to be the body element as we want to set the text colour of the body element. We then specify any stylings inside of curly brackets. We can specify different stylings by creating different declarations. A declaration is basically just an instruction -- in CSS these consist of two parts - a property (the thing we want to set to something, in this case the color) and a value (the thing we actually want to set it to). These are separated via a colon (:) after the property, and a semi-colon (;) after the value.

In our case the rule set (the name given to a section of CSS including the selector, curly brackets and declarations (different properties with values)) is very simple. We want to select the body, and then set the color property to a colour value -- let's just go with red for now.

Before I show you an example of selecting a section to style, and then writing a declaration which styles the selected piece of structure in a certain way, let's quickly gloss over comments. Comments are essentially just notes that can be added to code which doesn't effect the way your code works, and so are there for use for your personal reference, or for your team or whoever to see. Comments are started in CSS by using /* and ended using */, and anything in-between these two comment "markers" if you like, will not effect your code. An example of commenting, as well as the body text colouring we've been talking about, can be seen below:

1
2
3
4
5

/* I'm a comment, I don't effect the way this code styles things! */

body { /* Select the 'body' element for some styling */
	color: red; /* Set the 'color' property (of the 'body') to 'red' - set body text colour to red! */
}

Due to the way CSS works, the above means that everything inside the body will inherit the color property we specified unless that thing has more specific styling - in this case, everything in the body will have a text colour of red unless a more specific selector specifies otherwise. Following on from selector specificity having priority, if two selectors have the same specificity, the one further down in the document will take preference, as CSS prioritises stuff lower down in the document -- this also means that body { color: red; color: green; } would result in a green text colour, not a red.

We should probably also note that comments can be accomplished in HTML too - in HTML, however, they start with <!-- and end with -->. For example <!-- HTML comment! -->.

Anyway, back to our CSS: if you now open up the webpage and you've linked the CSS and HTML correctly, then you should see that any text in the body section is red! If you don't see this, you've probably linked the stylesheet and the HTML document up wrong - make sure that the HTML file is definitely looking in the right place for your stylesheet!

Terminology

There is a fair bit of CSS terminology that I've thrown around in this tutorial and that I will use in future tutorials. Here are some basic definitions:
  • Rule - a rule or rule set (set of rules) is simply a styling or set of stylings that apply to a selector. For example body { color: #FFF; }
  • Selector - A selector is part of CSS that tells it what element(s) to target. For example: body
  • Declaration - A declaration is a single styling property with a set value. For example: color: red;
  • Property - A property is something that appears before a colon in CSS that sets an attribute of style. For example color:.
  • Value - A value is something that appears after a colon in CSS and sets a property to something. For example: red.
  • Parent - A parent is an element that encompasses another element.
  • Child - A child is an element encompassed by another element.