HTML is the body; CSS is the clothing!
The <tag>
is primary building block of HTML. Tags typically have two parts - an opening and a closing tag. In the case of a <div>
tag, it would look like this:
<div> some content here </div>
Notice the addition of a forward slash /
to close the tag, i.e. </div>
. It’s important to always mind your closing tags as HTML elements are nested within other elements. Most text editors will help you close your tags automatically with auto-complete.
Here are some other examples of HTML tags
:
<--! -->
- comments!<!DOCTYPE>
- declares the document type, arcane, necessary?<head>
- used for metadata about the page, SEO, including other files, style sheets, etc.<body>
- where the bulk of the page’s actual ‘content’ will go<footer>
- occasionally included but not necessary<div>
- a generic divider or unit in the layout<h1>, <h2>, ...<h6>
- text headings of various sizes<p>
- paragraph, has default properties pertaining to text<a>
- anchor, used for links/hyperlinks, i.e. google.com google.com<img>
- images, these include a src
attribute for file path <img src="laptop.jpg"/>
<video>
- these also include a src
attribute for file path <video src="laptop.mp4"/>
<audio>
- these include a src
attribute for file path <audio src="shout.mp3"/>
<input>
- a flexible element, could be a text input, button, or other…<button>
- the text/label for the button goes in between the opening and closing tags<span>
- a swiss army knife for working with text<li>
- lists, there are also unordered lists, tables, etc.<canvas>
- remember me from p5?? Here is a comprehensive alphabetical list of HTML tags from W3 Schools.
Attributes allow us to provide additional information about HTML elements. These include things like:
alt
, specifies alternate text descriptions for an image, crucial for accessibilitywidth
, images will use their default file size if not specifiedheight
, images will use their default file size if not specifiedsrc
, in the case of the <img>
taghref
, in the case of the <a>
tagstyle
, where we can access any CSS propertiesCertain attributes allow the user to target or designate the element for use in CSS, i.e. id="myElement"
. These include the following, but there are others:
class
id
name
Here is an example of an image with alt
text description, a specified width and height, that when clicked, sends you to a website and is tagged with a CSS class name.
<img alt="interior, closeup, a male-presenting caucasian person, smiling, with brown hair and clear glasses, wearing a blue t-shirt" class="profile-pic" src="myImage.jpg" width="300px" height="200px" />
CSS stands for Cascading Style Sheets. CSS is used to style and format the HTML elements, which includes changing the color, size, and spacing, but also how the elements animate into view, like fading in or out or sliding on or off of the screen.
CSS syntax is unique to itself. It looks a little like JSON with the brackets, so remember to mind the colons :
and semi-colons ;
.
selector {
property: value;
}
The CSS selector
is how we target an element in the HTML. We can designate all the types of a particular tag on the page or just a single element and many complex combinations in between.
For example, to make all of the paragraph elements on the page bold text, we could say:
p {
font-weight: bold;
}
Selectors can contain combinations of rules as well. For example, if you wanted to highlight the text inside any <p>
tag with the id
of “myCity” , you could do so like this:
p #myCity {
background-color: yellow;
}
This handy W3 CSS selector guide shows some of the additional complexity involved in combining selections.
Properties are all of the different types of things you can change, like colors, font characteristics, borders, padding, transform, rotation, etc. An exhaustive list is here
The more complex the styling of your page becomes, it is common to put all the CSS in an external stylesheet
document, which is typically called style.css
. This document can be be stored in the same folder as your index.html
, or it can be pulled in from elsewhere on the web. To include the external stylesheet
, use the <link>
tag with the path to your file in the <head>
like so:
<head>
<link rel="stylesheet" href="style.css">
</head>
Take a look at some of the student work from the Emma Rae Norton’s hand-coding-round-robin archive and see what kinds of things might be fun to try (like, for example, the <marquee>
tag, playing with the transform
or rotate
properties, or getting completely wacky with animation: rotate 1s alternate infinite;
😅…)
Each element on the page can be thought of as containing a series of boxes surrounding it. These boxes have default values, which can vary even based on which browser you are using. For this reason, you’ll often see programmers write html { margin: 0; }
at the top of their stylesheets to account for this.
If we start from the middle, with the content
, the size here is dependent on how large the content itself is, whether that is text - with its font settings, kerning, etc. - image, or video. After that, the padding
will move the element, and we have control over top, left, bottom, and right independently. The same goes for the border
property, which is usually set to 0 unless we turn it on. And finally, the margin
property will add some whitespace to the element.
Here is a Box Model Playground where you can change the box values to get a sense of how they interplay. It’s helpful to have a border
so you can see the difference between the margin
and padding
settings.