Friday, January 15, 2016

The benefits of using CSS in HTML

This is an essay that I wrote for my Essay Writing class from the University of California, Irvine.  It is all about CSS (which is a course I am taking at University of Michigan online). Enjoy.

Have you ever wondered what makes up a website? Most websites use language called HTML, which stands for HyperText Markup Language. If the website only uses HTML, it will be bland, colorless, and all one size. There would be no bold, no italics, and nor borders. There would not be underline or any other of those fancy things we like to use when we type. If CSS (Cascade Style Sheets) is used for a website, it will become more interesting. Many people debate whether to use CSS, so here is the information you need to know.

One feature CSS uses that does not appear in HTML is the use of color. There are three ways that color can be given to something. One of these ways is to just give the color name, such as red, green, and blue. The downside to this, however, is it will not appear the same in every browser. Each browser has a different idea of what, for example, red is. The other two ways to color something are far more efficient, but a little more complicated. They include using hexadecimal values, which are 0-1-2-3-4-5-6-7-8-9 and from A to F. Six of these values combined with a pound symbol in fromt (#) are needed in order to make a hexadecimal color. An example would be #FFFFFF, which makes white. #000000 would make black. The final way is to use an RGB value, which is a red-green-blue value. Each value can have a number ranging from zero to 255, which will determine how much of the color it puts in. (255,0,0) would form pure red, the brightest red. (0,255,0) would form a bright green, while (0,0,255) would form a pure blue. As you could have guessed, (0,0,0) would form black and (255,255,255) would form white. HTML, on the other hand, cannot take any of these inputs. The only way to use CSS in HTML without creating a whole new CSS stylesheet to link to the main HTML code is to use a style tag in the head section. This is a very unconventional method, however, so try to avoid using it at all costs. As you can see, colors are of the many benefits that CSS provides over HTML.

The second benefit that CSS provides is the ability to modify text. Using the text-align command in a stylesheet, any text that has been put into the HTML code that the stylesheet is linked to will become either aligned to the center, the left or aligned to the right. For example, the whole first heading that might read "Benefits of CSS" could be centered perfectly over the rest of the text, which is aligned to the left or the right. Another text modification feature provided by CSS is the ability to change the font style. If someone wishes to change the font from Arial to Comic Sans MS, they can using the font-family command. The person who changes the font, however, needs to be sure to put AT LEAST two back up fonts just in case the browser they are using doesn't support the style they choose. If none of the choices are supported by the brower being used, it will just switch to the browser's default font, which I believe in many cases is Arial. The final text modification command being discussed here is the text-style command. While it may seem similar to the font-family command, it is completely different. One of the options for the text style is small-caps, which allows the user to change lower case text into all upper case text, but it will be the same size as the lower case text. Large text, on the other hand, is basically the same thing except it makes it all upper case without it being the same size as lower case. Essentially, it is like putting the caps lock key on while you type without needing to.

A third benefit of CSS is the ability to surround the text with borders of varying styles using the border command. The border command allows people to not only choose the style of border, but also the width of the border on every side and the color of the border. There are multiple styles for the border, as mentioned above. Here are a couple of them: dotted and solid. A dotted border is basically what one would expect. Instead of being a solid line surrounding your text, it's a dotted line. No surprise there. Also as the name suggests, solid is a solid line. Determining the width of each side of the border is a totally different matter, however. One can put in anywhere from one to four values, preferably measured in pixels, in order to determine how large the border will be. However, the number of parameters determine what each number controls the size of. If you put in one parameter, it determines the width for every side of the rectangular border. If you put in two parameters, the first parameter determines the width of the top and the bottom sides, while the second parameter determines the width of the left and right sides. If one decides to put three parameters, it gets a little tricky. The first parameter determines the width of the top. The second parameter determines the width of the bottom and the third parameter determines the width of the sides. If four parameters are put in, the first parameter determines the top, the second determines the right, the third determines the bottom, and the fourth determines the left.

Needless to say, none of the things stated above about CSS work in HTML without the style tag. If one is willing to put in the effort of making a whole new stylesheet to link in with their HTML code, the rewards will be well worth their time. As you can see, HTML is greatly enhanced by the use of CSS.

1 comment:

Anonymous said...

Great blog, Nick!