hardcore css
As a modern front-end engineer (fancy word), you do your html styling with a nifty bit of css. But css is a complex beast, and it takes time to learn about all the finer points.
A while ago I took the time to talk about the basics of html, so I think it would be wise to do the same for css. I'll start by reviewing the very (very) basics in this article, focusing on the function of css within modern web design. Because even the very basics aren't always as clear as you'd expect.
css core
When building a web page, there are three important things to take into account. Content, form and function, the three pillars of modern web design. When building an html-based web page, css takes care of the form of the page. In other words, the visualization of html. All the visual styling should be handled by css, theoretically allowing for a completely different design when loading a different set of css files onto the given html. w3c has the following to say :
Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced ... By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.
So css is all about presentation of html, in its broadest sense.
default styling
Before we start talking about the way a developer can style html, let's take a look at browser vendors first. Each browser provides a standard styling for each html element. This style could be considered the browser css. This results in standard margins on p tags, or the display behavior of html elements (blocks - inline - ...). By providing this default style, browser vendors make sure even unstyled html documents can be shown correctly in their browsers.
The only exception to this (to my knowledge) is the default styling of the legend element. The default visualization of the legend is by no means possible by simply using currently supported css methods. Apart from that, all the browser styling could be translated to simple css rules.
css syntax
form p {display:block; color:red;} - form p is the selector, the part of the css rule that defines the elements that should be targeted.
- { } are the brackets that contain all properties that should be applied to the targeted elements.
- display:block; is one css property ("display") and its value ("block"). The semi-colon separates multiple property declarations.
A css file consists of a collection of rules that compose the styling of a document or site. Each rule can hold multiple properties, each of them separated by a semi-colon. The semi-colon is not required when there is only one property, or when the property is the last one. But to protect yourself from future errors, it's better to properly close each property declaration by default.
css cascade
css stands for cascading style sheet. Style sheet refers to the files that contain the styling rules, the cascade effect is seen in the way rules are applied to html elements.
It is possible that more than one rule applies to the same html tag. In this case, all properties of both rules will be applied. The problem arises when the same property is declared in both rules. In that case, the selector plays a deciding role. The browser renderer will look at both rules and will decide which rule is "stronger" and the value of the property in the "stronger" rule will be applied. This is a powerful concept, although it also creates quite a few problems due to browser bugs.
When both rules are equally strong, the rule that comes last will have preference. This is important when including the css files in your html document, as certain rules could easily be overwritten by other css files (often files that are included by a cms), creating unwanted effects.
coming up next
Enough basic information for now. In upcoming articles, I will describe the different ways of targeting html elements and delve deeper into the battle of css rules to take preference. I hope this article will give the following articles enough context to get a good grasp of the power of css.