CSS tips and tricks are invaluable as a web designer, as it is the single most important tool used in designing websites. It's used to add styles to HTML web pages and is often used alongside Javascript. If you've spent any amount of time learning web design, you've undoubtedly encountered it.
As with any of the core components of web development (HTML, CSS, and JS), there are many practices, shortcuts, and 'secrets' that aren't often so easy to learn. It's important to grasp these concepts well early on so that you don't spend hours trying to center a <div> every time you try and create something new.
Let's take a look at some of these CSS tips and tricks, and try to help you nail down the bare essentials to help build a solid knowledge of the tool.
Ten CSS Questions and Answers for Newbies
Here are ten questions (and their answers) which I think would have boosted my learning when first starting with CSS. Some of them are simple, and others are a little more complex to get your head around, but there's something in this guide for everyone. Let's dig in.
What does CSS Stand For?
CSS stands for Cascading Style Sheets. It's named as such as it is a language used to style web pages written in HTML and XML. CSS can be written either directly within the HTML markup or saved as an external .css file.
In modern web development, skills in CSS are often expected to extend into stylesheet-based frameworks such as SCSS and Sass, Bootstrap, and TailwindCSS.
How to add CSS to HTML
There are three ways to add CSS to HTML: Inline, Internal and External styles. Let's add some CSS to give a web page a blue background, seeing how it's done using each method.
Internal CSS refers to styles written within the head tags of a web page. You can use internal CSS as you see in the example below:
<head>
...
<style>
body {
background-color: blue;
}
</style>
...
</head>
Next, is external CSS - the most common way to use it in modern web development. With external CSS, we store our CSS in an external .css file, adding a link to it in the head of the HTML document. In this case, our style.css might look something like this:
body {
background-color: blue;
}
And in the head of our HTML document we would point to the style sheet with a link tag as follows:
<link rel="stylesheet" href="style.css">
Finally, with inline CSS, we use the style property of HTML tags to apply styles to each element individually. The same example in inline CSS would appear like this:
<body style="background-color: blue;">
...
</body>
Now, while in this case, it might seem inline styles are quickest, they become near useless when repeating elements. Besides, it's best practice to keep as many of our resources separate as possible when designing websites, in the case they should grow large and difficult to maintain.
As such, external CSS is the de facto standard - it allows you to keep your style sheets external and organised (and keeps your HTML clean and easy to read). What's more, with frameworks like SCSS / Sass, you can split your style sheets into files organised for different sections of your site, or different design components.
How to Center Text in CSS
The simplest way to center-align text CSS is to use:
text-align: center;
However, this only centers relative to the parent element - so if your text is in a div which takes up 50% of the page, then it will be centered at 25% of the total page width. This is one of those cases where over time, you'll understand better how this works by applying it again and again, in different circumstances.
How to Center an Image in CSS
Centering an image in CSS is pretty simple. If we add an image with the center-image class applied, we can add the following CSS to center the element within its parent element:
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
}
We can also reduce the image width if the image is larger than the web page itself. The same margin principle can be used with most other elements to center them on a webpage. To understand more about this, you should read up on flexbox.
How to Change Text Colour in CSS
This is a quick and simple one. While you might be looking for a text-color value or something similar, it's far more simple:
p {
color: red;
}
I find it's best to think of colour in CSS as split into foreground and background - with the former as the above, and the latter as background-color. In CSS, the text takes on the foreground colour you've for itself, otherwise its parent element.
How to Comment in CSS
To add a comment in CSS, simply add two forward slashes with two stars in between them, and your comments in the middle:
/* this is a comment */
Commenting is a very important consideration when writing clean code. When you refer back to your code for tweaking or maintenance, you might not always remember what you were thinking when you wrote it. As such, comments make this a more seamless process - especially in the case where other developers have to refer to code you've written or vice versa.
How to Change Font in CSS
Changing from the default fonts in CSS is probably in the three first things designers do in creating a new web page. In addition, many will specify different body, and heading fonts (if not a few more for other distinct copy elements).
To specify, for example, a body and heading font, you can use the following:
h1, h2, h3 {
font-family: Arial;
}
p {
font-family: Karla;
}
However, if we wanted to use a font like Karla (used on this site), which is hosted on Google fonts, we need to ensure that website visitors can access this font. We can easily do this by adding the link provided by Google Fonts.
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
Most font services like Google Fonts also allow you to select only the weights and styles (italic, bold, etc) that you use on your site, to minimize the size of the files a user downloads when visiting the site.
How to Remove Underline from Link CSS
By default, HTML links or anchor elements look really, really bad. Blue, underlined, and straight off your grandparents' computer from the 90s. To reset styling on link elements, we need to start with the following snippet of code:
a {
text-decoration: none;
}
This will remove the underline from links. We can then simply change the colour of the link to something we prefer - something different from your paragraph font colour is best, as differentiating links in text helps with accessibility.
a {
text-decoration: none;
color: palegreen;
}
Also, we can add styles to links that change depending on whether the link has been visited or not. Similarly, this applies to hovered links (this principle works for all elements), and active (clicked) links:
a {
text-decoration: none;
color: palegreen;
}
a:hover {
text-decoration: underline;
color: blue;
}
a:visited {
color: red;
}
a:active {
color: green;
}
How to Add a Background Image in CSS
Adding background images in CSS is a great way to manage responsive images, as individual img elements can become finicky when used within other elements on responsive web pages. To add a background image to a div with the class of bg, you can use the following code:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1571319791337-3d18ca429a6c);
background-position: center;
}
Without background-position set to center the image will, by default, attach itself using the top right corner. In addition, you might have noticed I set the width and height of the div using strange values. More on that in the next point.
What is VH and VW in CSS
VW and VH stand for viewport width and viewport height. These refer to sizes of the actual device the user is viewing the website on, and not simply pixel measurements. It breaks up the viewport height and width into a percentage factor, with 100vw representing 100% of the viewport width.
A common usage of this might be using:
section {
height: 100vh;
}
On the hero section of a web page, so that it covers the entire user screen on both mobile and desktop.
Remember, however, that it's the entire height and width of the user's device - so on web browsers, this includes the space used by the toolbars et cetera at the top of your screen.
Some Notes for CSS Beginners: Where to Go Next
Once you're feeling established in CSS, I would highly recommend swiftly moving onto SCSS / Sass. These are Javascript-aided CSS tools, which allow you to do more complex things in CSS, while also allowing most of your plain-written CSS to still be valid. For example, targeting paragraphs only within a certain element is simple, without assigning that element a class:
.hero {
color: red;
p {
color: blue;
}
}
While you're at it, check out frameworks like Bootstrap and TailwindCSS - while they offer a different skill set and have their learning curve, you can often learn a lot about CSS in how these frameworks are used and structured. It's a two-way deal.
Top comments (0)