Today i’m going to go through the basics of CSS, to understand what is happening with CSS you should first be familiar with HTML and be able to markup a website using it. If you do not then you can continue or you can take a look at my what is html article for a quick run through of what it is and how to use it.
CSS stands for cascading style sheets, the name makes perfect sense once you start to use CSS more. You use CSS to style the html you have marked up, this is important to remember, because you can add content using CSS but that should only be for additional style and never for real content. If you take away your style sheet your website should still be functional and readable.
Let’s take a look at a line of CSS and break it down to see exactly how it works.
body { color: #000000; }
This piece of CSS will make the colour of the body tag black or #000000. CSS has a format of selector { property:value; } which assigns a value to a property of the element you have selected. There is a number of different selectors you can use, either the tag itself like the body, a class name or an id. There is some more complex selectors but we aren’t going to cover them in this article.
Using a class as a CSS selector
Here is a quick example on how to use a class as a selector for CSS, it’s pretty simple once you get used to it, but initially it can be a little strange, especially if you have a strong programming background.
A class name in html.
<body class="body-class">
Using the selector in CSS
.body-class { color: #000000; }
The key difference in using a tag to a class name is that you place a . in front of the selector it also is more specific than using a tag, which means it will override any css assigned to just the tag. Specificity is one of the great features of CSS, it allows you to overwrite some general CSS with something a bit more well specific.
Using an ID as a CSS selector
Ids are very similar to using class names, with one exception, it uses a # instead of a .
One thing to note on a mac keyboard is that you can use alt + 3 I believe to type out a hash code, this is useful although there might be an easier way to achieve the same thing.
Ok let’s take a look at the code for this.
An Id in html.
<body id="body-id">
Using the selector in CSS
#body-id { color:#000000; }
We use the hash tag but also an Id is more specific than a class, so if you set some styles using an Id it will overwrite styles made using a class or a tag. The only thing to overwrite an id is an inline style tag, more specifity using multiple selectors or the !important flag which shouldn’t be used if everything is done correctly… or it’s a friday afternoon.
CSS Specifity Using Multiple Selectors
Take a look at the following code snippet.
<html>
<head>
<title>Epicwebs.co.uk - CSS Example</title>
<style type="text/css">
h1 { color:blue; }
.heading { color:red; }
#main-heading { color:green; }
body #main-heading { color:black; }
</style>
</head>
<body>
<h1 class="heading" id="main-heading">Hello World!</h1>
</body>
</html>
Each one of the selectors above gets overwritten by the next one, first the tag, then the class, then the id and then the tag id selector, which is even more specific than the id alone. If you need to try and overwrite a style you can move your way up the nest of html tags adding them to your selector, this will eventually overwrite the current style, unless it is an online style or has the !important flag set.
Learning Different CSS Styles
Now that you have the basics of how CSS works, you can start to look at what is achievable using it and it’s a lot. Imagine a piece of text on a page and then think about what you might want to do with that text….
- Change the colour.
- Change the weight (make it bold).
- Change the size.
- Decorate the text with an underline, strikethrough or overline.
- Add some space (padding) to the left of the text.
Using each of the items in the list above we will see how it’s achieved using CSS, it’s very simple, although starting off there is a lot of different properties to learn when using CSS. One quick thing to note is that CSS uses american spellings for a few things, one good example is colour it’s actually color in CSS.
Change the colour: color:#000000;
Change the weight: font-weight:bold;
Change the size: font-size:14px;
Decorate the text with an underline: text-decoration:underline;
Add some space to the left: padding-left:10px;
All of these styles are fairly self explanatory but finding the right one for the purpose will be key once you start to develop your own websites. Personally I wouldn’t recommend using a CSS framework as they are bloated and try to do too many things for you, if you can code it all out yourself you will have more control and get better results, in my experience anyway.
Ok so now you know the basics of CSS, take a look at the example below, copy it into notepad or whatever editor you are using and change the style section at the top of the site.
<!DOCTYPE html>
<html>
<head>
<title>Epicwebs.co.uk - Example CSS</title>
<style type="text/css">
.intro-text {
color:red;
font-weight: bold;
font-size: 14px;
text-decoration: underline;
padding-left: 10px;
}
</style>
</head>
<body>
<p class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus in tellus suscipit lacinia. Cras congue massa quis lectus convallis luctus id non purus. Donec suscipit libero est, eu consectetur dui tristique lobortis. Nulla iaculis lorem et nisl feugiat dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras in leo a dolor molestie hendrerit nec at sem. Nulla facilisi. Donec gravida luctus euismod. Sed vitae sagittis tellus, ac scelerisque risus. Vivamus sapien mi, auctor sed facilisis ac, auctor vel augue. Nunc lorem ipsum, vehicula a tincidunt nec, varius quis eros. Ut tincidunt finibus purus, ac dictum metus. Nullam eu metus non mauris semper efficitur. Praesent ut risus a ante sollicitudin lacinia.
</p>
</body>
</html>
Comments