Thbopica

Cancel
html

CSS Revolution

Why is this called a revolution? Because without CSS your HTML code is very boring and plain. Check this out:

<button>Go!</button>

If you paste that into an HTML and open it in a browser, it looks very boring. That's where CSS comes in. CSS stands for Cascading Style Sheets. (Needs confirmation.) So what does it do? It styles your HTML code by adding color, changing font and shape, and even moving things around!

Look at some (untested) CSS code to improve this button:

<style>
button {
text-decoration: None;
background: #fe0000;
color: #fff;
padding: 10px;
border-radius: 5px;
}
</style>

<button>Go!</button>

Lets break this down. First we have a style flag, this allows one to put CSS code inside HTML. Now this flag should go in the head flag for the structure of: html -> head -> style.
Just to get your bearings the body flag goes in the html flag: html -> body. Your supposed to place it after the head flag.

For the actual CSS, we start with: "What element are we editing?" We declared that we are editing ALL button flags in this case. For just simple examples this works but shouldn't be used for larger scale projects because sometimes you might not want all buttons to look the same. I might make an article on classes and ids later, but if your interested check out:
W3schools html classes.

So what does this CSS do for button elements? First we get rid of any text decoration which is there by default for links and (I think) buttons. (The text decoration for links would be their underline and some other stuff...) We set that value to "None", which its meaning should be self explanatory. After that first block we insert a ";". This means that we are done with this first block, and are going on to the next. This is necessary because the whatever-reads-the-CSS ignores lines, and uses semi-colons the break up elements. This means that all the CSS elements could be on the same line, but it is harder to read and code that way.

Then we change the background of the button from its default gray color to a red color. Yes, "#fe0000" is a red color. You can't just put red
 Ghost

I cannot edit articles or delete comments


 jimmydin7

iomgghfd