Difference between revisions of "CS47"

From Coder Merlin
m (Joshua-vigel moved page CS48 to CS47: We are merging all the pages down)
m (Editorial review and minor corrections)
 
(2 intermediate revisions by one other user not shown)
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 Cascading style sheets, all that means is CSS will allow you to design and make your website unique. An example is changing the background color, or how BIG or small your text is.
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.
==== Let's start with the phrase "<style>" ====
We can make many CSS changes, but we will start with the basics.
So to even start with CSS you need to put the <style> phrase. This tells the computer when it should start reading for its own CSS changes. for example, if your code looked like this:


p{color: #fffff }  
==== Color ====
<p> Hello, World! </p>
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.
{{MerlinNoteFromEditor|Please insert the picture referred to just above.}}


The computer would not understand what you want. But if you put <style> it's like a START HERE button or the first page of a book.
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>
body{background-color: #000000}
</syntaxhighlight>
This will make your background black.
 
Now using this for text is a little different, but similar. Like here:
<syntaxhighlight>
h1{color #FF000
</syntaxhighlight>
This will make your heading text red.
 
That is all for colors. Now let's cover 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."
<syntaxhighlight>
h1{font-family: 40px }
</syntaxhighlight>
This will make your font size 40 pixels big!

Latest revision as of 19:44, 8 February 2023

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder

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 #FF000

This 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!