EDU 635 Tutorial: Basics of Web Design Using HTML & CSS

The Language of the Internet

Just as we communicate using a specific set of language rules, computers (and the internet) use their own set of rules to display and run everything that we do on a daily basis. You're probably familiar with this concept as being "coding" and that there are many different languages you can code with.

The language of the internet has 3 parts that work in tandem: HTML, CSS, and Javascript.

Some Definitions
HTML = "Hypertext Markup Language"
CSS = "Cascading Stylesheet"

Essentially, HTML is the content, CSS is the appearance, and Javascript is the behavior.

Everything becomes encapsulated in the HTML of a web page through linking together the elements for the browser to read.

In this course, we're not going to dive into Javascript, as that's beyond our scope (though we do suggest you do that on your own time if you're interested). We will, however, give you some tools to navigate creating content using HTML and CSS.

Note: A lot of people get nervous with any talk of coding. To understand the basics of HTML and CSS the only thing you really need to know is the structure. Most other things can either be learned later on or looked up online.

HTML: The Content

Everything you see on a webpage is defined in HTML.

Here's an image of what a simple page might look like:

Notice that everything is surrounded by what we can call tags or elements.

<div></div> - denotes a container
<p></p> - denotes a paragraph
<h1></h1> - denotes a heading
<img> - denotes an image
<iframe></iframe> - denotes a frame (can be video or interactive)
<ul><li></li></ul> - denotes a bulleted list

Those tags surround the text in elements to tell the computer how to format something. For deeper information and all possible options, we recommend the w3schools documentation.

Note: While most of the tags above are self-explanatory, the "div" element is what we can call a container element – this means that it doesn't have any attributes of its own without further defining, but instead allows for separation of elements on a page.

Below, you'll find a side-to-side illustration of what those elements might look like in an HTML page. If you click on the "Edit on Codepen", you can play with their contents and order.

Tagging elements

All HTML pages use this structure to denote their content. From there, we find ways to tag specific elements so the computer can recognize them and call on them if needed. This is done using tags.

There are a number of tags that can be used, but the two most useful are "id" and "class". In either case, the tag is included within the brackets of the element they refer to.

For example, take the below HTML snippet:

<div id="placeHolder" class="textContent">
    <p>Content content content lorem ipsum etc. </p>
</div>

That div element has an id of placeHolder and a class of textContent. Since it surrounds the paragraph element (the entirity of the p element is within the opening and closing bracket of the div element – good editors will indent this, but not all will), any reference to those tags will also apply to the paragraph element. The importance of this in HTML will become clear in the next section on CSS.

Note: Even if they might seem similar, it is important to know that id and class elements should be used in different instances. An id should only refer to one element on a HTML page, while a class refers to a group of items that should be treated the same.

How to get started

From earlier in this course, you already created an HTML document through Twine. Using HTML, you can start adding things like images, videos, paragraph breaks, and more structured formatting. You'll be asked to play around with your story this week to add some elements and work on formatting.

However, Twine can be a little bit unwieldy to see the direct effect of changes. You can use Codepen as an anonymous user to test some things out in a more visual manner first and then copy and paste the HTML into your Twine once you're satisfied.

CSS: The Aesthetics

I'm sure you've noticed that just using HTML doesn't give you a very satisfying web design experience. This is where CSS comes into play.

CSS uses a simple and easy to understand structure, but differs in that it relies on the tags within the HTML as "selectors". Using things like element type, id, or class, a CSS sheet tells the computer which elements to target and what stylistic properties to add to it.

Take the same HTML snippet from above:

<div id="placeHolder" class="textContent">
    <p>Content content content lorem ipsum etc. </p>
</div>

In CSS, there are ways to

1. Select the individual div element by calling the id "placeHolder" (#placeHolder)
2. Select this content and others that you've grouped into the common class "textContent" (.textContent)
3. Select all elements of one type (i.e. div, p, div > p, div.textContent, div p, and many more!)

Here's a list of all the different selectors you can select for.

The selections that you make will depend on the effect you want to have.

What does CSS look like?

As with HTML, CSS has a fairly basic structure at it's core. Here's what a simple version would look like using the same HTML elements from above.

#placeHolder {
    background-color: blue;
    display: flex;
    padding: 20px;
    margin: 10px;
}
.textContent {
    color: orange;
    font-family: "Calibri", "Arial", sans-serif;
    font-size: medium;
}
div > p {
    justify-content: center;
    text-align: center;
    margin: auto;
}

Combining this with the HTML looks like this (feel free to click Edit on Codepen to play with the settings):

Quick note on symbols
'#' is the CSS tag for id
'.' is the CSS tag for class
'div > p' means "any p element contained within a div element"


There are a number of different ways to call up elements using these selectors depending on your intended effect.

Let's break down that structure a bit more by looking at the first selector and its properties:

#placeHolder {
    background-color: blue;
    display: flex;
    padding: 20px;
    margin: 10px;
}

This tells the computer to look for something with the id "placeHolder" and then make its background color "blue", make it grow or shrink depending on frame size (display: flex), and then add padding and a margin around the elements to separate them from each other and the sides of the page.

The individual properties don't matter and can seem intimidating – what does matter is the structure. For the CSS to work it has to have the same overall structure (selector, curly brackets, property tag followed by a colon, style specifics, semi-colon).

Tip: If you're unsure about remembering the structure, just copy and paste the section from above and then edit it to match your needs.

On some webpages, you might see those elements just contained in-line in an HTML element. In general, this isn't really recommended, as it makes finding specific style issues and making changes that much more difficult.

That would look something like this:

<div style="background-color: blue; display: flex; padding: 10px;" width="50px" height="auto">
    <p font-family="Calibri" font-size="12px">Content content content lorem ipsum etc. </p>
</div>

You can separate out the elements, but regardless, it's a lot less elegant and much more frustrating to go into something and see this.

This is why it's much easier to define tags and then properties based on those tags or selectors.

Where to find CSS Properties

The CSS property is what tells the compter which section of the content you're choosing to design. Some examples are things like "background-image", "font-family", and "display". They're the elements that go before the colon in the CSS sections.

As with all types of programming, this is where things like spelling and capitalization really matter. Everything must perfectly match.

I can't tell you how many bugs I've caught due so a missing hyphen or switching up a capitalization. With CSS, the list of specific properties is long and you are not in any way expected to memorize them, though I would recommend remembering a few like background-image, background-color, color(which affects the font color), display, font-family.

For everything else, there's W3Schools Reference Lists. I recommend Bookmarking this as a reference, but you can also just search in google and it'll give you a good result.

Make sure to practice!

Similar to HTML, the easiest way to get more of an understanding on using CSS is to play with it. Once again, we recommend playing around anonymously on Codepen so you can see the effects simultaneously.

You'll end up editing your Twine story stylesheet to give it unique attributes. Twine, however, uses specific selectors. Copy and paste from below depending on what you want to do.

If you want to edit the whole story

tw-story {
    property: style;
}

If you want to edit the passages of a story

tw-passage {
    property: style;
}

If you want to edit a passage with a specific tag

tw-story[tags="tagName"] {
    property: style;
}

Note
You can still do all of the HTML and CSS from above within the main Twine passages and the story stylesheet. For example, you can give any images you add an image class and then edit that from the stylesheet.

Learn more

There are so many tutorials much, much better than this one at learning HTML CSS. I personally recommend either free code camp or the previously mentioned w3Schools.