Ian Marshall

Getting Started with HTML and CSS

Lesson 4: Adding CSS

HTML and CSS work in tandem to display HTML's data content in a much more attractive way. Well, "attractive" is subjective. All art forms have its detractors and critics. But don't be misled: we're about to embark on what is not merely coding but indeed an art form.

Design is both a fine art and an applied commercial art, and taught as such in the world's art schools. It's a kind of "art with rules" in that it's usually not free-form, but has a particular goal or message. For example, corporate colors may need to be dominant, the message prominent, and the user experience "clean" and intuitive. All designers can tell you stories of their clients: those who were total nightmares and those who just "got it." There's absolutely no escape from the same range for us working in web design. Sometimes, being your own boss makes design a lot easier because there's more creative freedom. But then, some people thrive under specific, external constraints, and when given free reign are left staring at a blank screen.

All tough jobs can be learned. So let's start by exploring some of the tools at our disposal.

Exercise 4.01: Hot Pink

Instructions:

Using your code editor, create a new document called hotpink.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

hotpink.html


    

Observations:

  1. The <title> has been given content (line 6) which appears in the browser tab.
  2. We've inserted a new HTML element, <style>, into the <head> of our HTML template.
  3. The text within the <style> tags (lines 8–10) doesn't look like HTML.
  4. There's no content within the <body> element, so that's why there's nothing displayed in the browser but color.

Terms:

  1. CSS is a set of rules that apply style to HTML elements and the data they contain. We can write CSS rules directly into the HTML markup for the page we want to style.
  2. The <style> element must be in the HTML's <head> to validate.
  3. Text in the <style> must conform to an entirely new syntax, that of CSS.

Tinker:

  1. What other color names can you think of? Try using them to replace hotpink on line 9.
  2. Do a search for "CSS named colors." There are a lot!
  3. What happens if you add text to the <body>? Is that what you expected?

Exercise 4.02: Rainbow Text

Instructions:

Using your code editor, create a new document called rainbow_text.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

rainbow_text.html


    

Observations:

  1. Spacing in CSS seems flexible: it can be all on one line or on separate lines, apparently.
  2. There's a one-to-one correlation between the HTML tag name and the applied color in CSS.
  3. CSS rules seem to require strange punctuation: curly braces, colons, and semi-colons.

Terms:

  1. Just as with HTML, CSS spacing is nearly completely ignored by the browser. (I say "nearly" because there are conditions in which white space has meaning; we'll see this soon.) Instead, spacing is intended to make code more human readable, such as for lining up columns.
  2. In CSS, the HTML tag name is written first, followed by a pair of curly braces ({ and }).
  3. Within the curly braces are two bits of text. The first is the rule to affect (like color or background-color) followed by a colon. The second is the setting for that rule (like red or hotpink) followed by a semi-colon.

Tinker:

  1. Reverse the rainbow colors: start with violet for <h1> and end with red for <p>.
  2. Add body { background-color: hotpink; } (or a different color).

Just in case you forgot, we do have a checklist for our HTML document. Since we're adding CSS to our HTML, it makes sense to add to our checklist:

  1. Does the output show all the data you want to have shown?
  2. Does the output show anything that should not be shown?
  3. Does the output look like what you expected?
  4. Does every HTML element that needs a closing tag actually have one?
  5. Are HTML attributes useful and formatted correctly?
  6. Is the HTML code as readable as possible?
  7. Is the CSS code as readable as possible?

Remember, we're practicing precision along with exploring new syntax. If you're not getting the results you're expecting, you need to figure out why. Check your code against mine, character by character if you have to. Making mistakes is part of the pattern recognition process. (But giving up isn't!)

Exercise 4.03: Text Alignment

Instructions:

Using your code editor, create a new document called text_alignment.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

text_alignment.html


    

Observations:

  1. There can be more than one CSS rule in the curly braces.
  2. text-align shifts text, well, to a new alignment.
  3. The h1 isn't given a specific text-align value, so maybe by default text is aligned to the left.
  4. background-color seems to stretch from the left edge of the browser to the right, but the height varies depending on the size of the text.

Terms:

  1. The curly braces define a CSS rule set. A rule set can have as many rules as you like.
  2. The default text alignment is left. So if you don't change it at all, left-aligned text is what you'll get.
  3. Every CSS rule has a default value. That means text and images will still appear even without specific styling, just as they did in our previous lessons.
  4. All the h elements and the p element will, by default, stretch from side edge to opposite edge, but will have a variable height depending on font size and the number of lines of text.

Tinker:

  1. Change the alignment for each HTML element.
  2. Change the background color for each HTML element.

Exercise 4.04: What Is 5G?

Instructions:

Using your code editor, create a new document called what_is_5g.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

what_is_5g.html


    

Observations:

  1. Both the h1 and the h2 are centered.
  2. The h1 and the h2 are written in a different style of lettering than the blockquote.

Terms:

  1. The comma on line 8 means "and" when used before the rule set. All elements separated by commas will have the styling applied within the rule set.
  2. There isn't just one font family to choose from. (You can even forge your own!) We'll discuss using custom fonts in a later lesson.
  3. The h1 and the h2 are in a serif font. (Serifs are the little flourishes at the ends of letters with straight lines, and some of the curved ones; this sentence uses a serif font.) The blockquote, however doesn't have any serifs, so it's sans serif (just like this sentence).
MM
serifsans-serif

Tinker:

  1. Make the h1 and the h2 sans serif and the blockquote serif.
  2. Make just the h1 sans serif and nothing else, keeping both h1 and h2 centered.

Exercise 4.05: Sharks!

Instructions:

Using your code editor, create a new document called sharks.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

sharks.html


    

Observations:

  1. I can change the size of any text.
  2. There seem to be many different units of measurement available for text. The zero on line 12 has no unit, however.
  3. There are more font families than just serif or sans serif.
  4. It's possible to change both text color and background color.

Terms:

  1. CSS gives you complete control over both font size (the height of the tallest character) and line height (the distance between lines of text).
  2. There are many available absolute units to measure text:
    • measurements traditionally used for distance: centimeters (cm), millimeters (mm), inches (in)
    • measurements traditionally used for printed materials: points (pt) and picas (pc)
    • measurements traditionally used for screen resolution: pixels (px)
  3. If the value is zero, no unit name is required. Zero means zero in all units.
  4. There are five generic values for font-family: serif (default), sans-serif, monospace, cursive, and fantasy.
  5. CSS gives you complete control over text color and background color. We'll talk about colors and designing with colors in a more advanced course.

Notes:

  1. There are several more units of text measurement. We'll see another one below, and the rest in a later lesson.

Tinker:

  1. Try different sizes for font-size and line-height.
  2. Try different text colors on top of different background colors. What combinations work well?

Exercise 4.06: Tongue Twister

Instructions:

Using your code editor, create a new document called tongue_twister.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

tongue_twister.html


    

Observations:

  1. We set center text alignment on the body, not the p, yet the paragraph text was still centered.
  2. We know that <strong>, by default, displays text in bold. We are able to add other styling to it, including italics.
  3. We know that <em>, by default, displays text in italics. We are able to add other styling to it, including bold.
  4. We can underline text using CSS.

Terms:

  1. Some CSS styles inherit from elements they're nested within. text-align is one such CSS rule that is passed on to nested elements, like from body to p in this case.
  2. Many text styling options are available using CSS.
boldfont-weight: bold;
not boldfont-weight: normal;
italicfont-style: italic;
not italicfont-style: normal;
underlinetext-decoration: underline;
overlinetext-decoration: overline;
line throughtext-decoration: line-through;
no linetext-decoration: none;
uppercasetext-transform: uppercase;
LOWERCASEtext-transform: lowercase;
capitalizetext-transform: capitalize;
Small Capsfont-variant: small-caps;

Tinker:

  1. Find another tongue twister. Style it so that all difficult words are underlined and/or bold and/or italicized.

Exercise 4.07: Five Little Monkeys

Instructions:

Using your code editor, create a new document called five_little_monkeys.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

five_little_monkeys.html


    

Observations:

  1. CSS rules don't have to each be on its own line, apparently.
  2. There's yet another new text measurement unit.
  3. The em CSS undoes the default italicization.

Terms:

  1. The only real rule regarding typing out CSS is that it should be neat, organized, and human-readable. For many, that means putting each item in a CSS rule set on its own line. For some (including me), typing a rule set on one line keeps from having to vertically scroll through very long CSS lists. I will use both formatting styles throughout this guide. Ultimately, you decide what you like best.
  2. Measuring text in em units is very useful. It is a relative unit, meaning it's defined as a percentage of the inherited font size.
ElementCSS RuleActual Font SizeExample
body20pt20ptI am 20-point text!
em1.5em20pt × 1.5 = 30ptI am 30-point text!
q1.25em20pt × 1.25 = 25ptI am 25-point text!
  1. em comes originally from typesetting on a printing press. It is the width of the letter m in the font. It has no relation to the HTML <em> element.
  2. There are many available relative units to measure text:
    • measurements based on letter typesetting: em (from width of the letter m), ex (from height of letter x), ch (from width of number 0)
    • measurements based on inherited values: em (multiplier of inherited value), rem (relative to a root font size), % (percentage of inherited value)
    • measurements based on screen (viewport) size: vw (relative to the viewport width), vh (relative to the viewport height)
  3. On line 9 above we use font-style: normal; on an HTML <em> element. This is an override to its default styling, which is to italicize. An override replaces default values, or previously assigned values.

Note:

  1. We'll cover absolute and relative units more thoroughly in later lessons, as well as more advanced courses.

Tinker:

  1. Change the em styling in whatever way you like. Consider size, color, weight, and lines.

Exercise 4.08: Lithuania

Instructions:

Using your code editor, create a new document called lithuania.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

lithuania.html


    

Notes:

  1. This is not the semantically proper use of <h1>, <h2>, and <h3> elements, since we're not actually defining three levels of headlines. We'll learn more about HTML containers in a later lesson.

Observations:

  1. There is a collective styling applied to all of h1, h2, and h3 as well as unique styling to each.
  2. We're not specifying colors with names, but rather with some kind of code.

Terms:

  1. Many images and shapes, especially flags, have a specific aspect ratio, which means that both width and height must get bigger or smaller by the same percentage to prevent stretching in one direction or the other.
square globe image distorted globe image distorted globe image
perfect aspect ratiotoo widetoo tall
  1. We can use CSS to specify an exact width and height for many HTML elements.

To recreate the flag properly, we set each band of color to have a width of 100vw, or 100% of the viewport width. (With the body margin set to zero, we can go edge to edge.) The flag of Lithuania has an aspect ratio of 3:5, meaning its height is 3/5 of the width. So the height of the entire flag must be 60% of its width, or 60vw. Each band is 1/3 of the total height. So each band is set at 20vw. This preserves the proper aspect ratio.

  1. We can use vw or vh units for font size, too.
  2. There are many ways to specify color value:
This pale, yellowish color can be created by any of the following:
Color ValueValue TypeCSS Usage
#FAFAD2Hexadecimalcolor: #FAFAD2;
rgb(250, 250, 210)Red-Green-Bluecolor: rgb(250, 250, 210);
hsv(60, 16%, 98%)Hue-Saturation-Valuecolor: hsv(60, 16%, 98%);
hsl(60, 80%, 90%)Hue-Saturation-Lightnesscolor: hsl(60, 80%, 90%);
lightgoldenrodyellowNamecolor: lightgoldenrodyellow;

Tinker:

  1. Recreate the flag of Gabon (aspect ratio 3:4). Do an Internet search for "flag of Gabon colors" to get the exact color values.
  2. Recreate the flag of Columbia (aspect ratio 2:3). The top band's height is half the flag height; the other two split the remaining half of the flag height.

Bookmark:

  1. schemecolor.com is an excellent resource for finding exact color values, as well as exploring compatible color combinations.

Exercise 4.9: Trajan's Column

Instructions:

Using your code editor, create a new document called trajans_column.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

trajans_column.html


    

Observations:

  1. We only specify the height of the image, not the width. The aspect ratio for the image still looks good, however.
  2. The text seems to wrap around the right side of the image and underneath it.
  3. The a underline can itself be styled.

Terms:

  1. An image is brought into the HTML document by referencing it with the src attribute. It already has a width and height, and thus also an aspect ratio. By setting only one dimension (width or height, but not both), the image will resize proportionally, maintaining perfect aspect ratio.
  2. Giving the image the CSS float rule (which accepts values of left, right, or the default none) allows text to flow around it.
  3. Giving the image the CSS margin-right rule pushes the text away from the right edge of the image. We'll see this in action with the next exercise.
  4. Some CSS rules, like text-decoration, are shorthand CSS for a sequence of other CSS rules. There are actually three CSS rules that affect a line for text:
CSS RuleValues
text-decoration-line
  • none
  • underline
  • overline
  • line-through
  • underline overline
  • underline line-through
  • overline line-through
  • underline overline line-through
text-decoration-style
  • solid
  • double
  • dotted
  • dashed
  • wavy
text-decoration-colorany color value
Example Shorthand CSS RuleResult
text-decoration: underline double blue;The shortest distance between two points.
text-decoration: line-through wavy red;The shortest distance between two points.
text-decoration: underline overline dashed grey;The shortest distance between two points.

Tinker:

  1. Change the margin-right to 0. What happens with different values?
  2. Change the text-decoration.
  3. Play with other CSS styling. What looks good to you?

Exercise 4.10: Employee of the Month

Instructions:

Using your code editor, create a new document called employee_of_the_month.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

employee_of_the_month.html


    

Observations:

  1. Elements can have borders, which can be styled.
  2. Some precision is needed to position different text elements in relation to each other.

Terms:

  1. The CSS border rule is a shortcut for many rules affecting an element's border. We'll explore border styling much more in later lessons.
  2. border, margin, and padding are part of the CSS box model. We'll explore these rules much more in later lessons.

Tinker:

  1. Play with the values for border, margin, and padding.
  2. Create your own dedication plaque.

No doubt there are many questions left unanswered, not least among them is probably "Just how far can you go when styling HTML elements?" Good question! Well, luckily we've given ourselves the time we need to explore these depths. But here's an example of where we're going:

This button is entirely styled with CSS, including the 3D effect and animation. However, CSS doesn't handle what happens when you click it. (That's JavaScript, which we'll cover in other courses.) So how far can we go with CSS styling? Very, very far. As I said before, website design is an art form. In fact, there are award sites for web design excellence, like The Webby Awards, the Awwwards, and CSS Winner.

Review

There's a lot to learn about CSS. Like with HTML, for now the exposure alone will help to demystify later attempts at clarifying all the strange syntax, rules, values, and units.

We also practiced typing code; that experience is not to be minimized.

We also added another line to our checklist:

  1. Does the output show all the data you want to have shown?
  2. Does the output show anything that should not be shown?
  3. Does the output look like what you expected?
  4. Does every HTML element that needs a closing tag actually have one?
  5. Are HTML attributes useful and formatted correctly?
  6. Is the HTML code as readable as possible?
  7. Is the CSS code as readable as possible?