HTML and CSS
Tags: html, css, webdev
Published: 2023-05-18 09:05:52

This paper on HTML and CSS aims to help the reader understand various concepts required for effective and efficient use of css

## Basic concepts in HTML

Let's go through all the major tags in HTML:

- `<html>`: Defines the root of an HTML document.

- `<title>`: Used to define the title of the HTML document, it is displayed on the title bar of the page.

- `<h1> to <h6>`: Define headings for the webpage, `<h1>` is the largest of them, `<h6>` is the smallest.

- `<br>`: Defines a line break in the webpage.

- `<p>`: Defines paragraphs in the webpage.

- `<link>`: Defines the relationship between a document and an external file (most used to link to style sheets).

- `<style>`: Defines CSS within the HTML file.

- `<script>`: Defines JavaScript code within the HTML file.

- `<a>`: The **Anchor tag** is used to define hyperlinks, linking one page to another. It has several attributes:

    - `download`: Specifies that the provided target will be downloaded upon being clicked.
    - `href`: Clicking will redirect you to the specified webpage.
    - `target`: Specifies where to open the link (target="__blank" will open the link in a new tab).

- `<ul>, <ol> and <li>`: These tags are used to define lists, `<ol>` is for ordered lists while `<ul>` defines unordered lists, `<li>` are individual elements in the the defined list.

- `<div>`: Defines a division or section in an HTML document. It is a versatile tag used to group and style other elements together. The user can give it properties via classes or ids.

- `<img>`: Used to define images in HTML webpage, The `src` attribute is used to link the image.

- `<label>`: Used to define name/label for input elements.

- `<span>`: defines a span of text within a document. It is typically used to apply styles or target specific sections of content for scripting purposes.


The HTML document describes the skeleton of our webpage, the design responsibility lies with CSS.

## The Box Model

***Every element on a page is a rectangle***

![Box Model Representation](https://media.gcflearnfree.org/content/5ef2084faaf0ac46dc9c10be_06_23_2020/box_model.png)

The image above is a representation of the box model, as you can see, the total size of the box is much more than what you'd expect.

Formula for total width of the box:-

    padding= (padding-left+padding-right)
    border= (border-left+border-right)
    margin=(margin-left+margin-right)

    total width=width+padding+border+margin

You can further intuit what the the formula for height would be.

- **Padding:** is to adjust the contents within a container.
- **Margin** is used to adjust the container with respect to its sibling elements.

## Inline vs Block Elements

### Block Elements:
- A block-level element always starts on a new line, and the browsers automatically add some margin before and after the element.
- Block elements always occupy the maximum available width by default.

### Inline Elements:
- Inline elements don't start in a newline.
- These elements only take up the necessary amount of width.

## Positioning: Relative/Absolute
- The `position` attribute has a lot of possible values, we'll just be talking about `relative` and `absolute`.

`relative`: positioned elements allow us to use `left`,`top`,`right` and `bottom` attributes, these attributes adjust the position of the element relative to it's normal position.

`absolute`: same as relative, but this time the object is positioned relative to its nearest relative or absolute ancestor.

## In the flow / Out of flow.

- It is important to understand the flow of elements within a container when you're adjusting them.

- Elements that are in the flow change their surrounds(sibling elements) when they are adjusted in position, and they're also affected when their surroundings change.

- Out of flow elements are unaffected by their surroundings as they are positioned relatively to their ancestor, they overlap other elements and can be individually placed anywhere. 

- Fixed and absolute positions take an element out of flow.

- `absolute` is very useful when you're dealing with overlapping elements.

## Common CSS pseudo classes

- In this section we'll be dealing with **pseudo selectors**

- Pseudo selectors are used to select child elements based on a pattern.

- `:first-child` selects the first child within an element.

- `:nth-child[n]`: used to select a sequence of child elements based on a pattern. for example:

        .class:nth-child[2n+1]

    The code above will select 3<sup>rd</sup>,5<sup>th</sup>,7<sup>th</sup>....(2n+1)<sup>th</sup> child elements from a class/element.

- `:last-child` selects the last child.

- `:nth-last-child[n]`: same as `nth-child` but selects the elements in reverse order.

- `:nth-of-type[n]` selects elements of the same type based on a given expression.

## Common CSS structures

CSS classes can be added to any element in an html, let's explore some common usages:

`<p>`, `<div>`, `<body>`, `<span>`, `<a>` etc.

You can select structres from specific classes:

        class-1 p{
            text-align:center;
        }
The code above only applies to all the `<p>` elements within `class-1`.

## CSS Specificity

If we have two or more rules that we're applying to the same element, then the webpage will use the **specifity value** of a rule to decide which one will be applied to the element.

- **Priority 1:** Inline styles, the rules declared inline will override all the previous styles that would've been applied using classes or ids.

        <h1 style="color:pink;"> Hi</h1>

- **Priority 2:** IDs, IDs are like classes but they're unique for every element whereas one class can be applied to several elements.

        #example-id{
            color:pink;
        }

- **Priority 3:** Classes, pseudo-classes and attribute selectors:

        .class-1{
            color:pink;
        }
        .class-1:hover{
            color:blue;
        }
        [target]{}

- **Priority 4:** Elements and pseudo elements:

        h1{
            color:grey;
        }

## CSS responsive queries

Responsive queries are used to adjust the design of a website according to a certain property (usually width and orientation).
We use the `@media` rule to manage these queries. Example:

         @media only screen and (max-width: 600px) {
        body {
            background-color: lightblue;
            }
        }

- The code above changes the the background color if the width dips below 601px.

## Flexbox

![FlexBox](https://dev-to-uploads.s3.amazonaws.com/i/hy2oqjvsbk60ef92nktg.png)

Flexbox is a useful way to structure your HTML code, It has useful attributes that allow you to place elements within the container with a lot of freedom.

Some commonly used flex-box properties:

- `flex-direction`: specifies the direction of the flow of elements, row displays elements row-wise, column; column-wise. The value of this attribute is row by default.

- `justify-content`: used to position elements horizontally(vertically is the flex-direction is column), center brings everything to center.space-around,space-between and space-evenly spread out the data with varying spaces between them.

- `align-items`: used to align the items within a container vertically(horizontally if the flex-direction is column).flex-start and end bring the elements to opposite sides of the container, while center brings everything to center.

- `flex-wrap`: wraps the container so elements are not stuck in a single line, instead they're spread out throughout the container.

- `order`: can change the order in which elements appear in the container, this property is `0` by default.

- `grow and shrink` increases or decreases the size of the flex-item based on the size of the flex-container.

## Grids

![Grid](https://www.freecodecamp.org/news/content/images/size/w2000/2022/05/CSS-GRID-3.png)

Grids have a lot of similar properties as flex, we'll just be talking about what sets grid apart.

Defining a container as a grid of multiple boxes:

        .class-1{
            display:grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns:1fr 1fr;
        }

- The code above splits container into three rows and two columns. we can use the repeat function to automate the process.

        .class-1{
            display:grid;
            grid-template-rows: repeat(100,1fr);
            grid-template-rows: repeat(100,1fr);
        }

- The code above splits it into 100 rows and columns.

Precisely placing grid items withing a grid container:

        grid-item-1{
            grid-column: 1/10;
            grid-row:1/5;
        }

- The item above will cover the first 10 column items and first 5 row items.

`row-gap` and `column-gap`: used to define a gap between grid items.

        .class-1{
            display:grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns:1fr 1fr;
            row-gap:20px;
        }

- Places a gap of `20px` between all containers.

## Common meta header tags

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

        <head>
        <meta charset="UTF-8">
        <meta name="description" content="Free Web tutorials">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="John Doe">
        <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
        </head> 

`charset` defines the character encoding of the document.

`Keywords` is used by search engines to display your webpages in results.

`viewport` is used to define the scale of the viewport width and height for the website.

## References:

- [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

- [CSS Layout - The position Property](https://www.w3schools.com/css/css_positioning.asp)

- [The Beginner's Guide to CSS Classes](https://blog.hubspot.com/website/what-is-css-class)

- [How to Use CSS Grid Layout](https://www.freecodecamp.org/news/how-to-use-css-grid-layout/)

- [CSS Flexbox Tutorial](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/)

- [CSS structural classes](https://www.web4college.com/css/web4-css-structural-classes.php)

- [HTML Block and Inline Elements](https://www.w3schools.com/html/html_blocks.asp)

- [Responsive Web Design - Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)