HTML Document Style Guide

Introduction

The HTML <style> tag is used to add styles to your web pages. These styles can alter the look and feel of your website in various ways. In this lab, you will learn how to use the <style> tag to create a custom style sheet that can be used throughout your web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70845{{"`HTML Document Style`"}} html/head_elems -.-> lab-70845{{"`HTML Document Style`"}} html/text_head -.-> lab-70845{{"`HTML Document Style`"}} html/para_br -.-> lab-70845{{"`HTML Document Style`"}} end

Setting up the HTML Structure

First, let's set up the basic HTML structure. In your index.html file, create the following HTML code:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <h1>Welcome to my Webpage</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

This code sets up a basic web page structure with a header and a paragraph.

Adding Inline Styles

The first way to add styles to your web page is by adding them directly to the HTML element's style attribute. In this step, we will add an inline style to the h1 header. Add the following attributes to the h1 element:

<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>

This style will increase the font size and change the header color to blue.

Adding Embedded Styles

The <style> tag is used to add embedded styles to your web page. You can add multiple styles within this tag. In this step, we will use an embedded style to add styles to the p element. Within the <head> tag, add the following code:

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

This style adds a green color to the paragraph, and the font size is reduced to 18px.

Using CSS Classes

CSS classes are used to apply styles to multiple elements at once. In this step, we will create a class for a generic warning message that can be reused throughout our webpage. Add this code to the <style> tag:

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

This code creates a style for a warning message that includes a yellow background color, black border, and red text color.

Next, we will apply this class to the h1 header. Modify your h1 element to include the class:

<h1 class="warning">Welcome to my Webpage</h1>

This step adds a warning style to the header.

Adding External Style Sheets

External style sheets are used to separate the style sheet from the HTML content. In this step, you will create an external style sheet that can be reused across multiple web pages.

Create a new file named style.css. In style.css, add the following code:

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

This code sets up styles for the h1 and p elements, and changes the warning class to have a green background color.

To link this external style sheet to your index.html page, add the following code to the <head> tag:

<link rel="stylesheet" type="text/css" href="style.css" />

This line links the style.css file to the index.html page.

Adding Media Queries

Media queries are used to apply different styles to different device sizes. In this step, we will use media queries to adjust the font size of our elements. Add this code to the style.css file:

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

This code adjusts the h1 font size to 36px and the p font size to 18px for screen sizes less than or equal to 600px in width.

Adding Selectors and Nesting

In this step, we will introduce selectors and nesting, two advanced CSS concepts.

Create a new file named advanced.css. In advanced.css, add the following code:

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

This code selects the h1 element within the header element and applies a blue color and italic font style. It also selects the p element within the main element and applies a red color.

To link this external style sheet to your index.html page, add the following code to the <head> tag:

<link rel="stylesheet" type="text/css" href="advanced.css" />

This line links the advanced.css file to the index.html page.

Summary

In this lab, you learned how to use various methods to add styles to your web page. You started by using inline styles and embedded styles, then moved on to CSS classes and external style sheets. You also learned about media queries, selectors, and nesting. Using these methods, you can create a custom style sheet that can be used throughout your web page and create a modern and responsive website.

HTML Document Style