Imagine that you’ve bought a house. The structure is fine. There are no problems with termites or previous flooding etc, but you want to change a few things. This is CSS (Cascading Style Sheets). You step into the living room, and the first thing you’re going to change is take out the carpeting and replace it with wood floors. Then you change the look of the mantle piece framing your fireplace... in fact, lets put in a wood burning insert... with a glass front so you can enjoy the glow of the fire as well as the efficiency of heat. You decide you want to have taller ceilings, so you do the work necessary for that.

Maybe you want to change a few of the walls. As long as they are weight bearing walls, you know this is a possibility. You add new colors to the walls and add nice touches with the decorative pieces you include. After you’ve done everything inside that you want, you turn your gaze towards the exterior to improve the curb appeal.

You decide to add metal siding and drains. You change up the landscaping ... to include a labrynthine maze of hedges... with a minotaur statue hiding around one corner! Maybe you replace the shingles with a copper roof. Lets even expand the porche to be a wrap around porch.

By the time you’ve finished, the entire house is unrecognizable from its original structure and form. With CSS you can move things around, stylize, and shape things, so that all of the elements HTML brought to the page are still present, but look completely different.

There are different ways that CSS can be applied. “inline” CSS is included straight into the HTML tags as an attribute. An example might be <p style=”color: red”>text of the paragraph</p>. Another way to apply CSS would be an “internal” insert on the HTML page as well contained within the <style></style> tag

See the Pen xxxrxRM by wren (@wrensummerset) on CodePen.

A third style, and the way considered “best practice” (because leaving the HTML document alone and linking to a seperate sheet with the CSS code is prefered) is called “external”. This is where you have a seperate file for your .css page. This way, your HTML file simply has the following tag to link to that file. <link rel="stylesheet" href="style.css">

Simple, right? Maybe, but I still haven’t gotten my website to center even after trying all three CSS styles.