These days, there are a lot of easy ways to design website content. You’ll find drag-and-drop solutions, website builders, and even full Content Management Systems (CMS). However, these tools can only take you so far.
If you want to create truly original designs – rather than risk ending up with a copy-cat website – it pays to learn a little coding. The best place to start is with Cascading Style Sheets (CSS), a language that enables you to control how elements on a web page are presented.
In this post, we’ll explain what CSS is and how it works, in beginner-friendly terms. Then we’ll help you get started on the road to learning CSS – which is easier than you might expect. Let’s jump right in!
The Fundamental Building Blocks of a Website
Even if you don’t have much technical experience, you probably know that programs and websites are created using various coding languages. This can make it a little intimidating to consider going ‘under the hood’ to make custom changes on your own site.
However, the basic languages used for building websites are more user-friendly than your standard programming language. The three most important of these are:
- HTML: Hypertext Markup Language (HTML) is how web pages are ‘built’. It determines what types of elements appear on the page, and where.
- CSS: This language is designed to be used alongside a ‘markup’ language like HTML. CSS defines how HTML elements are formatted – controlling their layout, colors, fonts, and so on.
- JavaScript: While the previous two languages are mainly concerned with static (unmoving) content, JavaScript is used to create interactive features and elements.
These descriptions are a simplification, of course, and all three languages are well worth learning about. For designers, however, CSS is the most crucial. Let’s look at how this particular language works in more detail.
What CSS Is and How It Works
Remember how we said that HTML is a ‘markup language’? CSS, on the other hand, is a ‘style sheet language’. This is a useful descriptor, since it lets you know what CSS is all about – styling and presentation.
While you can add CSS directly to a specific web page’s code, this isn’t considered a best practice. Instead, designers create style sheets, which are separate files that contain just CSS code. There are a few important things to understand about these files:
- One CSS style sheet can contain rules that affect the styling of multiple pages on a site. When any one of those pages are visited, the style sheet code is accessed, and it determines how the HTML that makes up the page is displayed.
- A site typically contains multiple style sheets, each governing one or more pages. You might have one style sheet for your home page, for example, another for all other pages, and a third for blog posts.
- By editing style sheets or adding new ones to your site, you can change its appearance and layout without affecting any of the actual content (which is determined by HTML instead).
Again, this system is more complex than these simple rules suggest. Still, this should be enough to give you a sense for what style sheets do and why they matter.
An Example of CSS in Action
By now, you may be wondering what’s contained in the style sheets we’ve been talking about. Here’s an example of what a website style sheet looks like:
A style sheet can contain as much or as little information as needed. Typically, it includes rules that govern a page’s layout and formatting, along with the colors, fonts, and other styling information for individual elements (such as text).
Let’s look at a simple example of CSS code:
p {
font-family: verdana;
font-size: 20px;
color: green;
}
The “p” is called a ‘selector’, which indicates what element the code should effect. In this case, “p” stands for paragraph. That means the following rules will be applied to all elements that are marked as paragraphs in the relevant pages’ HTML.
The next few lines are fairly self-explanatory. They determine the font family, size, and color for all text within those paragraphs. If you change color:green to color:blue, the text on the page will change color accordingly. These lines are also surrounded by brackets, so it’s clear which rules within the style sheet apply to which elements.
How You Can Learn More About CSS
While the above example is very basic, hopefully you can start to see the applications when it comes to website design. Using CSS, you can indicate any specific element on a page, and decide exactly what it will look like, how big it will be, and so on.
The best way to learn how to use CSS is to jump in and start experimenting. Set up a private testing website using a CMS that enables you to access style sheets easily, such as WordPress. Then, practice making changes and seeing what happens on the front end of your site. It’s a lot easier to learn through incremental tweaking than to try creating a new style sheet from scratch.
There are also plenty of handy resources that can help you learn more about CSS. One of the best – and the one we’d suggest starting with – is the W3Schools CSS Tutorial:
This interactive series of lessons will walk you through the language step by step, teaching you the fundamental terminology and giving you plenty of opportunities to practice.
Conclusion
Design and coding may seem like two entirely different skill sets. When it comes to websites, however, the two are inextricably linked. Fortunately, anyone who wants to learn how to design web pages has access to a language that’s designed to be as user-friendly as possible – CSS.
By making changes to a website’s CSS, you can get near-total control over its layout and appearance. What’s more, since your edits are contained in style sheets, you can alter the site’s look without affecting its content. The best way to learn CSS is to start experimenting with it on a practice site, and to check out beginner tutorials such as the one offered by W3Schools.
Do you have any questions about how to use CSS as a designer? Let us know in the comments section below!