Learning CSS – Part 5: Box Model
Wombat or something on a bike with a girl (from The Commons)
Understanding the CSS "Box Model" is quite important. As I mentioned in the previous Learning CSS post, webpages are generally built by using sets of nested table-like elements using <div> tags (replacing HTML tables for this purpose). Many different elements can make use of the same box model settings. Margin, border and padding are the three main settings that are used to achieve just the right spacing in layouts.
The w3schools box model intro page has a very helpful image that shows how margin, border and padding work. margin is the outermost area. Adjusting the margins changes the empty space around the border. The border is exactly that. You can adjust the size and visibility of the border, as well as apply various outline styles to appear around the border edge (among other things). Finally, the padding is the empty space within the confines of the border, spacing out the actual content from the border itself.
Learning CSS – Part 4: Basic Styling continued
Election Night 1931 in Wellington, NZ (from The Commons)
Jumping back in where I left off in the last Learning CSS post, I still need to cover the basic styling options for links, lists and tables. At this point what I'm covering is still quite simple to learn and is partially review for me.
Links
The basic styling you can do for links using CSS is to change the link colour, visited colour, hover colour and active colour. Traditional website usability wisdom said that you should never change the colour of links because the majority of users relied on the colour as an indicator of what is clickable. To the delight of usability concious website designers everwhere, this is no longer the case. Today you can get away with using pretty much any colour for links, provided it stands out in contrast to the other colours used in your overall site design.
Learning CSS – Part 3: Basic Styling
Swedes in Hats (from The Commons)
My continued forays into the world of CSS had me learning an array of basic styling options. As mentioned in an earlier post, many of these style options were previously done with HTML. CSS took over these functions and provides a much wider array of options and removed the need to setup styles individually for every instance.
The W3 Schools tutorial covers 6 elements in the basic styling overview: Backgrounds, Text, Fonts, Links, Lists and Tables. Having had to deal with some aspects of site updates in previous years I ended up learning bits and pieces of the syntax for these, but never went over it in a methodical way. As would be expected, the basic styling is all pretty simple and doesn't take long to learn. With that in mind, I'm going to cover each aspect only briefly, with a little extra on a few interesting aspects added in.
Learning CSS – Part 2: Cascading
A Rusty Boat (from The Commons)
A very basic feature of CSS is the way it "cascades" (hence the name "cascading style sheets"). You can place CSS settings in any of three places: external CSS files, the head of an HTML document, or within HTML tags themselves in the body of the page. If you have no styles defined at all, the default will be taken from the webbrowser being used to view the site. Higher in priority than the default is an external style sheet. After that any CSS defined in the head of the document will be given priority. Finally, CSS within tags gets the highest priority of all. (Head over to the W3 Schools CSS How To article for examples.)
My Introduction to the Wonderful World of CSS
A Cascading Waterfall (from The Commons)
If you've followed my first few posts about reviewing HTML (or already know HTML and CSS well), you'll know that I inevitably learned some CSS in reviewing HTML, since most style properties are now done using CSS. That being said, there is plenty more to learn about CSS beyond what is necessarily covered with replacing the original basic HTML styling.
So, what is CSS? I came into this knowing that CSS stands for "Cascading Style Sheets" and that it is code that can be used in an HTML document, or on it's own, and called by one or more HTML documents. Beyond that I was aware of CSS image sprites and had toyed around with some of the neat CSS3 demonstrations that show how you can achieve certain styling and interactivity previously only easily done with Flash.
I was interested to learn that CSS came about as an elegant solution to the issue of having to apply style attributes repeatedly within one more more HTML documents. If you wanted to change the font style or size for every page on your site pre-CSS, you would have to go through every single page and change the settings of each individually. Now you simply set the font, color, size, etc. in a CSS file, and call that file from each page of your site. Any changes to the CSS file will be automatically used across the entire site (unless you set page or tag specific styles, more on that later).
Recent Posts
- New Computer! – Part 2: Videocard, HDD and Errors Galore
- New Computer! – Part 1: The Initial Build
- UTM Parameters for Better Online Marketing Tracking
- What Happened? Formerly “Learning PHP – Part 4″
- Learning PHP – Part 3: Variables
- RT @MajesticSEO: Flow Metrics - How they work and how to use them [Infographic & Video] http://t.co/SYhUeEIAR8 http://t.co/m4rKkpu8fk
- Just saw an unnatural link warning for the first time in WMT. Not my doing; low quality directories submitted to by a previous agency.