An app or website without CSS looks kind of blah. It’s like having an empty house, the structure is there but there’s no style.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. Essentially, it allows us to style our HTML elements.
CSS will either be an attached document or embedded directly in the HTML. These three ways of making use of CSS in an HTML document are:
Inline styles- Using the style attribute in the HTML start tag.
<p style =“color: red; font-size: 15px;">This paragraph will be red.</p>
Embedded styles- Using the style tag in the head section of a document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<style>
body { background: black; }
p { color: red; }
</style>
</head>
<body>
<p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>
External style sheets- Using the link tag, pointing to an external CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="css/style.css">
<style>
body { background: black; }
p { color: red; }
</style>
</head>
<body>
<p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>
Arguably, the best way to use CSS for styling is an external style sheet. This way all of the CSS-related code is in a separate file and if you need to change something you don’t have to try and go line by line to find where you need to make the change in your HTML.
While we can usually get around well enough with the CSS basics- background, color, font-family, text-align, etc. There are so many other CSS properties that we use and we can do some pretty amazing things with CSS. A good way to learn or brush up on CSS is playing games! Here are some resources to make learning CSS more fun:
Flexbox Froggy- https://flexboxfroggy.com
Grid Garden- https://cssgridgarden.com
CSS Diner- https://flukeout.github.io
CSS Battle- https://cssbattle.dev
Flexbox Defense- https://www.flexboxdefense.com
The properties are seemingly endless and no doubt there are some that will likely never get used, W3Schools has a great list here.
In writing this article I realized just how much there is to know about CSS and I've really only just scratched the surface. I think this will be a topic I explore more in the future. Thanks for reading!
Top comments (0)