[Tutorial] How to use CSS

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

#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.