Module #12 - See Me CSS (Required)

Now that you've had some practice creating basic HTML, it's time to take things to the next level. With the power of CSS you can apply a wide variety of styles to your HTML and you can bring your pages to the next level of epic impressiveness.

CSS Soundbite

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a webpage. To continue our example from the previous module, if HTML is the skeleton of a webpage, then CSS is its fat, its skin, and its pinstripe suit. Whereas HTML is strictly concerned with the markup of webpages, CSS is focused on the colors, the aesthetics, and the visual layout instead. It works by hooking onto specific elements of an HTML page and by formatting them using any number of options (called styles).

CSS

Great! I love visuals!

Yeah... not so fast Van Gogh.

To the surprise (and horror) of many new web developers, jumping into CSS isn't as straightforward as might be expected. As is a common theme in web development, the process for formatting visual styles on a website requires an explicit level of detail and a precise command of the language. Again, it's worth remembering that creating web applications isn't a drag and drop process. Colors, aesethetics, fonts, and visual layouts each need to be coded in order for every browser to consistently render the page correctly.

A Chocolatey Dilemma

To begin our exploration of CSS, we'll need to create a starting HTML file. You can use the one below as an example.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ode to Chocolate</title> </head> <body> <h1>An Ode to Chocolate</h1> <h2>A Chocolatey Reflection</h2> <p>I love chocolate soooooo much. If I could, I would eat chocolate every single day, every single hour, every single second. I am so obsessed about chocolate that I dream about it every single night. People tell me I have a problem, but I say, "How can chocolate be a problem? Chocolate IS the ANSWER."</p> <img src="http://stogiepress.com/blog/wp-content/uploads/2014/12/Chocolate-truffles.jpg" alt="chocolates"> <h2>Favorite Chocolates</h2> <ul> <li class="almond">Almond Joy</li> <li class="butterfinger">Butterfinger</li> <li class="ferrero">Ferrero Rocher</li> <li class="all">But I also love all kinds.</li> </ul> </body> </html>

 

If you copy this code into Sublime Text, save it as an HTML file, and then load it into a browser, you should see a webpage that looks something like the below.

ChocolateLover

Not bad. But sort of boring.

In fact, we might suspect that the author of this webpage would probably like a more chocolate-colored theme...

Enter CSS

And this is where CSS comes in! With a few extra lines of code, we can completely change the background color, the font sizes, and the font-colors of the website. Take a moment to add the below code to your HTML file. (It should fit right between the </body> and </html> tags of the previous example.)

<!-- .. Rest of Code.. --> <!-- </body> --> <!-- BEGIN CSS --> <style> body { background-color: brown; } h1 { color: white; text-decoration: underline; } h2, h3, p { color: yellow; } p, li { font-size: 24px; font-family: cursive; } .almond { color: white; } .butterfinger { color: orange; } .ferrero { color: gold; } .all { color: blue; } </style> <!-- END CSS --> <!-- </html> -->

 

Once we re-save our HTML file, the layout will look like the below.

ChocolateFix

Much chocolatey-er!

What's this Wizardry??

If you spend a few moments looking at the new code, you will notice that we used a consistent syntax like the below.

HTML-TAG { CSS-PROPERTY: VALUE }

 

In effect, we're referencing specific HTML elements and then applying changes to how they are formatted. The format options are each known properties, in CSS, with specific options for how they can be modified. Don't expect to memorize all of the formatting options available through CSS. For many of your early weeks and months as a developer, you will need to continually reference websites like W3 Schools, among others, to recollect the exact syntax.

Believe it or not, through just simple HTML and CSS alone, you will be able to build complex web layouts like the one below. (In fact, this is a screenshot of your first homework assignment in class.)

Portfolio

But What's With the Classes?

If you were paying close attention, you may have noticed that certain HTML elements in our last example also included a mysterious use of the word class. We used these throughout the list of favorite chocolates:

<ul> <li class="almond">Almond Joy</li> <li class="butterfinger">Butterfinger</li> <li class="ferrero">Ferrero Rocher</li> <li class="all">But I also love all kinds.</li> </ul>

 

Classes (along with IDs) offer us a method to style specific or multiple HTML elements using the same CSS. We'll talk a lot about classes and IDs during the program, but it's helpful to have some exposure in advance.

To get you started, this next assignment will give you some practice in styling HTML, using such CSS selectors like classes and like HTML tags.

Which is a great transition...

Your Turn!

It's time to get coding! This next assignment will have you styling very simple HTML, using CSS.

Assignment (Required):

Additional Reading:

Coding Boot Camp © 2016. All Rights Reserved.

results matching ""

    No results matching ""