New To Front-End Web Development? Here Are The Basics of HTML and CSS

By

The Basics ImageWhen you’re crafting content for the web, how does the browser know to place a break between paragraphs? For that matter, how does it know to make a page’s background one color, and the navigation bar another color? HTML and CSS are the answer: Browsers read HTML, a markup language, to determine what shows up on the page, and where. CSS, or cascading style sheets, determines how content appears throughout a website. That is to say, HTML will tell the browser “this is a header” and CSS will say “all headers should be green.”

Related Story: 4 Reasons to Code Your Own Website, Even Though There’s Squarespace

HOW ARE PAGES BUILT USING HTML?

HTML stands for HyperText Markup Language. Unlike a programming language, which gives a command (e.g., when users click the like button, make a thumbs-up image appear), markup languages provide browsers with descriptions of what to put where, and how it should look. For instance, if a browser sees this HTML code:

  <b> Make this bold. </b>

the <b> and </ b> will inform the browser that you’re requesting the words to appear in bold, like so: Make this bold.

Tags, Elements, and Attributes:

HTML is built out of tags, elements, and attributes. The <b> and </b> from above are examples of tags. Each tag is written within angled brackets; browsers know to look within the brackets for instructions, and not to display the brackets and text within brackets. In general, tags come in pairs — an opening or start tag lets the browser know “hey, do this action for the following text” and the closing or end tag explains to the browser, “OK! Stop doing that action.” The slash (/) is used in the closing tag only. Taken together, an opening (e.g., <b>) tag and a closing (e.g., </b>) tag form an element. Note that it’s not so surprising that the <b> and </b> tags would govern bold text. One of the nice aspects of HTML is that it’s fairly easy to decipher that <p> </p> would be the tag governing paragraphs, and that <em> </em> would be the tag telling the browser to make text italicized, or emphasized. Not all tags come in pairs: the <br> tag, which indicates a line break, and the <img> tag, which describes an images, are two examples of elements that do not have closing tags. Elements with no closing tag are referred to as empty HTML elements. If tags taken together form an element, then the next step up is an attribute, which provide extra information about an element. Attributes appear only in the opening tag, and are enclosed in quotation marks. Here’s an example of all of this working together:

<p align = “left”> Browser, please left-align this paragraph. Thanks! </p>

Taken together, the two tags <p> and </p> are an element. Align = “left” is an attribute, telling the browser we want to left-align.

Files:

Each page on a site is a distinct HTML file and is saved as .html (instead of say, .txt or .doc). An entire website might have many, many HTML files, with names like homepage.html, feedback.html, contact.html, and so on.

WHY IS CSS NECESSARY?

Given that HTML exists, and can describe all sorts of things, including color, size, font, etc, why do we need CSS? Having a style sheet is a way to easily have consistency across the site. Instead of manually including code for every header that says to display it in a serif font, in 24 point, in light blue, and bold, CSS simplifies matters by allowing you to tell a browser, anytime you see the <h1>, or header tag, please make that text appear as a 24 point serif in bold, blue text. For an amazing and illuminating example of the impact of style sheets, check out this demo on the W3 site.

Where Does CSS Go?

CSS can be be placed in two different spots within an HTML file — when placed in the header, the CSS applies to the entire page, and when placed within a tag, the CSS dictates the style for just that tag. But even more common than these two methods is an external CSS file, which governs the look of the entire site. These external style sheets are saved as .css files (similar to how an HTML file is saved as .html). This is where the “C” in CSS becomes important. It stands for cascading, which means that theoretically, a website might have all three placements in play — as well as the browser’s default setting. For instance, you may have set in your external style sheet (which dictates the style for the entire website) that all headers are green. But as you’re coding a help page on the site, you put CSS in the header that says on this page, you want all headers to be blue, to distinguish it from the rest of the site. There’s one very important section of the page, though, and for emphasis, you want that header to be red. The browser will understand to choose the priority order here, with the most specific, close-to-the-code CSS style request taking precedence.

Selectors and Declarations:

Selectors in CSS are how you communicate to the browser the HTML element being styled. For instance, you can have a style for the headers (<h1>), the body (<body>), paragraphs (<p>) and so on. Declarations are where you say, here’s the style I want for that selected HTML element; each declaration consists of a property (think: color, size, text alignment, and any other formatting-type choice) and a value. The value is how you want the property to show up on the page. If the property was color, the value might be blue. Let’s see how that would look:

H1 {color: blue; font-size: 20; font-style: italic; }

Everything within the curly brackets is known as a declaration block. Each individual declaration — font-size: 20; is one declaration, for instance — ends in a semi-colon. CSS may look at first glance to be less lovely than HTML. But just consider having to write all that text for every header on a vast website — it would be a tedious and exhausting notion, particularly if you consider that you might someday redesign your website, changing all headers from blue to green. Nowadays, CSS is widely used, and it’s the rare website that doesn’t have an external style sheet in place. Want to get your hands in coding, and learn CSS and HTML? We’ve got a class for that!

Explore Front-End Web Development