Technical Documentation Page

Overview

HTML (Hyper Text Markup Language) structures web content, while CSS (Cascading Style Sheets) styles it. Together, they form the foundation of all modern web pages.

Getting Started

To begin,create a simple HTML file and style it with a CSS file.


                <DOCTYPE html>
                <html>
                <head>
                 <link rel="stylesheet" href="style.css">
                 </head>
                 <body>
                  <h1>Hello World</h1>
                 </body>
                </html>

HTML Syntax

HTML is composed of elements. Each element uses tags to define content.

eaxample code:

<p> A paragraph </p>
<a href="https://eaxample.com"> A link </a>

CSS Syntax

CSS consists of selectors and declarations.

eaxample code:

p {
 color: blue;
 font-size: 16px;
}

CSS Selectors

p - selects all <p> elements
.class - selects all elements with a class
#id - selects an element with an ID
div >p - selects direct children

CSS Box Model

All HTML elements are considered as boxes

Content: the actual text or image
Padding: space around content
Border: around the padding
Margin: space outside border

CSS Flexbox

Flexbox makes layout tasks easier:

eaxample code:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

Troubleshooting

CSS not applying? Check the link, tag and file paths.
HTML rendering oddly? Use the browser inspector to debug.
Responsive issues? Use media queries and test on different screens.

Resources