[Tutorial] How to use CSS

Glitch Tutorials
1

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
2

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
3

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

4

Should be like this:

body {
background-color: [COLOR];
}

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

5

uhh… what?

6

Three backticks (```)

Your code here

Three backticks (```)

image

7

i did. it’s the same

8

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

console.log("highlighted");

image

9

click the edit button, you’ll see…

10

image

11

Ugh… i think it’s ok like that

12

Not every line. Just do the block itself:

two
lines

image

13

Do it like

body {
background-color: [COLOR];
}

not

body {

background-color: [COLOR];

}
1 Like
14

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

1 Like
15

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

3 Likes
16

fine, you edit it

17

I can’t.

19

Hi! I am a little late, but the way it works is you add the language of code after the three backticks. So to get the text formatted to CSS. you would do this
image

20

nice lolllllllll