Introduction to css for designers #2: how does the code work?
Last week we discussed what CSS actually is and what it does. We looked at some similarities between that and the way you create your print artwork and came to a conclusion that the principle between both is pretty much the same.
Our task for today then is to find out how does this code work. And just like last week I will try to find some similarities to design for print.
What is worth noting at this stage is that even though we will not be beginning any work with the actual CSS yet we will introduce some code nonetheless. You can consider it a warm up before next week.
So, to begin at the beginning.
How does the code work?
Just like last week let’s start design for print. Once the project is completed you output it to a print ready file and send to the printers. A print software analyzes it to see where each element goes and what are it’s attributes and once that’s done it simply prints the job. It’s a simplified version of the process but pretty much this is what happens.
When it comes to a website, once the design is done, it is recreate with code and save as set of various files. Those files are uploaded on a server from where they are accessed by a web browser which analyzes them to check what elements constitute your page, what are their properties and positioning and displays them on screen according to a spec given.
It’s practically the same, isn’t it?
Now, but what are those various files then, you ask.
To answer this as simply as possible, there are two main file types we will be working with, a HTML file and a CSS one.
HTML file is used to arrange the content, to tell the browser what elements constitute the page, what is their order (although this can be altered by the CSS, we will skip this for the moment though) and their content (text, images etc.) if they have any.
All presentation such as sizes, positions, fonts, colors, backgrounds is handled by a CSS file.
Let’s look at the boxes example from last week:
Each of those boxes on the image have been first described in a HTML file and then their specifics have been coded in a CSS file which accompanies the first one. Browser, upon accessing both files checks which boxes to display (HTML) and how to style them (CSS).
I guess this could remind you of one function within every page layout software (such as inDesign or QuarkXpress) – stylesheets.
As you know stylesheets allow to style page content within a box placed on a page. If you want to edit an element or group of elements styled by a particular stylesheet you simply amend it, not each box individually.
And in reality CSS works by the same principle. It allows you to style your elements, so if you want to make a change to them, all you have to do is modify their CSS style.
I guess you know very well how to create a stylesheet in your page layout software, so let’s look at how to create one for a website.
There are various ways of doing this. One way is to place your CSS code within your HTML file, the other is to use an external CSS file and link to it from the HTML code. You can also mix the two although we will skip this particular method as I personally do not consider it a good idea.
So, let’s talk about the two then:
1. Internal Stylesheet
Every HTML file is build of two elements, <head>, which includes all information for the browser that doesn’t get displayed on screen and <body> which includes your actual content elements.
As CSS is a set of styles intended for the browser only and the code itself is not displayed on screen, we place it within the <head> element of your page.
After placing a CSS code inside our HTML file our example code will look like this:
where #box is a style for an object called box (we will discuss CSS syntax in depth next week so I will leave it for now). As you can see we tell the browser that a specific object will have a width of 200px and height of 200 pixels as well.
Let’s take this code apart and look in detail what each element does:
<head> - this is a command that opens head section of a file
now we tell the browser that what we start our CSS styles now:
<style type=”text/css”> - tells the browser that the code that comes after this tag is CSS
#box { width: 200px; height: 200px; } – that’s our CSS code
</style> - this element tells the browser that there is no more CSS styles
</head> - this element closes the head section
<body> tag opens body section of the file
Of course there are more elements that can be placed within <head> section but they are not relevant to this series and we will be skipping them altogether.
This method is particularly good if you need to style only one page, or if you want different pages to have different and varying styles.
Otherwise you can use the external stylesheet
2. External Stylesheet
In this method a HTML file contains no CSS whatsoever, a CSS is stored in a separate file.
You marry the two by simply linking to your CSS file with the following link placed in the head section of every HTML file.
<link rel=”stylesheet” type=”text/css” href=“your-css-file.css” />
And your head element of your HTML code will now look like this:
As you can see we replaced styles placed within <style type=”text/css> and </style> elements with one simple link. Inspite of that though the code will work exactly the same.
As I wrote above, any of the two methods described is equally good and you can choose the one you prefer.
My personal choice is the external method as it makes it much easier to control the file and keeps the two codes separate from each other, makes it easier to keep the code clean.
Our next task will be to familiarize ourselves with CSS syntax and we will start looking at it from next week, until then …. design well.
See Also:
Part 1 of the series: You already know most of it, you just don’t know how to use it
Fantastic. I am taking my first web design course and I just was not getting the css thing. You made it very simple to understand. I as also a graphic designer think in terms of indesign and placing things on a page. NowI want to learn how to create an external css sheet to link ….