FANDOM


Hello, whoever are you <insert name here>, today you will learn about CSS! Do note that CSS is useless without HTML, so check the HTML tutorials! Seriously, check them. ESPECIALLY THE FIRST ONE!

Well, let's begin.

What is CSS?!?!??! Edit

CSS is short for Cascading Style Sheets. CSS defines how HTML elements are to be displayed. CSS is also rather easy to learn.

Most attributes are generally wrote like this:

attribute:property

CSS doesn't work without HTML, so you need to have a HTML file for CSS.

Create a file (give it any name) and add the .css extension. EXAMPLE: cheese.css

Linking CSS with HTML Edit

On a HTML file (with the basic structure done), add the tag <link rel="stylesheet" type="text/css" href="filename.css"> between the <head> tags and replace filename.css to the name of the CSS file you created (which in my case is cheese.css)

After that, we can begin EXPERIMENTS!

SUPER DUPER SPOOKY EXPERIMENTS! Edit

...not really. Anyway, on the HTML file, make five paragraphs and DON'T give them any attributes (color,font,etc.) Leave them the way they are. After you did that, double-click the HTML file. Your browser should open and you should see the five paragraphs you wrote. Now, on the CSS file write:

p {

color:red;

textalign:center;

}

Refresh the page! You should now see your paragraphs colored in red and in the center of the page.

To actually explain the code:

p - This selects all the paragraphs from the HTML file linked.

{ and } - All attributes go between these brackets.

color - Determines the color of the paragraphs.

red - The color which the paragraphs will have.

textalign - Aligns the paragraphs.

center - Where the paragraphs should be.

The ; symbols are used to separate attributes. THESE ARE REQUIRED AT THE END OF ALL ATTRIBUTES WITH THE EXCEPTION OF THE LAST ONE. THE LAST ONE IS OPTIONAL, BUT IT'S STILL RECOMMENDED TO PUT IT THERE (in case you want to add more attributes).

...And that's pretty much it! You just saw a little bit of CSS! CSS doesn't get much more complex than this.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.