WebGlowCademy HTML and CSS Reference Guide -
Lesson 1 & 2
This guide explains the structure and styling of an HTML document with embedded CSS. We'll walk
through the HTML elements, their attributes, and the CSS rules that style them. By the end, you'll
understand how to create a styled subscription box like the one shown in the example.
HTML Structure
HTML (HyperText Markup Language) is the standard markup language for creating web pages. The
structure here includes:
1. <!DOCTYPE html> - Declares the document type as HTML5.
2. <html lang='en'> - Root element with language set to English.
3. <head> - Contains metadata, title, and CSS styles.
4. <body> - Contains the visible page content.
5. <div> - A container holding the subscription box.
6. <h1> - The main heading.
7. <p> - Paragraph describing the offer.
8. <button> - Interactive button for subscribing.
CSS Styling
CSS (Cascading Style Sheets) is used to style HTML elements. The example uses both global and
specific selectors:
* { margin: 0; padding: 0; box-sizing: border-box; }
- Resets default browser margins and paddings and makes box sizing consistent.
button {
background-color: rgb(0, 153, 255);
color: white;
font-size: 20px;
border: none;
height: 42px;
width: 140px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
}
- Styles the subscribe button.
button:hover {
background-color: white;
color: black;
transition: 3s;
}
- Changes button style when hovered.
div {
background-color: black;
width: 420px;
height: 180px;
padding: 1px 5px 5px 10px;
margin-top: 35px;
margin-left: 30px;
border-radius: 15px;
box-shadow: 10px 10px 20px 10px rgb(101, 100, 100);
}
- Styles the container box.
h1 {
color: white;
margin: 5px 0 15px 0;
}
- Styles the heading.
p {
color: rgb(232, 225, 225);
font-size: 20px;
margin-bottom: 13px;
}
- Styles the paragraph text.
Full HTML & CSS Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my website title</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
button{
background-color: rgb(0, 153, 255);
color: white;
font-size: 20px;
border: none;
height: 42px;
width: 140px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
}
button:hover{
background-color: white;
color: black;
transition: 3s;
}
div{
background-color: black;
width: 420px;
height: 180px;
padding-top: 1px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
margin-top: 35px;
margin-left: 30px;
border-radius: 15px;
box-shadow: 10px 10px 20px 10px rgb(101, 100, 100);
}
h1{
color: white;
margin-bottom: 15px;
margin-top: 5px;
}
p{
color: rgb(232, 225, 225);
font-size: 20px;
margin-bottom: 13px;
}
</style>
</head>
<body>
<div>
<h1>Subscribe to Premium</h1>
<p>Subscribe to unlock new features and if eligible, receive a share of revenue</p>
<button>subscribe</button>
</div>
</body>
</html>