This is a beginner training on how to read and write the web languages HTML and CSS to structure and style a web page from scratch.
NOTE: If you're designing or developing an IU departmental website, we strongly encourage you to use IU's WCMS. Publish on the web at IU.
Learning Objectives
- Structure text and image content for the web using HTML5
- Learn semantic markup new to the HTML standard
- Style a web page using Cascading Style Sheets (CSS)
- Create hyperlinks to link to other pages
- Learn the box model for basic layout
- Make web pages accessible and well-formed
Prerequisite Skills
- Create a well-formed XML document
- Validate an XML document
For a more in-depth look at the content of HTML and CSS: The Basics, view the title contents below.
HTML5 and CSS: The Basics Contents
Expand the accordion folds to see a detailed description of the content.
Explore the contents of HTML5 and CSS: The Basics:
A basic introduction to markup, HTML, and CSS and the history, current model, and governing body of web development.
Learn about the file type and naming scheme for HTML documents and create an HTML document from scratch.
Learn the essentials of HTML5 syntax including the required HTML elements, proper element nesting, document types, and how HTML5 handles white space.
Add plain text to a page and add structure with paragraphs, headings, lists, hyperlinks, and empty elements. This section will introduce images, breaks, attributes, and block and inline elements.
Learn the basics of Cascading Style Sheets including the parts of a CSS rule, types of stylesheets, writing rules, selecting elements, and working with fonts. Learn about CSS overrides, inheritance, precedence, and adding color to a page.
Add additional structure to the page, including headers, footers, navigation, and other semantic markup to create a robust structure for the content on the page. This section also introduces how to identify individual sections of a page with IDs.
See the full content for Dividing a Page Into Logical Sections.
Want some extra practice with CSS? This section contains a task to help understand more about how CSS works.
See the full content for Challenge Exercise 1: Styling the exp Section Heading 2 Element.
Learn about classes and how they make designing more flexible and specific. This section introduces both the CSS and HTML syntax for working with classes.
Learn techniques for saving typing. Type less and create more readable code using shorthand. This section introduces multiple value syntax and borders.
Learn the different parts of the HTML box model, how to manipulate them, and how elements relate to each other. This section also introduces floating, background images, padding, and margin.
See the full content for Understanding CSS Positioning and Layout.
Need some extra practice with the box model? Try out this task!
See the full content for Challenge Exercise 2: Pushing the Nav Links to the Right.
Learn how and why to identify the primary language of a page by using the lang attribute.
Check work with this final code listing. See all the code for the Equinuture web page.
All UITS IT Training course content is available for reuse via Creative Commons licensing (CC BY-NC-SA).
Contact us to request IT Training resources in other accessible formats.