HTML and CSS

HTML (Hypertext Markup Language) is the skeleton of the web. It is a markup language (much like markdown) that defines what content appears on the page (text, links, tables, etc.). HTML works in your browser with CSS, which defines how it should look like (styling), and JavaScript, which defines what it should do (animations, interactions, and dynamic content manipulation). For this class, we’ll look only at static web pages, to keep it simple, so we won’t have interactive elements that come from JavaScript.

The page you are reading this on is full of HTML/CSS/JavaScript code. You can view this code. I use F12 on my Mac to see HTML code. Ctrl+U or Cmd+U may also work.

Resources: MDN HTML Docs, LinkedIn Learning, W3Schools Try-It Editor

W3Schools has an interactive HTML editor that you can use to practice writing code.  

To test code: 
– type the code you want to test in the left box
– click “Run”
– review the error(s) highlighted in red (if applicable)

CSS, or Cascading Style Sheets, lets you control how HTML elements look in the browser. HTML already has some default styles, based on the browser. But CSS lets you override the browser’s default display style. In other words, CSS allows us to write a set of rules which define exactly how to display things like colors, fonts, or borders.

CSS files are written using plain-text editors, just like HTML files. You can include external CSS files in your HTML and link your CSS file! Or you can have in-line CSS within the HTML document. For example, a rule might say: “Display all paragraphs in Arial, size 14px, color blue.”

CSS rules are standardized by the W3C. You can test your code using the CSS Validator. This textbook will discuss the most frequently used CSS rules. The content discussed in this textbook is a very small subset of what is possible in CSS.

HTML Learning Outcomes

  • Create and design basic web pages
  • Modify an HTML document to add or change common elements (e.g., links, tables, lists)
  • Use developer tools (e.g., “Inspect Element”) to view page structure
  • Write valid HTML with proper document structure: <!DOCTYPE>, <html>, <head>, <body>
  • Use CSS to style HTML elements with fonts, colors, spacing, and layout
  • Apply inline styles and link external stylesheets

Why Learn HTML/CSS?

When do I read HTML?

  • Looking at a GitHub Page or Moodle embed and wondering why something looks wrong
  • Inspecting a button or link in the browser to understand how it works
  • Writing a README in Markdown or formatting a portfolio site
  • Using web-based dashboards, data visualization tools, IoT interfaces, and control systems.
  • HTML and CSS teach declarative programming concepts (describing what you want, not how to do it), which is a mindset shift and can help you in future programming classes, even if you’re not using HTML or CSS directly.

We don’t expect you to memorize every tag (just a few minimums so that you can do labs and exams in this class), but you’ll certainly read a lot more HTML than you’re going to write in the future. Knowing what you’re seeing helps with debugging and communication.

HTML and Accessibility

Even if your HTML looks fine in your browser, that doesn’t mean it’s error-free. Problems can appear when you add new features or try a different browser. Worse, screen readers, which visually impaired users rely on, might not understand your page at all if the HTML isn’t written clearly.

Validate your HTML using the W3C HTML Validator. Also check out Mozilla’s accessibility guidelines.

Text Editors

HTML is a markup language written in plain text, meaning you need a plain-text editor to write it. Word processors, like MS Word, write a fancy format like .docx and zip files under the hood with metadata like fonts, padding, styles, and compatibility information. The go-to program to edit plain-text code like HTML is Visual Studio Code (note: not to be confused with Visual Studio!). It is free and compatible with all operating systems. Other free alternatives include:

CSS Learning Outcomes

  • Override default browser styles using CSS rules
  • Use common selectors: tag name, #id, and .class
  • Define color using hex codes or RGB values
  • Set spacing, borders, fonts, and layout using CSS
  • Link an external stylesheet to an HTML file
  • Use inline CSS in specific cases