CSS is the language that allows us to style the web, without it the internet would be very different. Rather than a programming language, CSS is what is correctly known as a “style sheet language”. This means it is a descriptive language that dictates to a computer how a structured document should be styled.
In this post, we thought it’d be great to explain a few basic concepts of CSS, how it works and how we use it.
Basic CSS Structure
So how does CSS work? It’s actually refreshingly simple in terms of syntax compared to programming languages, or even HTML. CSS generally looks something like this:
h2 {
font-weight:normal;
font-size:38px;
}
h3 {
text-transform:uppercase;
font-weight:bold;
font-size:14px;
margin:0 0 2rem;
}What does all this mean? Let’s break it down.
The first thing you will read is the term “h2”. This is what is commonly known as an Element. Elements are written in HTML as Tags, and are used to give a page structure. They tell the web browser which text is a title, or a paragraph. They also give semantic meaning to a web page, essentially they are what allow browsers to interpret the information correctly.
When an element is written in CSS, it is known as a Selector. This is because sometimes selectors are not HTML Elements, so there is a need for a different term.
In HTML, the h2 would be written like this:
<h2>Some title goes here</h2>t’s important to understand that when the h2 is surrounded by angled brackets, this is colloquially known as a tag. Browsers read the tags and then parse them as elements, these elements are then associated with your CSS. This is why we do not write the angled brackets in CSS.
The second thing you will notice is a curly bracket. You’ll also notice that after some text is a closing curly bracket. These brackets mark the beginning and the end of what is commonly known as a Declaration Block. Within that block, we have multiple Declarations. A declaration consists of a CSS Property followed by a Value. The property will relate to a specific aspect of the aesthetic of the selector you are applying it to. In the example above, we are applying two declarations to the h2 selector, font-weight and font-size. Specifically, we are telling the browser to style the h2 element using a normal font weight (usually this means not bold) and a font size of 38 pixels.
When we write a rule in CSS, we split the property and value with a colon, and we use a semi-colon after each declaration. The colons and brackets are especially important in helping the browser interpret the CSS correctly.
In the image below you can see an illustrated example of the concepts explained above.
To recap:
- CSS consists of rules.
- Each rule then consists of a selector, with declarations wrapped in curly brackets.
- Each declaration consists of a property and a value.
- Multiple declarations are known as a declaration block.
CSS Specificity
The nature of CSS is that the browser reads your code from top to bottom – much like we read as humans. This explains the name, as the Cascading in Cascading Style Sheets hints to this nature.
The implication of this is that as the browser reads down the style sheet, if you have multiple rules that target the same selector, the rule furthest down in the code will override the previous rules.
Specificity itself however refers to how different selectors are afforded different weights. These weights dictate to the browser which rules to ignore or which rules to imply.
Within CSS there are four different categories of selector which affect that selectors specificity:
1. Inline styles – These are styles attached directly to the element to be styled. E.g.
<h1 style="color: #fff;">2. IDs – a type of identifier for page elements, such as
#header3. Classes, attributes and pseudo-classes. This group comprises
.classes, [attributes]and pseudo-classes such as
:hover, :focus Elements and pseudo-elements. Psuedo elements are elements that are not written in HTML but exist in the browsers Document Object Model.
How is a selectors specificity weight calculated?
This is done by adding up different values, with the values coming from the categories of selector above.
Beginning at zero, add 1000 for an inline style, add 100 for each ID, 10 for each attribute, class or pseudo-class, 1 for each element name or pseudo-element. For example:
body #content .data img:hover {}The specificity value for the selector above would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.
If you want to read more about CSS Specificity, this article on Smashing Magazine explores the concept in more depth: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
How to use CSS
CSS is incredibly important to us, it allows us to turn plain text and images into beautiful and engaging websites. It allows us to give web pages a structure that makes them easy and friendly to use, whilst at the same time we can apply class and style that are so important for the brand image of all our clients.
CSS does, however, have its limitations.
- Size – CSS stylesheets are much larger than before. This makes them difficult to work with.
- No programming tools – We can’t use variables in CSS, or write loops, like we can in languages such as JavaScript.
- Selector Inheritance – the nature of how CSS cascades can make ensuring the correct rules are applied incredibly difficult in large style sheets.
There are other limitations, but those were the main issues we were encountering. Since 2007 however, and growing in popularity since, we now have new languages known as “CSS Preprocessors”. These languages extend CSS giving in greater capability and solving some of its limitations.
The most popular CSS Preprocessor, and the one we use, is called SASS which stands for Syntactically Awesome Stylesheets. SASS gives us many benefits that CSS doesn’t offer. When we write SASS, we then use a special tool which converts our SASS into normal CSS.
Sass Benefits
Nesting
Sass allows us to nest rules within other rules. Nesting allows us to write tidier stylesheets that are easier for humans to interpret and read. Example:
.logo {
margin:2rem 2.1875rem;
width:154px;
height:38px;
display:block;
img {
height:38px;
}
}As you can see, our img element selector rule is written inside the curly brackets of the rule for the .logo selector. When we do this, the nested rule then only applies to elements that are contained within the parent selector element in our HTML document. The resulting CSS is then as follows:
.logo img {
height: 38px;
}Variables
Variables allow us to use terms to represent values throughout our style sheets, with each term assigned a value. You then only need to change the value once, and this change is applied wherever you are using the variable. For example:
$pink:#FE94BB;We can now use our variable throughout the styles, as follows:
a.go__forward {
background:$pink;
}When the Sass is then compiled into CSS, it would look like this:
a.go__forward {
background:#FE94BB;
}Loops
Loops allow us to repeat a certain rule or declaration until a certain condition is meant, normally a number. You might want to loop a declaration 50 times, for example. An example of a Sass loop could be:
@for $i from 1 through length($colors) {
#cp#{$i} {
background-color: rgba(nth($colors, $i), 0.6);
}
}As you can see, by involving loops we are also complicating how we write CSS in the sense that the author now needs to have a greater understanding of how code is written, and ideally needs knowledge of programming. We have moved on from simply writing declarations, as at the beginning of this post.
Further Reading
Hopefully by now you have a basic understanding of what CSS and how it is written, as well as a brief introduction to CSS Preprocessors and how we use them at Happy Pixel Media. If you would like to find out more, then the following links are useful.
HTML Dog Beginners Guide to CSS
1 Comment