After writing my last blog post about my top 5 favorite design tools (which you can find here if you missed it!), I have definitely had a little front end on the mind. And as I worked through a code challenge at the beginning of last week and a few projects over the course of the rest of the week, I have been thinking about the different ways that one can implement CSS. So today I just want to take a minute to talk about four different ways to write CSS.
The OG
The way that most people probably think about writing CSS is in an external style sheet. After all, CSS stands for Cascading Style Sheets. We use external style sheets by creating a separate file (such as style.css) importing the file as a stylesheet in the head element of your html file. The beauty of using an external style sheet is reusability. If you have multiple html pages, you can import the stylesheet at the top of each of them and the styles therein will apply to each of them. Your syntax for importing the style sheet looks a little something like this:
<head>
<link rel="stylesheet" href="styles.css">
<title>A Project with An External Stylesheet</title>
</head>
When we're writing CSS in an external style sheet, our syntax is as follows:
body {
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
display: flex;
width: 90vw;
}
To break down a few key points here, our specific CSS properties are listed within curlybraces {}, followed by colons : and each properties definition is semicolon ; separated.
To apply CSS to a class, we precede the class name with a dot . (ex. .container) and list the CSS as previously mentioned.
To apply CSS to something with an ID, we precede the ID name with a # (ex. #container) and again, list the CSS as previously mentioned.
Inline CSS
Another way to write CSS is to use what we call, inline CSS. This can be helpful if you're looking to add styling to a single HTML element.
We do this by including the CSS in the element tag. For example:
<h1 style="font-style: italic; color: gold;">Now I'm Italicized & Golden!</h1>
To break that down, we tell the tag that we are applying styling by saying style= and then, in we put the properties and definitions (colon-separated :) in quotes " ". If we are applying more than one property (as in the example above), they are semicolon-separated ; within the same quotation marks.
In the <head>
Another option you have is to put your styling within the <head> element. This may be the option for you if you are trying to style all of the elements in a single html (rather than multiple pages). They syntax for CSS in the <head> element is as follows:
<head>
<style>
body {background-color: red;}
h1 {color: gold; font-style: italic;}
</style>
</head>
The above code will give us a red page with the golden, italicized <h1> from before. To break down that syntax, we put <style> tags within our <head> tag and within that, we put the tag type (ex. body or h1) and then, within curlybraces {}, we list the properties and definitions (colon-separated :). We follow those with a semicolon ; and, if we are applying more than one style to a certain tag type, we semicolon-separate those too, but leave them within the same set of curlybraces.
Styled Components
If you're using React, you have a fourth (terrific) option! Styled Components allow you to add styling directly to react components, therefore only loading in the necessary styling and nothing extra.
To use styled components, we first need to install styled-components by running npm i styled-components.
Once we've added styled-components to our package, we need to import it into our component(s) as such:
import styled from 'styled-components';
Then, the syntax for adding the styling is as follows:
const Title = styled.h1`
color: gold;
font-style: italic;
`
render(
<Title>
I'm still Italicized & Golden!
</Title>
);
To break that down, we set a const (capitalized) and set it equal = to styled. whatever the tag type is (in this case h1, but you can set a styled div, p, a, or whatever you'd like). We follow the tag type with a backtick () and then we list the properties and definitions (colon-separated:) and follow them each with a semicolon;`. Make sure you close the backticks and then, in your render, you can call the const you defined like a tag and then, within the opening and closing tag, input whatever it is that you want styled.
So that's a little introduction to (or a little refresher on) different ways of implementing CSS. With study and practice, you can become a CSS master and, trust me — that is super valuable!
Top comments (2)
Nice explanation with example. The question "How are CSS styles delivered to clients for rendering a webpage?" in the article devopedia.org/cascading-style-sheets is relevant.
BTW, an interesting career move from opera singer to developer. Welcome to the tribe!
Your Article was great.
Follow my YouTube Channel for amazing Web Development Tutorials.
youtube.com/channel/UCDT8sIFy3pW8L...