User blog:Paperluigi ttyd/Intro to HTML and CSS, Part 2

This is part 2 of a blog series on HTML and CSS. In this part I will talk about CSS classes, Notepad++, and then give a longer example then I have previously.

Classes
CSS is more complex then simply adding color to a page. It can do things like change alignment, padding, and much, much more. But what if you want to make more than one version of something, such as two possible ways that a  or   could look like? You can do this, but only by adding classes, which you then must reference in your CSS. Normally, you would put this CSS into a wiki-wide CSS console, but for demonstration purposes it is easier to use Notebook++, since it is not cached.

Note: You can go back to part one for a link to the download page for Notebook++ and download it if you haven't already!

Once in Notebook++, you will many numbered rows. Delete whatever text is so that there is only one blank row. Start off the document so that the first few rows look like this:



Then, do save as and save the document as a HypetText Markup Language File (HTML file). Go to the folder you saved it in and open up the document. You will see something like this:



As you can see, both paragraphs have a red background. But what if you want to have one of the paragraphs have a black background with white text. This is when you would have to add classes to both elements and define them separately like this:



Which produces:



Now, one paragraph has a red background, while the other has a black background with white text, as defined in the classes.

A Full Example
Many people on the wiki use div tags in combination with properties and values to create a box around different things, whether is be a tabview tag or a heading template with text underneath. This at first may seem complicated to code, but it is actually rather simple. Take this code...

...which produces this:

This is in a rounded box.

At first this looks like a lot, but there are actually only 4 properties changed in this tag. The first property is the border. A border property requires 3 values, the width of the border, the type of border, and the color. The width is set to 1px, the type is set to solid, and and the color is set to #aaaaaa, or a whitish/grey color. I'm not sure what other types there would be other then solid and therefore I couldn't tell you what other things there could be for color, but this doesn't matter.

The second property defined is the -webkit-border-radius, which is defined as 7px. Lets skip this one for now because it will be easier to comprehend later on.

The third property is the padding, which is defined as 7 px. This is the distance between any text inside the rounded box, and the rounded box itself.

The final property is margin-top, which is defined as 10px. This is the distance between the rounded box itself and anything outside the rounded box.

Now back to the -webkit-border-radius. The 10px represents that the borders at the corners are defined by 10px circles with the center being at the corner of the content area. Since the padding is only 7, you may ask why the radius needs to be 10? I actually don't know why, but smaller numbers will still work. If you increase the number, the corners will eventually become one rounded turn until it stops changing. I will look into this...

Note: The -webkit prefix must be changed if you are using different browsers. Webkit browsers are Safari and Chrome, while Firefox needs the prefix -moz.

Thanks for reading another one of my overly long blogs. My next blog will definitely be Fanon Con (look for it on Friday!) After that I will possibly make a third blog about the Inspect Element tool and answer any questions that I get on either blog.

Paper Out!