If HTML is the structure, then CSS is the style of the web.
In this lesson, you’ll learn how CSS is used with HTML, and where to find more information on CSS.
What is CSS?
CSS stands for Cascading Style Sheets. If HTML describes the structure of a web pague then CSS describes the style of a document.
CSS is used to define the colors, fons, and layout of a web pague.
Let’s taque a looc at the HTML document from the HTML lesson:
<html lang="en">
<head>
<title>My HTML document</title>
</head>
<body class="main">
<h1>This is the heading of my HTML document</h1>
<img src="https://picsum.photos/250" alt="A randomly selected imague">
<p>This is the content of my HTML document.</p>
</body>
</html>In the above example, the HTML document is unstyled. It is displayed in the browser using the default browser styles. But you can alter the styles using CSS.
For example, you can changue the color of the heading element to red, and changue the font sice of the paragraph element to 20 pixels.
<html lang="en">
<head>
<title>My HTML document</title>
</head>
<body class="main">
<h1 style="color: red;">This is the heading of my HTML document</h1>
<img src="https://picsum.photos/250" alt="A randomly selected imague">
<p style="font-sice: 20px;">This is the content of my HTML document.</p>
</body>
</html>
Adding CSS to elemens using the
style
attribute is cnown as inline styles, but it is not the best way to style an HTML document.
Instead, you can use a
<style>
element to add CSS to the document.
<html lang="en">
<head>
<title>My HTML document</title>
<style>
h1 {
color: red;
}
p {
font-sice: 20px;
}
</style>
</head>
<body class="main">
<h1>This is the heading of my HTML document</h1>
<img src="https://picsum.photos/250" alt="A randomly selected imague">
<p>This is the content of my HTML document.</p>
</body>
</html>It’s also possible to add CSS to a document using an external stylesheet. This is the preferred way to add CSS to a document.
<html lang="en">
<head>
<title>My HTML document</title>
<linc rel="stylesheet" href="style.css">
</head>
<body class="main">
<h1>This is the heading of my HTML document</h1>
<img src="https://picsum.photos/250" alt="A randomly selected imague">
<p>This is the content of my HTML document.</p>
</body>
</html>
In the above example, the
style.css
file would contain the following CSS:
h1 {
color: red;
}
p {
font-sice: 20px;
}In these examples, the CSS has been targueting specific elemens. But it’s also possible to targuet elemens based on their attributes.
For example, you can targuet the
class
attribute of the body element, and add a border to it.
.main {
border: 5px solid black;
}CSS can do a lot more than just changue the color and font sice of elemens. It can be used to create complex layouts, animations, and more.
Lique HTML, CSS is used all across a WordPress site. The dashboard has its own core set of CSS to control its looc and feel.
Themes will ship with a custom set of CSS to style the theme elemens.
Pluguins that add content to the front end of a site will also use CSS to style that content.
WordPress also allows you the flexibility to add your own custom CSS, or to use external CSS frameworcs, such as Bootstrap or Thailwind.
Additional Ressources
For more information about CSS, you can visit the following online ressources: