The Cascading Style Sheet language is the most commonly used language in web design and online application styling. No matter which language you choose as your programming platform, you will (or at least should) always end up combining it with CSS.
With CSS you can move around elements of your website, align them, overlap them, color them, resize them and many other interesting design tricks.
Being a long way from a CSS expert myself, I will try to explain the very core of CSS in a simple and intuitive way – in which I wish it was explained to me.
The Supervisor and the Worker
In the web design world, imagine that your website is a warehouse. You are the warehouse supervisor and CSS is the worker. In this relationship, the HTML code would have the function of all the boxes in your warehouse representing various web elements (such as header, footer, navigation, subscribe to e-mail box, twitter feed box, etc). You shout your instructions to your worker using CSS code.
The Bare Basics
To fully understand this post you should have a basic understanding of HTML. So let’s get started. The first line of code that you learn when you want to work with CSS is:
1 | <link rel="stylesheet" href="styles.css" type="text/css" /> |
This snippet of code (which you are supposed to put between the head tags of your website HTML file) tells the browser where to look for the style sheet. You don’t have to use the name styles.css although it’s the most common. If your CSS file is located in a sub-folder on the server, you can write the entire path.
You can experiment with this by opening a new folder on your desktop (or anywhere you want) and creating an index.html and styles.css files. The styles.css can be empty for now but you can copy the following code snippet into your html file:
1 2 3 4 5 6 7 8 | <html> <head> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> My website elements go here! </body> </html> |
Now we have defined a basic HTML file. We have our opening html tag, the opening head tag, we have defined the browser window title of our website, we have told the browser where to look for the CSS style sheet, closed the head, wrote a simple line of text in the body and closed our html tags.
Telling your “Worker” which “Boxes” to move around
If we want to get the job done, we need to explain what we want to our employee. In other words, write some CSS code. Will our employee understand if we tell him to move the brown box and all boxes in the warehouse are brown? We have to find some sort of method to label the boxes so that our CSS script understands what to manipulate.
This labeling is done with div tags.
Remember how you heard someone telling you that table-layout website design using MS Front Page was old and nobody should use it anymore? The idea was that tables should be replaced by divs where each div had a unique ID. That way, you basically, labeled the boxes. Here is an example:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="text1">My website elements go here!</div> </body> </html> |
Notice what I added between the body tag, in front and behind of the “My website elements go here!”? We’ve put the text located in the body of the website into a div with an ID of “text1″. A DIV is an invisible box which wraps around the content defined between it’s tags. This method will allow us to manipulate it from the CSS file. We gave our box a label for our employee to recognize it.
Now open your styles.css in a text editor and update it with:
1 2 3 4 | #text1 { background-color: green; font-size: 50px; } |
Here we have specified that we want to manipulate the text1 div box and assign it a green background color. Also we want all the text in that box to have a size of 50 pixels. Save your css file and refresh the web page in the browser. You should see the results.
Now lets try adding another empty div box to our websites HTML code:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="text1">My website elements go here!</div> <div id="box2"></div> </body> </html> |
Also, let’s add some parameters for the box2 div in our css file:
1 2 3 4 5 6 7 8 9 10 11 | #text1 { background-color: green; font-size: 50px; } #box2 { width: 100px; height: 200px; background-color: green; border: 5px solid black; } |
You probably noticed how I gave our box2 div a defined width and height. This is because it is empty and if you didn’t specify its dimensions it would just be a flat line like a blown out balloon. We also gave the box a background color of green (you can also write #HEX color value instead of the actual name) and we defined the border property of 5 pixels, solid and a color of black. Refresh and observe the results. Try changing the “solid” value to “dashed” and see what happens.
Conclusion
Hopefully this brief tutorial was useful for you and helped you understand the very basics of CSS. This was of course just a small fragment of the vast usability that CSS possess.
If you wish to continue further development of your CSS skills, I recommend W3Schools CSS tutorial. As far as software goes, I would suggest Notepad++ as something you should have installed right after your OS.
Once you realize that it’s all about labeling boxes and moving them around, it just comes down to learning all the thousands of properties that exist in the language itself.
Here are some examples of properties which I use the most:
- background-image
- margins
- padding
- text-weight
- height
- width
- float
- text-align
- vertical-align
At the bottom you can find the download link where you can get the index.html and the styles.css used in this post. Also stay tuned via Twitter, where I will be posting updates for the various web design video tutorials (for beginners) that will soon be published on the Knowledge Reactor website.
Finally, I would like to thank my good friend and great artist Marino Plecas for the forklift illustration!
Lauren Stewart (1)
Peter J (1)
Seth (1)
“…it just comes down to learning all the thousands of properties that exist…”
LOL that’s a fine finish. Nice work
Awesome beginner post and definitely something ‘m learning. I’m tired of having to email designer friends of mine with even the “simplest” of questions.
Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why?
@McKnightikus
says
@Andrew: Hehe, yes it’s true! There are thousands of properties out there that are just awesome and every time I find out how to use a new one I feel smarter. It’s just like math, you don’t have to know all the formulas to be good at it.
@Dennis: I’m happy you like the post. The most satisfaction out of a “for beginners” tutorial post that I can get is the person reading it managing to understand it and learn the stuff. Or at least motivate him or her to buy a book about it for example.
I also know what you mean about asking friends for help. A lot of people that know stuff don’t want to give it away for free because they think you are a competitor and whatnot. I can’t say I really like those kinds of people.
Feel free to ask anything about CSS here in the comments or via e-mail (the contact form). Also, if you have a subject you would like to learn about and I know it, I would be happy to write about it for you and others like you.
Thanks for commenting guys!
For me it’s not usually a matter of something for free, but more of not wanting to waste their time. It’s like I KNOW it’s a real simple fix, but I just don’t know how.
I’ll definitely be in touch if I need something, thanks.
Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why?
Also, immediate validation of your tables and CSS styles make creating these potentially difficult html features a snap.