Difference between revisions of "CS47"
Sara-vaughan (talk | contribs) |
Jeff-strong (talk | contribs) m (Editorial review and minor corrections) |
||
| Line 1: | Line 1: | ||
= Intro to CSS = | = Intro to CSS = | ||
==== First off, what does CSS stand for? ==== | ==== First off, what does CSS stand for? ==== | ||
CSS stands for | CSS stands for cascading style sheets. All that means is CSS allows you to design and make your website unique. An example is changing the background color, or how BIG or small your text is. To do this, we will make a style sheet that is an empty HTML file named Style.css. | ||
We can make many CSS changes, but we will start with the basics. | We can make many CSS changes, but we will start with the basics. | ||
==== Color ==== | ==== Color ==== | ||
To start you need to know how to type a color so the computer can read it. All colors are written using a combination of letters and numbers. | To start, you need to know how to type a color so the computer can read it. All colors are written using a combination of letters and numbers. | ||
Here's a picture with some basic colors to help. | Here's a picture with some basic colors to help. | ||
{{MerlinNoteFromEditor|Please insert the picture referred to just above.}} | |||
Although it looks weird at first, these will help you immensely. Now we will put it into action. Let's start with the background color. Here's an example: | |||
<syntaxhighlight> | <syntaxhighlight> | ||
body{background-color: #000000} | body{background-color: #000000} | ||
| Line 20: | Line 21: | ||
This will make your heading text red. | This will make your heading text red. | ||
That is all for colors. Now let's cover size. | |||
==== Size ==== | ==== Size ==== | ||
{{MerlinNoteFromEditor|"font size" is mentioned just below, but I don't see it in the example. Should that be "font-family" instead?}} | |||
This is actually really simple now that we have done the colors. You just have to put the number size you want next to the phrase "font size" | This is actually really simple now that we have done the colors. You just have to put the number size you want next to the phrase "font size." | ||
<syntaxhighlight> | <syntaxhighlight> | ||
h1{font-family: 40px } | h1{font-family: 40px } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
This will make your font size 40 pixels big! | This will make your font size 40 pixels big! | ||
Latest revision as of 19:44, 8 February 2023
Intro to CSS[edit]
First off, what does CSS stand for?[edit]
CSS stands for cascading style sheets. All that means is CSS allows you to design and make your website unique. An example is changing the background color, or how BIG or small your text is. To do this, we will make a style sheet that is an empty HTML file named Style.css. We can make many CSS changes, but we will start with the basics.
Color[edit]
To start, you need to know how to type a color so the computer can read it. All colors are written using a combination of letters and numbers. Here's a picture with some basic colors to help.
This article can be improved by: Please insert the picture referred to just above.
Although it looks weird at first, these will help you immensely. Now we will put it into action. Let's start with the background color. Here's an example:
body{background-color: #000000}This will make your background black.
Now using this for text is a little different, but similar. Like here:
h1{color #FF000This will make your heading text red.
That is all for colors. Now let's cover size.
Size[edit]
This article can be improved by: "font size" is mentioned just below, but I don't see it in the example. Should that be "font-family" instead?
This is actually really simple now that we have done the colors. You just have to put the number size you want next to the phrase "font size."
h1{font-family: 40px }This will make your font size 40 pixels big!
