Cascading Style Sheets or rather, CSS, takes care of how HTML elements are displayed on different media, the most common being browsers. It’s pretty much what you use to make your web pages fancy and fabulous.
What can you do with it?
CSS has various uses, a basic use is text styling, where you can change the font, weight, colour and size. It can be used to structure your HTML elements in a specific layout - for example displaying your text in individual columns. Few other fun things you can do are animations like on hover and on focus.
How do you write it?
CSS is a rule-based language. You can define said rules as a group of styles applied to one or more elements existing on your web page.
Perhaps you’d like green text on your web page and increase the font size. Here is how:
p {
color: green;
font-size: 20px;
}
The <p> is called the selector, which means that the rules applied will target all the <p> tags on your web page. Inside the braces { }, the rules, also known as declarations, are set. A declaration is made up of a property and a value, the property being what needs to be changed and the value being what the change will be.
Each property allows different values, depending on the property type. As in the above example, the Color property can take various colours starting from standard ones which can be set by specifying the name (red, blue, green, black, white … etc). This property also accepts HEX colour codes (#FFFFFF) and RGB (rgb(255, 255, 255) or RGBA (rgba(255, 255, 255, 0.8). The latter (RGBA), accepts an opacity value which can be very useful.
A standard style sheet will contain multiple rules set to change the styling of various HTML elements like headings, links, buttons, forms and so on.
Why "Cascading Style Sheet"?
As the name suggest, CSS is read by the browser in the order the rules are set.
Let’s see an example.
p {
color: green;
}
h1 {
color: red;
}
p {
color: blue;
}
From the above example, there are 2 <p> selectors. Continuing on what I mentioned above, CSS is read in the order the rules are set, that means that the last style will overwrite the previous so the <p> elements will finally be in blue.
When writing CSS, you have to keep this in mind as you might overwrite previous rules and get confused why your style is not being applied. Pretty sure that a lot of developers had this happen to them at some point. It can be rather annoying.
What about Cross Browser compatibility?
In a recent article I wrote, JQuery vs Vanilla Javascript, I mentioned the issues that come with cross browser compatibility while working with Javascript. Well, this applies to CSS too. There were several occasions where I had to rewrite some styling as it wasn’t working in a browser but was working perfectly in another. Usually Chrome & Edge (Chromium) are fine but Safari & Internet Explorer can be a nightmare.
In no way, shape, or form must you let this discourage you. These issues can be fixed with some tinkering and patience which as developers, we should have plenty of (NOT).
Summary
CSS is a brilliant tool to bring your web pages to life with fun and elegant styling and animations but it can be tedious especially if you want to achieve complex and abstract designs.
Some important points of considerations include: Too much CSS can be a disadvantage for your website or application. This can lead to slower load times which users might find rather unpleasant and cause to lose traffic.
Google has become very adamant on website performance, making developers rethink their approach and go for minimal and simpler styles.