CS: HTML and CSS Basics
Build simple web pages with structure and style
CS: HTML and CSS Basics
Build simple web pages with structure and style
CS - Grade 6-8
- 1
Explain the difference between HTML and CSS in a web page.
Think of HTML as the parts of a page and CSS as the design of those parts.
HTML gives the web page its structure and content, such as headings, paragraphs, images, and links. CSS controls how the page looks, such as colors, fonts, spacing, and layout. - 2
Write the HTML for a level 1 heading that says My Favorite Website.
The correct HTML is <h1>My Favorite Website</h1>. The h1 tags show that the text is the most important heading on the page. - 3
Write the HTML for a paragraph that says I am learning to build web pages.
The correct HTML is <p>I am learning to build web pages.</p>. The p tags show that the text is a paragraph. - 4
Look at this HTML: <a href="https://www.example.com">Visit Example</a>. Explain what the href attribute does.
Attributes give extra information about an HTML element.
The href attribute tells the browser the web address that the link should open. In this example, clicking the link goes to https://www.example.com. - 5
Write the HTML for an image with the file name cat.png and the alt text A gray cat sitting.
An image tag uses src for the file and alt for the description.
The correct HTML is <img src="cat.png" alt="A gray cat sitting">. The src attribute gives the image file, and the alt attribute describes the image for accessibility. - 6
Write a CSS rule that makes all paragraph text blue.
The correct CSS rule is p { color: blue; }. The selector p chooses all paragraph elements, and the color property changes their text color. - 7
In the CSS rule h2 { font-size: 24px; }, identify the selector, property, and value.
In CSS, the selector comes before the braces, and the property and value are inside the braces.
The selector is h2. The property is font-size. The value is 24px. - 8
Write a CSS rule that gives the body of a page a light gray background color.
The correct CSS rule is body { background-color: lightgray; }. The selector body applies the style to the whole page body. - 9
A page has this HTML: <p class="warning">Save your work often.</p>. Write a CSS rule that makes only elements with the warning class red.
Class selectors in CSS begin with a dot.
The correct CSS rule is .warning { color: red; }. The dot before warning shows that the selector is a class selector. - 10
Fix the HTML error in this line: <h1>Welcome to My Page<h1>
The fixed HTML is <h1>Welcome to My Page</h1>. The closing heading tag needs a slash before h1. - 11
Explain why alt text is important for images on a web page.
Accessibility means making content usable for more people.
Alt text is important because it describes an image for people using screen readers and for times when an image cannot load. It makes the page more accessible and easier to understand. - 12
Write a short HTML page structure that includes html, head, title, and body tags. The title should be My Page and the body should include one paragraph that says Hello, web.
The title belongs inside the head, and visible page content belongs inside the body.
A correct structure is <html><head><title>My Page</title></head><body><p>Hello, web.</p></body></html>. This includes the main HTML document sections and one paragraph in the body.