regular flow practice

The unknown part of CSS

https://madebymike.com.au/writing/the-invisible-parts-of-CSS/

If you use CSS in your day-to-day work, your main goal will probably revolve around making things "look right". How this is achieved is often far less important than the end result. This means that we care less about how CSS works than about correct syntax and visual results.

The visual consequences of CSS are often indirect consequences of manipulating hidden properties, which you may not realize. Certain CSS properties (like background-color) have a direct and obvious relationship to what you see. Meanwhile, other properties like display are still ambiguous for many of us, since the results seem to have a lot to do with context.

Rendering Process Overview

When an HTML document is loaded, a lot of things have to happen in order for the page to render.

The first step is to parse the HTML document. The browser creates a document tree from this step. A tree structure is a way to represent information that has a distinct hierarchy like HTML. Elements in a tree can be described as similar to a family tree, such as ancestors, fathers, children, and siblings.

You may have heard the term DOM. It stands for Document Object Model. This is an extension of the document tree structure and is used to store and manipulate information about the content of Web documents.

As the HTML is parsed, style sheets and other resources are also fetched. Style declarations are interpreted and determined through a process called cascading.

cascade

Cascading is probably one of the most misunderstood CSS features. It refers to the process of combining different style sheets and resolving conflicts between CSS selectors.

Cascade the importance, origin, specificity, and order of declarations to determine which style rule to use.

Most websites have multiple style sheets. Typically, styles are added with a link tag referencing a CSS file, or a style tag in the body of the HTML. Even the most basic pages will have default styles provided by the browser. This default style sheet is sometimes referred to as the user-agent style sheet.

box model

Understanding the box model is necessary to prevent frustration when laying out and positioning. The box model is one of the most fundamental concepts in CSS.

The box model is used to calculate the width and height of an element. It's just a step in the calculation process, and it's not entirely dependent on it to determine the final layout and positioning of elements.

Every element in HTML is a rectangular box. Each box has four areas defined by the element's margin, border, padding, and content area.

By default, when we set the width of an element, we just set the width of the content area. When you add padding, borders, or margins to an element, you add something other than width. In effect, this means that two elements with a width of 50% will not fill the width side-by-side (because they are over 100% width) if padding, margins, or borders are added.

That's it! Pretty simple, right? So why is this often a source of confusion? Well, you've probably run into situations where things seem to behave a little differently. . .

 

css code:

body{
    width: 100%;
    background-color: #4d4a40;
}
div
{
    line-height: 2;
    width: 90%;
    margin: 20px auto;
    background-color: #ffffff;
    padding-top: 30px;
}
article
{
    width: 90%;
    margin: 0 auto;
}
header
{
    text-align: center;
    padding-bottom: 30px;
    background-color: #267890;
    border: 5px solid #14414e;
    margin:0 -34px 30px;
}
header>h1
{
    font-size: 42px;
    color: #ffffff;
}
header>a:link
{
   color: #DBDBDB;
}
header>a:hover
{
   color: #ffffff;
}
h2
{
    font-size: 32px;
    border-top: 1px dashed #76746c;
    border-bottom: 1px dashed #76746c;
}