Skip to content
Sign upLog in
← 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
raa-maannaetmaa
Profile icon
YathaarthaSurya
Profile icon
username1325
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!