If you’ve ever wondered how web pages are made beautiful, dynamic, and visually appealing, the answer lies in Cascading Style Sheets (CSS). It is a fundamental web technology that allows developers to control the presentation and layout of HTML documents, making it an essential skill for anyone aspiring to become a web designer or front-end developer. This post is part four of my ‘Getting Started In Coding‘ series. It will walk you through some basic CSS concepts to get you started on your journey, but is not a tutorial. I do assume though that you would probably have read the preceding article on HTML.
What is CSS?
Cascading Style Sheets, commonly known as CSS, is a stylesheet language which we use to define the visual presentation of web documents written in HTML. With CSS, you can control various aspects of a webpage’s appearance, such as colours, fonts, layout, spacing and even animations. The “cascading” part of its name refers to the hierarchical application of styles, allowing for easy maintenance and flexibility; you will learn more about that as you progress.
How to Use CSS
There are several ways to apply CSS to an HTML document:
- Inline CSS: You can apply CSS directly to individual HTML elements using the
styleattribute. However, I would not recommend this method for larger projects; it mixes presentation with content and becomes harder to maintain. - Internal CSS: Placing CSS code within the
<style>tags in the<head>section of an HTML file allows you to apply styles to the entire page. This is useful for smaller projects or quick prototyping. - External CSS: In this method, CSS code is written in a separate file with a
.cssextension and linked to the HTML document using the<link>element. This is the preferred and most efficient way of using CSS, especially for larger projects, as it promotes separation of concerns.
In the following sections, we’ll cover some basic CSS concepts to help you build a strong foundation in web design; nothing too deep, just the essentials.
Selectors and Properties
In CSS, selectors target specific HTML elements in a document, while properties define the desired visual appearance of those elements. Selectors can be html tags, classes, IDs, or even more complex patterns.
/* Selector: Targeting all paragraphs */
p {
/* Property: Setting font size and color */
font-size: 16px;
color: #333333;
}
/* Selector: An ordered list within a specified element ID */
#myDiv ol {
background-color: #fafafa;
font-weight: bold;
}Note that in the second example above, the targeted ID would be specified in the HTML document by:
<div id="myDiv">Some text</div>Typography
CSS allows you to control the typography of your web pages, including font family, size, weight, style, and spacing.
/* Applying custom fonts and setting line height */
body {
font-family: "Arial", sans-serif;
font-size: 18px;
line-height: 1.6;
}Box Model
The box model is a fundamental concept in CSS that represents an HTML element as a rectangular box with four layers: content, padding, border, and margin. Understanding the box model is crucial for creating layouts and spacing elements on a webpage. It can seem a bit complex when you first try to align multiple elements on a page, but stick with it; you’re going to need to know this.
/* Creating a basic box container */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
}Flexbox
Flexbox is a more recent powerful layout model that makes it easier to distribute elements within a container. It allows you to create responsive and flexible designs without relying heavily on floats or positioning; for the moment you will just need to know that this means it can save you quite a few headaches.
/* Creating a basic flex container */
.container {
display: flex;
justify-content: center; /* Horizontally centres items */
align-items: center; /* Vertically centres items */
}CSS Grid
Similar to Flexbox, CSS Grid is a layout system that enables two-dimensional grid layouts. It offers more control over rows, columns, and their alignment, making it ideal for complex designs. Again, it is a more recent development that allows you to make customised layouts more easily.
/* Creating a basic grid container */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-gap: 10px; /* Spacing between grid items */
}Learning Resources
Ready to dive deeper into CSS? Here are some a couple of excellent online resources to expand your knowledge:
- MDN Web Docs – CSS: A comprehensive guide to CSS concepts with examples and references.
- freeCodeCamp: A learning platform with interactive CSS tutorials and projects.
In Summary:
CSS is an essential skill for web designers and front-end developers. Understanding the basic CSS concepts, such as selectors, properties, the box model, Flexbox, and CSS Grid will empower you to create the visual impact and responsiveness you need in your web pages. So, roll up your sleeves, and get ready to practice and experiment with CSS. The world of web design is waiting for you to explore!