💫 Styling with CSS: The Basics 💫
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,
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.
and the code for it:
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:
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.
h1{ color: crimson; background-color: gray; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
Great! Now our h1 looks like this:
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
AFTER
and you're done
Now you know the few basic properties of CSS. Get coding!
Nice tutorial!
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??