[Tutorial] How to use CSS

Using CSS

To get started, create a file called “style.css”, and then add the following code in your static page:

<link rel="stylesheet" href="style.css">

Now that you’re all set up, let’s just get into styling your webpage!
Go to the style.css file, and add the following code:

body {
  background-color: [COLOR];
}

Replace the [COLOR] with the color you want for the background!
Here’s some commonly used colors:
white, black, green, blue, red, pink, teal, tomato.

Now, you can add these:

font {
 font-family: [FONT];
}

Replace [FONT] with your favorite font!
Here’s a few examples:
Sans serif, Comic Sans MS.
You can also replace the “font” word at the beginning with something else:
a, p, h1, h2, h3, h4, h5, h6.

And finally,
Some things you can add to the body { part:
background-image: url(INSERT-URL-HERE)
font-family: [FONT];-note: This will change all the fonts of the texts.

3 Likes

Hey @no_one, nice tutorial on how to use CSS, but can you wrap the code in code blocks, by surrounding the code in three backticks (```)?

4 Likes

Ok :slight_smile:
edit: Apparently, it already was :/

Should be like this:

body {
background-color: [COLOR];
}

Use: 3 backticks (```), return, then code, return, than 3 backticks again

uhh… what?

Three backticks (```)

Your code here

Three backticks (```)

image

i did. it’s the same

@LankyBox01 Nope. You did one backtick:
console.log("not highlighted");
image
Instead of

console.log("highlighted");

image

click the edit button, you’ll see…

image

Ugh… i think it’s ok like that

Not every line. Just do the block itself:

two
lines

image

Do it like

body {
background-color: [COLOR];
}

not

body {
background-color: [COLOR];
}
1 Like

Ugh just leave it how it is. Let’s get back on topic

Its just hard for people to focus on the tutorial when the formatting is off.

3 Likes

fine, you edit it

I can’t.