HTML CSS concepts

Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

• Content: The content of the box, where text and images appear

• Padding: Clears an area around the content. The padding is transparent

• Border: A border that goes around the padding and content

• Margin: Clears an area outside the border.
  The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Inline versus Block Elements. Examples.

Block Level Elements

Block level elements take up as much space as possible by default.

Each block level element will start a new line on the page, stacking down the page.

In addition to stacking vertically, block level elements will also take up as much horizontal space as possible.

The p element is an example of a block level element. Each new paragraph tag will appear on its own line vertically.

Paragraphs with longer content will stretch all the way to the edge of the page.

Examples of block level elements:

• <p>
• <ol>, <ul>, <dl>
• All heading tags
• <article>, <section>, <div>

Inline Elements

Inline elements display in a line. They do not force the text after them to a new line.

An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

Examples of inline elements:

• <a>
• <strong>, <em>, <b>, <i>, <mark>
• <span>

Positioning: Relative/Absolute

position: relative

Position an element based on its current position without changing other elements position.

position: absolute

Position an element based on its closest positioned ancestor position.

Common CSS structural classes

Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements.

We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.

• :first-child It represents the element that is prior to its siblings in a tree structure.

• :nth-child(n) :nth-child(Expression) class applies CSS properties to those elements that appear at the position evaluated by the resultant of an expression. The expression evaluates to a value resulting in the position of the element in a tree structure.

• :last-child This pseudo class represents the element that is at the end of its siblings in a tree structure.

• :nth-last-child(n) :nth-last-child(Expression) is the same as :nth-child(Expression) but the positioning of elements start from the end.

• :only-child It represents the element that is a sole child of the parent element and there is no other sibling.

• :first-of-type There might be more than one type of siblings under a common parent. It selects the first element of the one type of sibling.

• :nth-of-type(n) There may be more than one elements of the same type under a common parent. :nth-of-type(Expression) represents those elements of the same type at the position evaluated by the Expression.

• :last-of-type This represents the last element in the list of same type of siblings.

• :nth-last-of-type(n) It is the same as :nth-of-type(n) but it starts counting of position from the end instead of start.

• :not This is a negation pseudo-class selector. This takes simple selector as an argument and selects elements that are not represented by the argument.

• :empty Selects empty elements.

• :root Selects root element. Root element refers the HTML element.

Common CSS styling classes

CSS styling classes are pre-defined styles that can be applied to HTML elements using the class attribute.

They allow you to apply consistent styling to multiple elements across your webpage, making it easier to maintain and update the styling of your website.

Here are some common CSS styling classes:

• .container: Defines a container element that wraps other elements on the page.

• .button: Defines a styled button element that can be used for call-to-action or navigation purposes.

• .card: Defines a card element with a border, background color, and padding that can be used to display content.

• .text-center: Centers text within an element.

CSS Specificity

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Specificity Hierarchy

There are four categories which define the specificity level of a selector:

• Inline styles
• IDs
• Classes, pseudo-classes, attribute selectors
• Elements and pseudo-elements

Inline style gets a specificity value of 1000, and is always given the highest priority!

There is one exception to this rule: if you use the !important rule, it will even override inline styles!

CSS Responsive Queries

Media queries are a popular technique for delivering a tailored style sheet to different devices.

To demonstrate a simple example, we can change the background color for different devices:

body {
  background-color: tan;
}

/* On screens that are 1440px or more,
set the background color to blue */
@media screen and (min-width: 1440px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 376px or more, 
set the background color to olive */
@media screen and (min-width: 376px) {
  body {
    background-color: olive;
  }
}

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

A grid layout consists of a parent element, with one or more child elements.

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

The vertical lines of grid items are called columns.

The lines between rows are called row lines.

The spaces between each column/row are called gaps.

• grid-template-columns Specifies the size of the columns, and how many columns in a grid layout

• grid-template-rows Specifies the size of the rows in a grid layout

• grid-column A shorthand property for the grid-column-start and the grid-column-end properties

• grid-row A shorthand property for the grid-row-start and the grid-row-end properties

• gap A shorthand property for the row-gap and the column-gap properties
  

 <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div> 

.grid-container {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
}

Common header meta tags

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

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

<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="description" content="HTML and CSS">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

References

• w3schools
• CSS-tricks