Coding with Style: Basics of HTML and CSS

computer__cat_by_Flore_stock

Have you ever told your kids (or were told as a kid), “I am not making different food for everyone. I spent a long time cooking, so this is what’s for dinner and we’re all eating it”? If so, congratulations! You understand the basics of programming logic.

No one likes to do the same thing over, and over, and over. A great deal of innovation in manufacturing began because someone like Eli Whitney said “screw this, if the same motion has to be made over and over again, why can’t I build a contraption to do the motion for me?” Computers are much the same way, and constantly being optimized–that is, they can do the same thing over and over but faster this go-around.

Why HTML is not a programming language

The cotton gin didn’t do much if there wasn’t someone loading cotton into it, and manufacturing today doesn’t get far if the materials aren’t loaded correctly. Websites are the same way–you can write all the fancy executable code and styles you want, but until you’ve aligned your materials correctly, no computer knows what to do.

Unless you’ve edited someone’s writing for print or worked in a newspaper, the role of markup may be hard to understand. I use analog markup–elements in my writing that are distinguishable from content–every day for keeping my notes and tasks organized.

As in the Bullet Journal system, HyperText Markup Language (HTML) helps the browser sort through and interpret content on the page. HTML is not considered an actual programming language because it doesn’t do anything. While HTML is always growing to encompass new elements being introduced to the web, it is still only a framework ensuring materials (page content) are aligned correctly before they go into the machine (browser).

Learning HTML is a great–and very necessary–first step to building websites and many apps.

Coding with STYLE

formattingWhether you write in Microsoft Office, Open Office, Google Drive, or on WordPress like I am now, you always find a dropdown in the upper left that generally starts with “paragraph.” Everyone knows how this works, yes? Select some text in your writing, click the dropdown, and choose the style for your selected text.

What you’ve done is assign markup tags to your text. The program you’re writing in then applies whatever size, color, font, etc. it’s been told should affect this text. Text marked as Heading 1 becomes huge, and if you were to look at your writing in the background source code, that text is marked up with “h1” flanking its sides.

<h1>My Heading</h1>

Every HTML element has these properties (size, color, etc.) that can be controlled. Text elements like paragraphs and headers are generally taught first because the properties are simplest to visualize, but every HTML element has its own limited list of properties that can be applied in the same way.

The Anatomy of CSS

CSS is still not a programming language by itself, despite its increasing complexity. For that reason, some people still look down on web developers who work often with CSS. CSS is a formatting language that gives both style and substance to HTML’d content.

As I said, text is easiest to visualize–like this section’s header. If you inspect the element in your browser (which I recommend you get in the habit of doing when you see website elements where you like the style and effect), you first see the markup tags and text itself:

<h1>The Anatomy of CSS</h1>

In an adjacent panel, you find all the styles being applied to the text in the h1 markup tags. CSS is fairly simple for humans to read and is composed of rules like this one:

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 30px;
 font-weight: normal;
 font-style: normal;
 line-height: 1.35;
 letter-spacing: 0px;
 text-transform: none;
 margin-bottom: 35px;
}

The first element in this rule is our selector: h1. The selector can be very general, like here, or can point to a very specific element. HTML lets you assign an ID to an element, much like giving it a name. You want to be as general as possible with selectors so one CSS rule with take care of a lot of styles (like all the headers on this page), but giving a CSS example is the perfect time to select and element by ID so my h1 changes don’t affect the whole page. I’ll call this example header “Fred.”

<h1 id="Fred">The Anatomy of CSS: Meet Fred</h1>

Fred will inherit all the styles in my website’s rule for h1, but I’d like to change his specific color and font style. To use Fred’s ID as the selector, I start with a pound sign:

#Fred {
}

This is where all that analog practice filling in applications and medical histories comes in. Every CSS rule is filled with declarations that say “My property name is ____ : its value is ___;” to make style changes. Just like writing a long list, the colons and semicolons are important for interpreting this declaration in shorthand. I want to make Fred a bright green, so “my property name is color: its value is green;” will be my declaration. In the shortest form possible to understand–which is what CSS requires–my declaration becomes:

#Fred {
     color:green;
}

I also want to change his font style to italics because Fred tends to lean to the right. The font-style property name is already used in the CSS rule for h1 elements, but that’s OK. The browser knows to get more specific and override for Fred as long as his special CSS rule loads after the main rule.

As a side note, I do this almost every day and still had to Google “css font-syle values” to check if I needed to use “italics” or “italic”. Every property has a limited set of values and knowing when and how to look them up is important. It’s usually more critical when you need to check your available options, but correct spelling’s up there as well.

#Fred {
     color:green;
     font-style: italic;
}

 

The Anatomy of CSS: Meet Fred

 

The Web Dev Trifecta

HTML/CSS are the faceplates and building blocks for all the moving pieces that make up a website. The actual execution of commands in a web browser begins when you enter the world of JavaScript. JS is a scripting language which has the power to lift, toss, fill, empty, and otherwise give these elements function rather than just form. It can change CSS rules on the fly and create elements on the page as you need.

If it helps, think of web development as a dungeon crawling party. HTML is your warrior, leading the party with some heavy swinging and slow reaction time. CSS is your rogue, slipping around the warrior and deftly arranging things to benefit the party. JavaScript is your wizard, making things appear and disappear with a bit of flash*.

For more information and some practice with all three of these languages, I recommend running through the courses at KhanAcademy. They’re easy to understand and filled with tons of great help.

If you’re interested in learning to program but want to see your options before you delve into HTML/CSS/JS, try this handy infographic on most of the major languages used today (click to see full version):

whatcode

 

 

*not THAT Flash. That’s ActionScript.

 

Cover image by Flore Stock.

You Might Also Like