CSS is widely used in web design and development to help create stunning websites. Whether you are experienced in using CSS or at the learning stage, there are always new tips and techniques you can add to your arsenal! We’ve picked 8 facts you probably didn’t know about CSS.
What is CSS?
Before getting started on the CSS facts, let’s briefly cover what CSS is. CSS (or Cascading Style Sheets) is a styling language used in web design and development. CSS is responsible for shaping the visuals of a site’s front end.
Working together with HTML and JavaScript, CSS can be used on any HTML document. While CSS can be added to the body of code to add styling to a single HTML element (known as inline CSS), CSS is typically a separate document specified in the head of an HTML document (or external CSS).
All CSS files must have the .css extension without any additional code languages present. CSS3, which was released in 2015, is the latest version of the styling language. CSS3 added or updated selectors, colours, border radius, shadows, gradients, etc.
Check out these 6 CSS tricks to spice up your web design
8 CSS facts you may not know
So now that we’ve briefly covered what CSS is, let’s move on to the 8 CSS facts you probably didn’t know.
1) Change the appearance counters
Our first CSS fact you may not know is that you can style the counter in numbered lists to give a unique appearance to any number lists. Instead of the traditional text-based counters, you can customise numbered list counters to fit your design.
This CSS trick only applies to the HTML list class, either with the <ul> or <ol> tag. Once the list has been specified in the HTML code, you can use inline CSS for a single list or apply it to the whole page by adding it to the CSS file.
Here’s an example:
To begin, our list in HTML:
<ul class=”list”>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Jam</li>
<li>Butter</li>
</ul>
Which would display as:
Now, when we apply the CSS to modify the counter increment:
<style>
li {
font-size: 30px;
margin-bottom: 20px;
counter-increment: li;
}
.list li::before {
content: counter(li);
margin-right: 10px;
width: 30px;
height: 30px;
border-radius: 30%;
display: inline-block;
background-color: #FFA500;
color: white;
text-align: center;
line-height: 30px;
}
</style>
We end up with this:
2) Change how fonts display with @font-face
Another CSS fact you may not know is that you can change how fonts display using the font-face declaration. This is particularly useful for those who use custom fonts in their web design as sometimes fonts can render differently depending on load times and if the font is downloadable.
Your web design may be affected in these situations as a web-safe font is used instead. To avoid such problems, setting the font-display property as part of a font-face decoration can avoid such design issues. This lets you control how fonts display with a short bit of code.
To implement the font-display property, here’s an example:
@font-face {
font-family: montserrat;
src: url(‘/fonts/montserrat.woff2’) format(‘woff2’),
url(‘/fonts/montserrat.eot’) format(‘eot’);
font-display: fallback;
}
h1 {
font-family: montserrat, Arial, sans-serif;
}
Within the code for setting a font-display property, you’ll also need to add a value, such as fallback. The five values are as follows:
- Auto – the default value that tells a browser to hide any custom fonts still loading.
- Block – reduces the time a browser will hide a font while the custom font is loading.
- Swap – fallback text is shown before a custom font is loaded.
- Fallback – sets a brief time (such as 100ms) where custom font-styled text is invisible. If the custom font is not ready, unstyled text is displayed.
- Optional is similar to fallback but uses a fallback font instead of unstyled text.
3) Combine text and images
Have you ever wanted to combine images and text together? Well, fortunately, with CSS, you can do just that. For example, if you wanted to add a small icon before a particular piece of text, you set a small amount of CSS to help enhance written content or add an extra something to navigation buttons.
To do this, you need to set a div:before property:
div::before {
content: url(icon.png’) ‘Your text goes here.’;
}
4) The colour property goes beyond text
Web design colour and colour psychology play a massive part in creating effective and enticing web designs that attract and convert. If you use colour in your web design, you will likely use the colour property for text. However, did you know the colour property extends beyond this?
In some cases, it is not possible to apply the colour property. However, you can implement the border-color: inherit property for text where it is impossible to use the colour property. But wait, there’s more!
You can also set the visibility property to collapse. This may be particularly useful for designing great collapsible content boxes (or accordion-style sections).
5) Improve layouts using subgrids
Our following CSS fact you probably didn’t know is that you can improve the content layout using subgrids. Back in the old days, web designers used HTML tables to lay out content on a page. But things have moved on considerably from these terrible methods.
Subgrids are the new thing that works much better than old-school tables. The subgrid value is used with the grid-template-rows and grid-template-columns properties to create a subgrid, where the sizing of the rows and columns of the subgrid is based on the sizing of the parent grid.
Here’s an example of how to implement the code:
Parent grid:
.parent-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr 2fr;
}
Child grid:
.child-grid {
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
6) Streamline border property
Another CSS fact you probably didn’t know is that you can streamline your border property code, setting only 1 line of code for border styles, width, and colour in a single declaration. Now, adding multiple declarations that unnecessarily increase your code is no longer necessary.
Previously, an example of a border property would be:
.example {
border-width: 2px 5px 1px 0;
border-color: #FFA500;
border-style: solid;
}
But now, thankfully, you can streamline all the border properties into a single consolidated line:
.example {
border: solid 2px 5px 1px #FFA500;
}
7) Creating shapes
With CSS, you can create resizable vector shapes without the worry of horrible blurry raster images. You can create many different shapes with a couple of lines of CSS code, including circles, triangles, ovals, parallelograms, squares, etc.
To do this, you need to implement a border-radius property:
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
8) Change the shape of images with clip-path
Our last pick of CSS facts you probably didn’t know is that you can change the shape of images using the clip-path property. This is handy to create shapes from images, such as circles or stars, without cropping an image beforehand.
Using the clip-path property specifies an area of an element to hide:
.heading-blue {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
top: -352px;
left: 256px;
}
Did you learn anything new about CSS? You can implement many great properties and elements into your styling sheets to create unique web designs. With many excellent web design features, you can create appealing websites that attract, engage, and drive action.
Check out these 6 more CSS tricks to help boost your user experience