# Technical Writing: Web Design Using HTML and CSS
## Introduction
HTML is the bedrock or foundation on which web pages are built. It therefore implies that the structure of HTML is important to the relationship it will have with other languages such as CSS. While HTML is concerned about content in terms of structure, text and media, CSS is concerned with the design, look and feel of your web pages. It is therefore required that your HTML be built with the structure of your target web pages in mind.
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - Pre CSS Class Assignment</title>
<meta charset="UTF-8">
<meta name="author" content="Plang Gabriel Damwesh">
<meta name="description" content="The Pre-CSS Class Assignment">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<div class="gold">
<img src="images/sedans.svg" width="40" alt="Sedans">
<div class="content">
<h2>SEDANS</h2>
<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="btn-learn">
<button>Learn More</button>
</div>
</div>
<div class="sea-green">
<img src="images/suvs.svg" width="40" alt="SUVs">
<div class="content">
<h2>SUVS</h2>
<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="btn-learn">
<button>Learn More</button>
</div>
</div>
<div class="forest-green">
<img src="images/luxury.svg" width="40" alt="Luxury cars">
<div class="content">
<h2>LUXURY</h2>
<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="btn-learn">
<button>Learn More</button>
</div>
</div>
</div>
</main>
</body>
</html>
```
#### The HTML Code
## Explanation of the HTML
The HTML code was crafted using appropriate semantic and non-semantic tags to allow the externally linked CSS file apply its capabilities to achieve the targetted design. The following are the HTML tags used and why:
**Semantic elements**
A semantic element is easier to read and understand. It carries a specific meaning to be processed by browsers. The semantic element used in my HTML code is the `<main>` tag. It identifies the main content area of my web page as proper for placing the design I am to use HTML and CSS to achieve.
**Non-semantic elements**
Non-semantic element, on the other hand, doesn’t convey specific meaning to a browser as it is generically applicable on a web page. It includes those elements you can possibly find in any area of a web page. The non-semantic elements in my HTML code include: `<div class=”<class-name>”>`, `<img src=”<image path>” alt=”<image alternate name>” width=”<width value>”>`, `<button>`, `<h2>` and `<p>`.
```
*{
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}
.container {
display: flex;
background: #F2F2F2;
padding: 60px 60px;
height: 400px;
margin: 40px 100px 40px 100px;
}
.gold {
background-color: #E18724;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sea-green {
background-color: #016972;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px
}
.forest-green {
background-color: #01403F;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px
}
button {
padding: 10px 30px;
border-radius: 50px;
border: none;
}
p {
word-wrap: break-word;
width: 200px;
}
```
#### The CSS Code
## Explanation of the CSS
The CSS (short for Cascading Style Sheets) code is written in relation with the following HTML tags used: `<body>`, `<div>` (targetted using class attributes), `<button>` and `<p>` tags.
First of all, the web page’s default margin and padding were set to zero using the asterisk (i.e. `* { margin: 0; padding: 0 }` ) which has a global application on a web page being styled. The purpose is to ensure exactness in estimating values for the positioning of the required boxes in the final product.
Next, the `<body>` tag is being targetted as its display property is set to “flex” which essentially activates the flexbox layout model for the entire body (content area) of the web page. This causes a flexible arrangement of its (body’s) child elements within the container, distributing space evently and controlling their alignments with various flexbox properties. The entire properties specified for the `<body>` tag are: `body { block: flex; justify-content: center; align-items: center; height: 100dvh; }`. This makes the child elements to be centrally aligned and sets the dynamic viewport height (dvh) to 100 as depicted below.
A `<div>` with a “container” class attribute is also targetted with a similar display property setting to “flex”. This tag encloses the outlines of the main box being designed and specifies the following properties for the “container” class: `.container { display: flex; background: #F2F2F2; padding: 60px 60px; height: 400px; margin: 40px 100px 40px 100px; }`. This additionally defines a background colour as seen in the target design, a padding which is applied internally on the “container” class, a height to cover an area considered appropriate, and a margin which defines space outside the “container” class. See the target design below.
The colors being applied are made possible by targetting the three `<div>` classes - “gold”, “sea-green”, and “forest-green” with the following properties: `.gold { background-color: #E18724; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }` for the gold color box. The color value only is changed for the other two boxes to apply their respective colors (`sea-green` and `forest-green`). Other properties included are: `padding`, `display: flex`, `flex-direction: column`, and `justify-content: space-between`.
**`flex-direction: column;`** means that the elements within a container will be stacked vertically, one on top of the other, essentially creating a column layout; this is achieved by setting the "flex-direction" property to "column", which defines the main axis of the flex container as vertical, placing items from top to bottom.
**`justify-content: space-between;`** uses the available space on the line to position flex items. With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.
For the buttons, the following properties were applied: `button { padding: 10px 30px; border-radius: 50px; border: none; }`. This evently applies the padding as specified and as well specifies a border-radius which makes the buttons to be curvy as required. The buttons are also without border outlines hence the need to set the border to none.
Then finally, the `<p>` tag had the following properties: `p { word-wrap: break-word; width: 200px; }`. As mentioned, the word-wrap property specified allows long words to be able to be broken and wrapped onto the next line, while a width of 200px was specified to keep the paragraph text to conform with the target design as below seen.
## Conclusion
HTML and CSS are connected through the HTML elements and user-defined classes/id's aimed at empowering CSS, being a very powerful language for achieving any design goal as far as web pages are concerned. There is the need, therefore, for continuous practice to understand the various properties and options available with CSS.
Sign in with Wallet
Connect another wallet