# EXPLAINING A WEB PAGE USING HTML AND CSS
I will be explaining the web page attached below using HTML and CSS codes. To understand this better, it is imperative to provide the basic background of HTML and CSS.
**HTML:** This is an acronym for HyperText Markup Language. This is the standard markup language for documents intended to be viewed in a web browser. Programming languages like JavaScript and technologies like Cascading Style Sheets (CSS) frequently help with it. Despite being able to run in a browser, HTML is not considered a programming language in the context of programming languages.
HTML elements are the building blocks of HTML pages because, they are specific instructions. Every element has three components which are the opening tags <>, the content, and the closing tags </>.
The basic structure of the html is illustrated below:
```
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Content</p>
</body>
</html>
```
**CSS:** CSS is an acronym for Cascading Style Sheets and is used to style elements written in a markup language such as HTML. In otherwords, When writing a web page in a markup language like HTML or XML, the presentation and styling can be specified using CSS, a language for style sheets. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts (W3C, 2010).
Multiple web pages can share formatting by specifying the relevant CSS in a separate.css file, which reduces complexity and repetition in the structural content; the.css file can be cached to improve the page load speed between the pages that share the file and its formatting; additional flexibility and control in the specification of presentation characteristics; and improved accessibility of the content due to the ease with which it can be written.
The CSS syntax structure is pretty simple. It has a selector and a declaration block. You select an element and then declare what you want to do with it. The declaration block has one or more declarations separated by semicolons, each of which has a CSS property name and a value separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are enclosed by curly braces. The selector points to the HTML elements you wish to style.The declaration block has one or more declarations separated by semicolons, each of which has a CSS property name and a value separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are enclosed by curly braces {}. The selector points to the HTML elements you wish to style. An example is, when you want to make a `<p>` element black and bold using CSS:
```
<style>
p {
color: black;
text-weight: bold;
}
<style>
```
The different styles of CSS are the Inline, External and Internal style. For the web page I will be explaining, I will be employing the Internal Style CSS.
The main HTML elements used for this web page according to my analysis includes the following:
**The head element** represented as: <head></head>.
The head element in HTML is a container for metadata, or data about a document. The head element is found between the <html> and the <body> element. It contains the meta tags, title and links.
**The body element** represented as:
` <body></body>`
In every html file, there can only be one <body>
element. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etcetera (w3schools, 2025).
**The paragraph element** is represented as: `<p>`. This represents a block of text.
**The style tag** represented as `<style>`. The `<style>` tag is used to define style information (CSS) for a document. Inside the `<style>` element you specify how HTML elements should render in a browser.
**The Div tag** represented as: `<div>`. This defines a division or a section in an HTML document. The `<div>` tag is used as a container for HTML elements - which is then styled with CSS. The `<div>` tag is easily styled by using the class or id attribute which is only used at the opening tag.
**The heading tag** which is represented by `<h1>`. The `<h1> `to `<h6>` tags are used to define HTML headings. `<h1>` defines the most important heading, while the `<h6>` defines the least important heading.For the purpose of the web page under review, the `<h1>`tag is referenced.
**The button element/tag** is represented as <button>. This defines a clickable button. Inside a <button> element you can put a text.
**The image tag** represented as `<img>`. Ths is used to embed an image in an HTML page. The `<img>` tag creates a holding space for the referenced image.
**The main element:** in HTML, this signifies the primary content area of a webpage, used to identify the central topic or functionality of a document, and is typically placed directly within the <body> tag; it should only appear once per page and contain unique content related to that specific page.
The HTML code for this webpage is presented below. Note that the internal CSS style was removed this project for the purpose of explanation and clarity. ***(The Internal style CSS is usually located at the head, just before the body element)***.
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<div class="container">
<div class="gold">
<img src="Sedan.svg" width="50" height="50" alt="sedan"img>
<div class="content">
<h1>SEDANS</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
</div>
<div class="button">
<button>Learn More</button>
</div>
</div>
<div class="sea-green">
<img src="suv.svg" width="50" height="50" alt="suv"img>
<div class="content">
<h1>SUVS</h1>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
</div>
<div class="button">
<button>Learn More</button>
</div>
</div>
<div class="forest-green">
<img src="Luxury.svg" width="50" height="50" alt="suv"img>
<div class="content">
<h1>Luxury</h1>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
</div>
<div class="content">
<button>Learn More</button>
</div>
</div>
</div>
</main>
</body>
</html>
```
Basically, all the aforementioned HTML elements were incorporated in one way or the other to build the web page under review.
*For the CSS*, it is worthy to note that when styling main tags, you are to just call the name of the element. The following syntax structure was used for the purpose of building the webpage under review:
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
background: #f3f2f3;
padding: 60px;
height: 500px;
}
.gold {
background: #e38527;
padding: 30px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.sea-green {
background: #006973;
padding: 30px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.forest-green {
background: #00413e;
padding: 30px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
button {
padding:10px 40px;
border-radius: 50px;
border: none;
}
p {
word-wrap: break-word;
width: 200px;
}
`</style>`
Basic CSS syntax is composed of a selector and a declaration block.
***Selector:*** Determines which HTML elements will be styled.
***Declaration Block***: Enclosed in curly braces {…} and contains one or more declarations.
We will explain just a few of the CSS used:
**Flexbox**: "is short for the Flexible Box Layout module. It is a layout method for arranging items in rows or columns. Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning" (w3schools.com).
**Color**: In CSS, a color can be specified by using a predefined color name for example, blue, red, black etc.
***Background:*** The background-color property specifies the background color of an element.
***Padding:*** Padding is used to create space around an element's content, inside of any defined borders.
***Word-Wrap:*** The word-wrap property allows long words to be able to be broken and wrap onto the next line.
***Margins:*** Margins are used to create space around elements, outside of any defined borders.
HTML on its own looks very plain and basic but adding some elements of styling to it using the CSS for example, makes it eye catching and easily understood. It is important to have the basic knowledge of both the HTML and the CSS. That is, the basic programming languages for web development are HTML and CSS, which are essential for anyone aspiring to work in this field. Gaining proficiency in these languages not only gives you the tools you need to work with more complicated languages, but it also opens up a wide range of web development career prospects.
**REFERENCES**
GeeksforGeeks.org
The World Wide Web Consortium (W3C) (2010)
W3Schools.com
Wikipedia.org
Google Drive
Gist
Clipboard
Sign in with Wallet
