💫 Styling with CSS: The Basics 💫

Profile icon

[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;

css file

using css

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

rabbits body

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,


h1 {
      color: red;
}

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.

rabbits h1

and the code for it:

rabbits h1 code

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


h1{
  color: crimson;
  background-color: gray;
}
body{
  background-color: slategray;
}

####output:

screenshot

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

BEFORE

rabbits body

AFTER

Screenshot 2021-03-20 141010

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.


h1{
  color: crimson;
  background-color: gray;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

Great! Now our h1 looks like this:

Screenshot 2021-03-20 141619

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


h1{
  color: crimson;
  background-color: gray;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 2.6em;
}

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


h1{
  color: crimson;
  background-color: gray;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 2.6em;
  text-decoration: underline dotted red;
}

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

BEFORE

Screenshot 2021-03-20 141010

AFTER

Screenshot 2021-03-20 142443

and you're done

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

Voters

Comments

hot new top

When using CSS file I could type in color: then a drop down menu of colors appeared to choose from. This is not happening any more. How do I get to the drop down colors, fonts, border styles??

Nice tutorial!