Learn to Code via Tutorials on Repl.it!

← Back to all posts
💫 Styling with CSS: The Basics 💫
[deleted]

achievments

  • good HTML knowledge

introduction to css

what is CSS? you ask. It means cascading style sheets and is used in HTML webpages, but frankly, I think it means a path to fancy fonts, colors, backgrounds, padding, ids, and unicorns.

formatting

Formatting in CSS is as easy as opening a file - literally because, in REPLIT, you have a pre-made file specifically for CSS. But, here are two tips if you are using different software to program:

  • use the <style> tag
  • always, always, remember to put all your CSS inside the <head>

Anyway, your first step to coding css will be opening the blank css file;

using css

First off, I want to show you the body of a webpage about rabbits that I made:

As you can see, the format is bland and boring. So, to start, let's change up the B&W first.

color and background

Coloring text in CSS is super easy, and usually, the best way to start CSS. So, I fired up the style.css file and started coding. Now, the tags for CSS are slightly different from HTML. Their format is:
[[HTML TAG THAT YOU WANT TO EDIT]] {
[[CSS TAG]]: [[CSS PROPERTY]];
}

Now, say, I want to change the color of my h1s. For that, I'll do,

While using the color tag, you can say "red, green, white, blue, crimson, cyan, eggplant" yadah yadah or say "rgb();"(of course, with the red, green and blue units). That's one of the best parts: you can be creative.

Anyway, this is how my h1 looks now.

and the code for it:

Now, let's change the background color for the whole webpage and the h1:

####output:

Yay! Now let's change the colors of the other tags.

BEFORE

AFTER

fonts

Do you know what a font-family is? It's the roots of modern-day fonts. The five roots are serif, sans-serif, cursive, fantasy and monospace. Of course, you can use other fonts while using the font-family tag but it is always good to use other fonts too, and a root at the end because not all computers or ipads have all the same fonts. Let's use the font-family tag in the rabbits webpage.

Great! Now our h1 looks like this:

There's also something called font-size, which is used like this:

You can also use text-decoration to decorate your font!:

Now let's use all these fancy font tricks to make our webpage font-ier!

BEFORE

AFTER

and you're done

Now you know the few basic properties of CSS. Get coding!

Comments
hotnewtop
DynamicSquid

Nice tutorial!