Coding Basics: CSS for beginners

Pssst. Want us to customize your theme for half the price?

As promised, back again with some introductory coding material: CSS for beginners!

What is CSS?

CSS stands for Cascading Style Sheets and is the primary language for styling a web page. CSS is used to specify the appearance of HTML elements.

How do I denote it?

CSS is denoted by the tag:

<style>

Where to put it (and where not to style)

Styles can be placed “inline,” “internally,” or “externally.”

An inline style is within the HTML. For example:

<p style="color:red;">Text</p>

This is poor form and should be avoided!

Remember how I said we could switch from our Visual to Text Editor, if we wanted to see how HTML was written by WordPress? We can’t do that for CSS, because the visual editor doesn’t insert CSS as this would be bad practice. Doing so would overwrite your theme’s style sheet and put your content at risk to display incorrectly if you change your theme in the future. Plugins like TinyMCE allow you to insert inline CSS (meaning it’s within the HTML, as we discussed above) which should be used with caution for the reasons just mentioned.

Internal styles are at the top (head) of your document (and are rarely seen any more). For example:

<head>
<style>
p {
     color: red;
}
</style>
</head>

These are not seen often because it is so difficult to update, particularly on a site with many pages. Using an external stylesheet (discussed below) means you have your styles in an easy to manage location and no code is duplicated because this one sheet is called in from all other pages. Read on:

The most common style sheet is external, referenced in the top of your HTML document like so:

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

Then, style.css would hold all of your CSS selectors and their properties.

Common selectors

CSS selectors are used to target HTML elements. Anything with a period before it refers to a class, which may appear multiple times on one page, while anything with a pound symbol before it refers to an id, which should appear only once on the page. Common selectors will target a structural piece of your page, such as the entire body, or any div element.

body: This is the base element of your page. Any styles given to this selector will waterfall to all other selectors and be inherited by them, unless otherwise specified. You’ll often see text styles given here, as those easily apply to the entire page.
h: h1, h2, h3 etc are for the various header elements.
a: Refers to our anchor elements, or links. If we add “:hover” to a link (a pseudo-class) we can change the style only when someone is hovering that element. For example:

a {
     color: red;
}
a:hover {
     color: black;
}

Now, if someone came to my page I’d have red links that turn black when you mouse over them.

Common properties

Properties are the tags which define styles given to a selector (which target them to the HTML elements). These are contained within the “{” and “}” that follow the selector.

color: As seen in the examples above, color is a common property we change in our styles. This changes the text color.
background-color: If you want to change the background color of an element, you’d use this property instead.
width: Since HTML just adds our elements to the page, CSS is what we use to position them and control their appearance. Width defines how wide an element is, either by using pixels, percentages, or ems (which we won’t go in to). An important note about width, however, is that this is not always the true width of your element. Borders and padding come in to play, as well.

div.myclass {
     width: 100px;
     padding: 50px;
     border: 3px;
}

This element is not 100px wide, as expected. Instead, the content is 100px width, then padding is added to all sides (200px now), and finally the border (206px).

Order of importance

Almost all sites are using multiple style sheets, which combine (or cascade) together. If I have h1{color:red;} in one sheet and h1{font-size:15px;} in another, my final site will have h1{color:red; font-size:15px;}. What if our style sheets have conflicting information for a single selector though? (EG. h1{color:red;} and h1{color:black;}) They will be applied as follows:

What has the most specific selector: Selector weight has a formula to it (not discussed here), and selectors with the most weight will take priority. For example, h1.myclass takes precedence over h1.
What comes last: Given equal weights, whichever selector is read last will take priority. This means, within your external stylesheet, an identical selector under another will take precedence over the first. Within your HTML document, an identical selector in a style sheet that is referenced after another will take precedence over the first. And within your HTML, an inline selector will take precedence over the rest.
What is overwriting: It is possible to overwrite all other styles by adding “!important” to the end of the property. This is poor form and should, almost always, not be used. Instead, try to move the selector or increase the specificity until it overrides the style you are trying to replace.

p {
     color: red !important;
}
p {
     color: black;
}

In this example, the color of our paragraph text would be red, despite the fact that the selector appears before another, identical selector which should take priority.

Examples of CSS for beginners

For more examples of how to use CSS, check out my post 5 ways to style your post signature, and see how the different styles effect the signature. You can also look at the styles on any web page by right clicking on an element and choosing “inspect.” At the bottom of your browser you’ll see a new window appear. On the left is the HTML structure of the page, and on the right is the CSS of that element. Try clicking on another line in the HTML to see what it refers to on the page, and what styles are being applied to it. Good luck, and ask me questions in the comments!