Lay it out in style: Css for beginners
Css3 really has three quite distinct functions: Firstly and maybe most importantly, it is used to do the overall layout of the page. The second function is what may be called style, ie the look of elements in terms of fonts, colours and anything that is internal to the element. The third, quite a newcomer, lets you move elements around, change their shape or appearance dynamically.
We will go into these three aspects in turn, and only after that detail how styles are applied and to integrate them. As this article is part of a series, i suggest you read the previous post about the basics of the net first, if you haven’t.
Layout
Layout is a relatively old art, practised in books, papers and magazines. Usually designers talk about grids in this context, rows and columns and how content, ie our html elements, fills these grids. This level of control is not quite here yet, but it is coming, in the form of a new specification called grid-layout. For now we shall have to do it the old way, old meaning 8–10 years old, because before css, layout was done via tables (shudder).
We will look at the examples of the previous post, as the second of which is a very typical main layout for websites. Let’s see how this is achieved.
The first example uses quite little styling. Off course backgrounds are defined to see the elements better. Also the width is set to 100% and the height is fixed to 50px, as otherwise the height would collapse onto the text. But otherwise this is how elements behave by default, which is called static positioning.
The question is then, how do the nav, article and aside, in the second example come to create columns. This is done by a trick called floating. The positioning model is set to float left on these elements, and this means they “float” up and left, as long as there is space. Then the widths are set to 20,60 and 20 percent, so they fill the width, and since they float left, they come snug next to each other.
The syntax that assigns attributes to element (or class) names is quite simple to understand, but there are two things to point out here. First, in the top left, we can assign the same values to several elements, by separating element names with comma. The second, bottom left, is that we need a clear, just for technical reasons, basically to make the row complete.
As this is our first look, we’ll leave it at that and conclude that we can achieve layout, by assigning height and widths and using float positioning. Most developers nowadays use libraries or frameworks to help with this, as you can imagine that it gets a bit more complicated in real life :-)
One of the things that complicates this simple picture is padding, margins and border. Up to now we just talked about a box, and the easiest box to imagine is called a content box, a box just around any containing content. But in html there is a box around that, made up by padding. Then there is a border, and then another box around that made up by margin. Padding on the inside of the border, margin on the outside, and off course all three of those can be specified separately. And to add to the fun, you can also specify which of those boxes (content, padding, border, margin) should be used when specifying widths or height.
Adding style
The actual style allows you to change the appearance of the content inside the box. Those that pertain to font and text (a few others) are also inherited, which means descendants will get the same values. Eg a font-family set on the body, will thus trickle down to every element in the document. Off the rest, the most notable is the background and the many many ways it can be set, ie a colour, colour gradient, a picture, several pictures etc etc.
When attributes have a dash in them, like in font-size, it means there are other font related properties available. In the case of font, it is font-style, font-variant, font-family and font-weight, and for background there are even more. The best way to learn these is by copying interesting code, or looking up specific properties to achieve a certain goal.
The base size of the browsers font is called em, and along with relative em (rem) , pixels (px) and percent (%), is one unit in which any size related measurements (like font-size or width) may be expressed. Which measurement to use at what time, especially in the light of responsive design (one design for several devices), is it’s own topic that we will have to tackle later.
Move it around, make it dynamic
Now that we have some idea of how to achieve layout and style our elements, we could also use css to move things around. Making mostly small changes to a page is what javascript was initially invented for, but most of those cases can be achieved with css nowadays. This has the benefit of maintaining the separation of concerns, and is also more performant.
As this is really an advanced and new topic (so much so that many professionals don’t even fully grasp it yet), we’ll just skim it here and go into it later. By moving i mean that positions or shape may change by flipping, skewing, shifting or other transformations. And transitions between states (eg when a hover starts) may be controlled precisely. With keyframe animations, css can almost be stretched to the point that whole games can be written in it. As i said, a topic for later.
Rules for application
So now we have to come back to what i said in the beginning: what are the rules of when these css attributes apply. In total this is quite complicated, and you may find yourself easily in the situation that the style you thought should be applied is not applied and you wonder why. We’ll come back to this when we start to write css on the server, but for now it is good to keep things simple.
We have used simple element or class names and that is good. But this means that those styles always apply to those elements or classes, and sometimes we want to change the style in a particular case. For this we can use more specific rules like this:
This is saying that any element with class aside (.aside in css) gets a height of 50px. But for asides that are inside the main element, the height is 100px. So just writing the selectors with a space means they have to be descendants from left to right. The more specific the rule, meaning the more selectors it has, wins.
And finally just a quick note on how to get your styles in to your document: For small tryouts, you can actually write the css code into the html document, like this. But usually in web development, the server application will generate an external stylesheet, which includes (like this) all your applications styles, and we will see how this is done in a later article.
Frontend
This was a very very quick introduction to html and css and almost concludes the first part of this series, the part that’s called frontend (because it happens in the browser), but not quite. Javascript is also running in the browser and thus i will talk about that next, even you won’t need it for a while.
As i said, it’s best to learn by doing, so now would be the time to get a book or start a course. For books i recommend the “css, the missing manual”, as it has tutorials. Otherwise the codeschool html/css course.
