One of the most significant changes in web design was the separation of style and content. CSS—which stands for Cascading Style Sheet—is the style side of that separation, and it has come a long way since those early days.
Naturally, there are many useful advanced CSS tricks to learn, from the basics to things that are a little more advanced. Like many things in life, CSS experience makes the process of web design faster and smoother. A talented designer will be able to work their way through a design problem, but an experienced designer won’t need to work through the problem because they’ll probably have encountered it before.
We can’t give you experience, of course, but we can share some of the fruits of experience to help you deal with some of the CSS conundrums you are likely to come across.
Why is CSS Important?
CSS is a critical aspect of web development because of accessibility. If accessibility wasn’t an issue, the easiest way to make a good-looking web page would be to create the entire design in a graphics editing package and use the image instead of coding HTML and CSS files. But what do we mean by accessibility?
Though it has wider-reaching uses, accessibility essentially means that a website will work well with tools and technologies that help people with disabilities—such as visual impairment—browse the content on the site. The key to achieving this accessibility is ensuring that a web page “degrades gracefully”.
Degrading gracefully means that if for whatever reason, there are problems loading the website, the content of the site will still be present and accessible. Such problems could be images being temporarily inaccessible, older browsers not supporting all the features the website makes use of or anything else that would interfere with the way the page is rendered.
This is where CSS comes in. With accessible web design, all of the content is stored in the HTML code, whereas all of the stylings are contained in the CSS files. In the worst-case scenario, a user—be it a person, bot, or piece of accessibility software—will be able to access the text and images on the page.
Now, let’s get to those advanced CSS tricks that you have to know.
Fixed Table Layout
Tables are incredibly useful for displaying a variety of data, and even for certain formatting situations (though you shouldn’t use tables for anything other than tabular data). The default behaviour of a table is to set the width of the columns to the width of the content its cells contain, but this can lead to a messy design, especially if you have multiple tables that all end up with differently-sized columns.
To make matters worse, the default behaviour can be somewhat unpredictable when you are first getting to grips with it. For example, you can specify a column’s width as a percentage of the overall width, but giving those columns a fixed width will just get ignored by the rendering engine in most cases.
Enter fixed table layout. By setting the table-layout property of a table to “fixed”, you can gain more predictable and intuitive control of your table’s format. Suddenly, things like hiding overflow work, and the columns will be the width you set them to regardless of the content they contain. And the good news is that setting a table to a fixed layout is as simple as;
table {
table-layout: fixed;
}Code language: CSS (css)Colour Fade on Hover
Hover effects are, of course, visually appealing. They can not only look very good when used properly, but they also give a web page a more dynamic feel, making it feel less like a static wall of text and images. Beyond the visual benefits, hover effects also serve an accessibility purpose, making it absolutely clear to the viewer that they are hovering over a dynamic element such as a link.
Colour fade is a little more complicated than fixed table layout as it requires two CSS properties. The first of these is your standard hover type which needs to be set as normal. The second is the transition property, in which you will put the root of your class. Using this property, you will tell the transition and how it will fade to the new colour. It should look something like this;
.element {
transition: all 0.5s ease;
background: blue;
}
.element:hover {
background: yellow;
}Code language: CSS (css)With that code, the element in question will fade from a blue background to a yellow one when the mouse hovers over it, and back again to blue when the mouse leaves.
Using SVG for Icons
SVG—Scalable Vector Graphics—is a type of image format that stores a mathematical representation of the image in question. To explain this; imagine a regular image of a curved line. If you expand that image using conventional means, it will start to get pixellated. SVG files don’t store the pixels, they store mathematical formulas that describe the curve. The benefit of this is that the image can be shrunk or blown up as much as you want without affecting the quality.
SVG images can be included in a webpage using the img markup as you would with any regular image but with the advantage that they can be resized without having to worry about the quality of the image being ruined. It should be noted that there are some compatibility things to consider, including earlier versions of Android’s browser and Internet Explorer 8 and below.
Curve Text Around a Floated Image
Formatting text around an image is nothing new, of course, but what is quite new is the ability to curve around images and other elements. Particularly useful when dealing with round images. The code to do so looks like this;
.circle {
height: 250px;
width: 250px;
float: left;
shape-outside: circle();
}Code language: CSS (css)Auto Sizing Columns
We mentioned above that you shouldn’t be using tables for general layout purposes. CSS has been notoriously reluctant to offer a table-like alternative… that is, until the addition of grid layouts.
Grid layouts allow users to achieve a table look without having to resort to table markup, and it is possible to take advantage of some intuitive auto-sizing options in the process. For example;
.grid-container {
display: grid;
grid-auto-columns: 50px;
}Code language: CSS (css)As the code suggests, this will ensure all of the columns in the grid are 50px wide. The only thing left is to implement your grid in the HTML document. You do this simply by setting a parent div to the grid-container class (or whatever you called it) and then including a new div for each “cell” you want in your grid.
Creating Shapes
The fact that you can make shapes directly in CSS is a bit of knowledge that often gets overlooked by new and old developers alike. Of course, it’s almost always been possible to create squares and rectangles—simply give a div a background colour and you have just that. Using CSS, you can also create circles and ovals, a variety of triangles, trapezoids, arrows, stars, and much more. So much more, in fact, that it would double the length of this post to show you the code for all of them here. Instead, we’re going to settle for a few examples;
Square
#square {
width: 100px;
height: 100px;
background: blue;
}Code language: CSS (css)Circle
#circle {
width: 100px;
height: 100px;
background: blue;
border-radius: 50%
}Code language: CSS (css)Triangle
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}Code language: CSS (css)Egg
#egg {
display: block;
width: 106px;
height: 160px;
background-color: blue;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}Code language: CSS (css)Final Thoughts
In truth, this post barely scratches the surface of all the little useful tricks you can have in your arsenal when taking on a new web design project. The key to advanced CSS lies in knowing which tool is right for the job.
