What is CSS?
CSS is a simple language that uses key/value pairs to define the visual properties of HTML. Some common properties that are controlled via CSS are color, size, padding, margin, etc. Other, more more complicated features can also be controlled via CSS in modern browsers.
In practice, CSS takes a lot of knowledge and skill to ensure that it functions properly in all browsers and environments.
Syntax
CSS uses “selectors” to specify which HTML element should be styled. Then a bracketed body is used to contain all of the key/value pairs that define the visual styles. The key value pairs are separated with a colon and each property line is terminated with a semicolon.
Example:
/* The first line is the selector and the opening curly brace */
selector{
/* The next three lines are attributes and their values */
color: green;
width: 100%;
background: #fafafa;
/* The final line is the closing curly brace */
}
Though the CSS language offers a few other features for controlling the styling of HTML, every style is defined in the same way as the previous example.
Styling (different ways for making selections)
CSS can select HTML elements in a number of ways. The most common methods are to select HTML by tagname, class, or id.
When selecting an element by tagname, You are using the name of the html tag that you want to style. Just use the string name of the tag, e.g. if selecting all anchor tags on the page use “a”.
Classes are defined as attributes of the tag. When selecting an element with a class name, use the name of the tag preceded by a period. The same class name can be applied to multiple HTML elements. Then, by selecting the class, the styles will be applied to all HTML elements with the same class name.
Ids are similar to classes except they must be unique. When selecting an element with a id, use the name of the tag preceded by a “#”. If an id is applied to one HTML element, then it cannot be applied to another.
What follows is a div with a class and an id applied to it. Because both attributes are added to the tag, this element can be selecting in three different ways: the tag name, the class name, and the id.
Examples:
<div class="myclass" id="myid"></div>
//Normal tag selector
div{
color: green;
width: 100%;
background: #fafafa;
}
//Class selector
.myclass{
color: green;
width: 100%;
background: #fafafa;
}
//Id selector
#myid{
color: green;
width: 100%;
background: #fafafa;
}
In the proceeding example, each selector is doing the same thing to the div.
Specificity
CSS allows for complex selectors. The “depth” of the selector determines the specificity of the selector and thus it’s importance.
Example:
<div>
<a href="#">inner link</a>
</div>
<a href="">outer link</a>
Consider the proceeding HTML sample, lets consider how certain selectors would work on the two links.
/*Selector A*/
a{
color: blue;
}
Selector A grabs all links in the example, both the inner link and the outer link.
/*Selector B*/
div a{
color: green;
}
Selector B is an example of a complex selector. The way to read “div a” is as follows: “Select all a tags that are inside divs”. In our example HTML this selector our grab only the one nested in the div.
Lets look at this all put together:
/*Selector B*/
div a{
color: green;
}
/*Selector A*/
a{
color: blue;
}
<div>
/* This link is green */
<a href="#">inner link</a>
</div>
/* This link is blue */
<a href="">outer link</a>
Normally, styles are executed top down, i.e. the styles are applied starting with the first style in the CSS document and moving down. However, since selector B is more specific than selector A, it’s style won’t be overridden as the CSS executes. In time, a designer can develop very fine control of styles by manipulating specificity.
The “Cascade”
CSS executes from top to bottom. The browser reads each style in sequence, in the order that the author wrote it. This is the “Cascade”. The author can override previous styles later in the document and use specificity to ensure that styles persist, but the browser doesn’t care about that. It will simply execute style one by one until the CSS document is complete.
The Box Model
The Box Model defines how to calculate the “total” width of an HTML element.
In general, HTML elements have more than one property that will affect their width and height. For width, those properties are “width, padding-left, padding-right, margin-left, margin-right, border-left-width, border-right-width”. The Box Model states that the width of an HTML element is the sum of all of those properties. This is incredibly important for managing the layout of a site, because if the site author miscalculates the widths of elements, then the layout could “break”. In other words, if the math is wrong, then elements won’t be in their intended locations.
The properties that affect height are “height, padding-top, padding-bottom, margin-top, margin-bottom, border-top-width, border-bottom-width”. Again, to find the total height of an HTML element take the sum of all of these properties.
Example:
div{
width: 100px;
padding: 0 20px;
border: 1px solid green;
margin: 10px;
}
In the preceding example, we can calculate the total width of our element by adding all of the width values together. We start with width, which is 100px.
Then we add 40px of padding for the padding-left and padding-right. Now, our total width is 140px.
Next, we add 2px for the border because the borders thickness is 1px all sides of the div. Now, our total is 142px.
Finally, we add an additional 10px for the margin-left and another 10px for the margin-right properties, bringing our total to 162px.
The total width of the div is 162px.
To read more about the box model learnlayout.com/box-model.html
Box-Sizing: Border-Box
The standard box model states that the total width of an element is the sum of it’s width, padding, and border properties. If you throw in margins, then calculating the total width of your elements can get tricky, especially for fluid layouts with floated columns. The problem is that fluid layouts call for widths measured in percentages. For instance, if you want a two column site, then you’d float two columns next to each other with widths of 50%.
Example:
<div class="content">
<section> ...Main content... </section>
<section> ...Secondary content... </section>
</div>
//STYLES
section{
width: 50%;
float: left;
}
Pretty straight forward, right? Well, sort of. If we want our content to have some padding around it, the width of that padding needs to be subtracted from the width of the element, else we’ll have two elements that together are more than 100% the width of their parent. If they sum to greater that 100%, then the float won’t work. The padding needs to also be in percentages or our math won’t work out all the time. It will be impossible to maintain a fluid layout at all screen sizes.
Example:
<div class="content">
<section> ...Main content... </section>
<section> ...Secondary content... </section>
</div>
//STYLES
section{
width: 40%;
padding: 5%;
float: left;
}
Now, lets say that we want a 10px border around our sections. How can we create that border without breaking the layout? How much should we subtract from the width to keep the total width of both elements equal to 100% the width of their parent? Lets look.
Example:
<div class="content">
<section> ...Main content... </section>
<section> ...Secondary content... </section>
</div>
//STYLES
section{
width: 40%; //how much should be subtracted here???
padding: 5%;
border: 10px solid green;
float: left;
}
Lets say that the div with a class of content is 1000px wide. That means that the border is 1% the total width of the parent. This means that each section should subtract 2% from its width to accommodate the border. Sounds easy, right?
Now lets say that we’ve sized down the browser so that the width of div is 500px wide. How big is the border compared to the parent? The border is 10px and the width is 500px. Thats 1/50 or 2%. This would mean that the width would need to be reduced by 4% to accommodate the border. That means that at different browser widths, the widths of our sections would need to be different.
Now, we see the problem with the standard box model. Mixing percentages and fixed values is basically unworkable. You can’t have a different width for our sections to accommodate every pixel width of the browser.
Border-Box
The solution to this problem is to change the box model. This can be done with simple bit of code that will change the way that the total width of elements is calculated.
The Code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
This snippet of code with change the box model for every element on the page. Heres what it does:
The total width of an element will no longer be the sum of its width, border, and padding properties.
Instead, the total width of an element will always be equal to its width. Padding and border will be subtracted from width so that an element’s total width is always equal to the width property.
This means that our earlier example will work just fine and we won’t need to adjust the width value any more.
Example:
<div class="content">
<section> ...Main content... </section>
<section> ...Secondary content... </section>
</div>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
//STYLES
section{
width: 50%;
padding: 5%;
border: 10px solid green;
float: left;
}
The above example works perfectly. To read a more detailed explanation of the border-box model read Paul Irish’s Article on the subject.