Skip to content
← Back to Community
💫 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
Profile icon
muhammadaryan12
Profile icon
Saif080
Profile icon
KrishnaKanwal
Comments
hotnewtop
Profile icon
GramK321

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??

Profile icon
DynamicSquid

Nice tutorial!