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:
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.
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??
💫 Styling with CSS: The Basics 💫
achievments
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:
<style>tag<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
colortag, 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-familyis? It's the roots of modern-day fonts. The five roots areserif, 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-decorationto 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!
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??