Advertisements

Geek Proud, GeekOut.

CSS: A Beginners’ Guide

CSS, or Cascading Style Sheets, is one of the most important elements of the internet. Whilst HTML provides the barebones, CSS is the style of the website; the presentation and layout. CSS has a few other nifty features, such as custom styles for when an event happens. In today’s article, I look to show you how easily you can edit your WordPress site, or indeed any website, with your very own CSS code.

The Boring Bit

Okay, I call this the boring bit, as really I bet you want to get deep into your own CSS code right away. If you’re using WordPress and have the Custom CSS “power up”, then you don’t need to worry about this step. If you’re making your own website from scratch, such as a WordPress.org website, then you may need to consider if you need to do this. WordPress.org uses themes, so check to see if you have a “Style.css” file in your theme already. If you’re going to make changes to this, look into creating child themes. This is outside the scope of this article, however!

HTML won’t care about your lovely CSS code, unless you implicitly tell it to care. Instead, HTML likes to think of a paragraph (<p> tag) in a specific way. It likes to think of bold <b> in a certain way and <em> in a specific way. CSS allows you to overwrite what the browser thinks, saying “actually, this is how we want it to be displayed”. CSS is important, as it helps our browsers display a page in the way you want. So how do we get HTML to play ball with CSS? We do a <link> tag.

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

Alternatively, you can do CSS within HTML. This is known as Inline CSS, which is typically frowned upon. There are some situations where Inline CSS is more appropriate. For instance, if you only need to change one element in one place on your website, then Inline CSS is more appropriate. However most of the time, you will want to use an external CSS document for your code.

For the purposes of today’s article, we’ll only focus on an external Stylesheet, but if you need to do some inline CSS, you use the attribute “style=” in the tag. For example:

<body style=”background-image:kittens.png;”>

You also can create a whole stylesheet in your HTML document using the <style></style> tags. This is, again, heavily recommended against, as then you’re mixing content and presentation.

Right, now the boring bit is out of the way…

Cascading Style Sheets

 

HTML documents have varying degrees of content, with varying degrees of complexity. Thankfully, CSS is relatively straightforward throughout. Today, we’ll talk about how to make a basic CSS file, with some good ground rules.

First of all, feel free to place this file anywhere, however your html documents that will use your CSS styles needs to be told where to locate it. You do this in the “href” attribute in the “link” tag that we discussed in The Boring Bit. I’d recommend for the purposes of understanding CSS, you place this file in the same folder as your HTML file, so you only have to refer to it by name. Call your file something memorable, like myStyle.css and open it up in an editor. You can use Notepad, Notepad++, Atom – Whatever you choose, make sure it’s the right environment for you. If you’ve never played with CSS before, try just using normal Notepad for now. Make sure you save the file with the extension .css and you’re on your way!

Commenting In CSS

A CSS sheet doesn’t need anything to open it. Indeed, you can have a whole CSS sheet which has nothing in it, except for styles. So let’s talk about comments – because you might end up with various stylesheets, for various reasons. You declare a comment like this:

/* Comments here */

Anything between the stars are commented out. There’s no single-line comment system in CSS – Worth remembering, as other languages would allow something like the below for a single-line comment:

//This is a single-line comment.

However, with CSS, you must have a closing comment command. As such, you can spread it out over as many lines as you want, like this:

/* Here is my comment
There's a lot of stuff here
And now my comment ends */

Changing A HTML Tag’s Style

You can see in the above image there are a few different tags which are regularly used in HTML. In fact, the first one, the “html” tag, is actually one you MUST open a HTML document with. I’m telling it that I want it to always try to use the font-family “Ubuntu”. In the image above, as you can see to alter a tags style is to type what type of style it is, then open it with curly braces. Then, you put in your CSS attributes you wish to change the values of, before closing the tag with a closing curly brace.

For example, this is valid CSS:

p { color: #fff; }

The above snippet will turn the colour of all text in a paragraph (<p>) tag, unless stated otherwise, to white.

Classes and IDs

One of the more important elements of HTML is assigning a class or an ID to a tag. HTML represents it like this:

<p class="myClass">Example 1</p>
<p id="myID">Example 2</p>

The purpose of having a class is to assign the same style rules to different tags. For instance, you might have a class which you assign to 5 different paragraphs. You would just state class=”myClass” as that tag’s attribute and away you go. All style information for “myClass” in your stylesheet will then be applied to all 5 of those paragraphs.

Meanwhile, an ID is supposed to be there for one tag. If there’s a particular section of your page that needs a style, use an ID. A good example would be a header. If you don’t intend to use that same style in any other page, then you would use id=”myID” instead. The two are represented differently in CSS:

To declare a style over a class, you place a full stop before the name of the class. For example:

.myClass { color: #fff; }

To declare a style over an ID, you place a hash before the name of the ID. For example:

#myID { color: #fff; }

Applying A Style To Multiple Elements, Classes and/or IDs

You can apply a style to multiple HTML Elements, Classes or IDs by simply doing the following:

h1, h2, h3, .myHeaderClass, #myHeaderID { color: #fff; }

The use of this is that you don’t need to write them all out separately, if you know anything that meets one of these requirements will need it. Furthermore, you can specifically select different elements, or different combinations of elements, by where you place the Class or ID name. An example of this is:

p.myStyle { color: #fff; }

In the above example, all paragraphs with the class “myStyle” would have white text.

As a last note to us Brits, it’s worth remembering to use American spellings – As CSS only recognises American spellings of words, without you fiddling around with special plugins such as Spiffing. That’s it for this week’s article however, so if you enjoyed this mini look at how to write a basic CSS document, then leave us a like and share your thoughts in the comments below, or over on Facebook and Twitter. If you’ve got any CSS problems, let us know!

Advertisements

Drop us a line

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.