Code Smoothie

Clarifying a few things about HTML and CSS

This post is a follow-up to the beginning web development workshop I led for Code Club on 10/24/2016.

Roles of HTML and CSS

HTML gives content and structure to a web page. (It also provides meaning, or semantics, but that’s for a later time). It behaves pretty much like a document outline.

CSS (Cascading Style Sheets) adds styling to a web page.

HTML Syntax and Structure

The basic syntax for writing an element is:

<div class="logo biglogo etc">
  Content inside. 
  The outer element is called a parent. 

  <div>
    Other divs could be inside too. 
    These elements are called children.

    <div>
      This element is a grandchild of the outermost div. 
    </div>

  </div>
</div>

HTML is made of elements. An element consists of:

Note: The most simple element is the div element. It does nothing except act as a content divider. By inspecting the source of this webpage, you’ll see that the entire HTML document is wrapped in an html tag. You might want to try out the paragraph (p) and heading 1 (h1) elements on your own.

CSS

CSS selects HTML elements and then applies styling to it.

.myclassnameinhtml {
    font-size: 3em;

    /* General syntax: */
    property: value;
}

When you select classes, you prepend the class name with a dot (.). When you select all the elements of a particular type, like div, you do not use a dot.

The following example makes every div have a solid border:

This example demonstrates both element and class selectors.

Example CSS properties

HTML syntax and these 5 properties are demonstrated in this mockup of the Google homepage:

Closing

I recommend these resources to further your knowledge of HTML and CSS:

Please tell me if there’s anything unclear; this also benefits others who have the same question. Thanks for reading.