Blog Posts

An Introduction to HTML & CSS

13 May An Introduction to HTML & CSS

HTML & CSS are the two primary languages when it comes to the web. They are behind every site, and although there are more dynamic languages (such as PHP, the language behind WordPress), they all output HTML in some way or another. This will basically be a lesson on how to read, and do a little writing with each.

Note: to find and edit your HTML/CSS for your WordPress theme go to appearance > editor. You must have admin access to edit files. There is also PHP mixed in, so be careful when editing.

HTML
HTML is made up of elements (called tags). There are two main types: inline and block. Block elements will start a new line, where as inline elements will be displayed without a break. Each element can have attributes, which each have values (valid HTML5 must have a value for each attribute, whereas some earlier versions of XHTML/HTML didn’t always need a value). Each element must also close, either by itself, or with a closing tag.

A very basic page would look something like this:

<div class="container" id="wrapper">
<p>Here is some <span class="highlight">content for</span> the page</p>
</div>

So we open a div element (an unstyled block element) with a class attribute, and a value of container. As well as an ID attribute, with the value of wrapper. The value of the class and id attributes are purely made up by you. They can literally be whatever you want. As we’ll see later, they’re used in CSS to give the elements some style.

An element can have multiple classes, and classes can be reused. Thus, there could be numerous elements with a class of “container”, whereas IDs are specific to that element, and each element can only have one ID.

There are about two dozen total tags (maybe more?) and even more with HTML5, but for the most part you only really need to know a few of them to get started.

  • <div> is the most basic, unstyled, block level element. With HTML5, there are becoming significantly less <div> tags, as a lot of websites are made up of all <div>s and are often hard to read and edit.
  • <span> is the most basic, unstyled, inline element. It’s usually used for appearance (highlighting words, italicizing words, etc.) as opposed to the structure that the <div> is used for.
  • <p> is the paragraph element, and is used to wrap text. By default, WordPress wraps all your text in a <p> tag.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> are header level elements. The <h1>, by default, has the biggest font. And they get increasingly smaller. Also by default, header elements are bold and block.

CSS
Now that we have our structure in place, it’s time to style. CSS stands for cascading style sheet. Basically it lets us write style rules, in one document, that apply to the entire HTML. We can specify what elements we want to target with CSS selectors (usually from class or ID names). It would look something like this


.container p {font-size: 16px;}
p .highlight {color: yellow;}
#wrapper {width: 960px; margin: 0 auto;}

There are a million and one different things you can do with CSS, but decoded, the above basically says: the <p> within an element with a class of container should have size 16 font. And the element with a class of highlight within a <p> should be colored yellow. And the element with the ID of wrapper should have a width of 960 pixels and a margin of 0 on the top and bottom and auto on the left and right (effectively centering it).

Each block level element can have padding, margin and a border. From W3Schools, here is a great diagram depicting the differences:

Box Model from W3Schools

Inline elements, however don’t have these properties as they’re margin, padding and border are all effectively 0.

There are a lot of different CSS properties and values, so take a look at W3Schools to see all of them and test your skills. Next time we’ll take a look at some more in depth principles and get a better sense of what a “real-world” website is styled like, how to adapt and change styles to your WordPress site, and much more.

Tags:
, ,
No Comments

Leave a Reply