NK1FC

Posted on Mar 2, 2023

HTML-CSS Concepts

#html #css #beginners #webdev

BOX MODEL

The CSS box model refers to a rectangular box that is created around the html element.
It consists of four parts: content, padding, border, and margin.
- Content: It represent content inside the element.
- Padding: it represent the space between the content and the border.
- Border: Line that surrounds the padding.
- Margin: The space between the border and adjacent HTML elements.
To change the padding arround the content use padding-left, padding-right, padding-top, and padding-bottom.
To change the border around the padding use border-left, border-right, border-top, and border-bottom.
Similarly, to change the margin use margin-left, margin-right, margin-top, and margin-bottom.

INLINE VS BLOCK ELEMENTS

1. BLOCK ELEMENTS

Block elements take up the entire width of their container.
They create a line break after the element.
Some of the examples of block elements are <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <table>, <form>, and <footer>.
It is used to create structure of webpage.

2. INLINE ELEMENTS

Inline elements take up only neccessay width.
They can't create a line break after the element.
Some of the examples of inline elements are <span>, <a>, <strong>, <em>, <img>, and <input>.

CSS POSITIONING

1. Relative POSITIONING

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

2. ABSOLUTE POSITIONING

This element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor

COMMON CSS STRUCTURAL CLASSES

.row: This class is used to create a row of columns in a grid-based layout.
.col: This class is used to create columns in a grid-based layout.
.container: This class is used to create a container for the web page content, often used to center and set a maximum width for the content area.
.wrapper: This class is used to wrap the main content of the web page. It's often used to create a container for the content that's separate from the header and footer.
.rightmenu: This class is used to style a right sidebar section on webpage.
.main-content: This class is used to style the main content section of a web page.
.leftmenu : This class is used to style a left sidebar section on webpage.

COMMON CSS STYLING CLASSES

.container: This class is used to create a container that holds the content of a web page or sometimes container which will hold other elements.
.header: This class is used to style the header section of a web page, which typically contains the site logo, navigation menu, and other important information.
.nav: This class is used to style navigation menus on a web page, such as a top or side menu.
.btn: This class is used to style buttons on a web page. It's often used to add a background color, border, and padding to create a clickable button.
.card: This class is used to create a card-style layout for content, such as a blog post or product listing. It often includes a background color, border, and padding to create a contained section for the content.
.footer: This class is used to style the footer section of a web page, which typically contains copyright information, social media links.

CSS SPECIFICITY

CSS specificity is a method to determine which style to apply if there is any conflict.
Types of selectors in CSS with their specificity value:
- Type selectors and pseudo-elements - they have the lowest specificity value (0,0,0,1)
- Class selectors, attributes selectors and pseudo-classes - they have a medium specificity value (0,0,1,0)
- ID selectors - they have a high specificity value (0,1,0,0)
- Inline styles - they have the highest specificity value (1,0,0,0)
When two or more styles are applied to an element, the style with the highest specificity value will apply.
If two selectors have the same specificity value, the one that was defined last in the CSS file will apply to the element.

CSS RESPONSIVE QUERIES

CSS responsive queries are also called media queries.
They allow developer to apply CSS styles on webpage based on the viewport of the device or browser in device.
Syntax start with @media rule.
We use differrent queries to target specific device sizes, such as smartphones or tablets, using min-width and max-width.
- @media all and (max-width: 767px): Commonly used for smartphones.
- @media all and (min-width: 768px) and (max-width: 1023px): Commonly used for tablets.
- @media all and (min-width: 1024px): Commonly used for PCs.

FLEXBOX/GRID

1. FLEXBOX

One-dimensional layout system.
Aligns elements along a single axis (horizontally or vertically).
- To align items vertically set the flex-direction: column, then the main-axis will be vertical and cross-axis will be Horizontal.
- To align items Horizontally set the flex-direction: row, then the main-axis will be horizontal and cross-axis will be vertical.
Justify-content works on main axis.
align-items work on cross axis.
gap is used to provide space between the element of main axis and cross axis.

2. GRID

Two-dimensional layout system.
Creates a grid of rows and columns.
Allows placement of elements within the grid.
grid-template-columns/grid-template-rows - It defines the size and number of column/row in grid.
grid-column- In this we need to specift the positon of starting of column and ending of column upto which content needed to spread.
grid-row- In this we need to specift the positon of starting of row and end of row upto which content needed to spread.
grid-gap Defines the gap between grid cells.
justify-items- Aligns object along the horizontal axis.
align-items- Aligns object along the vertical axis.

COMMON HEADER META TAGS

<title>: Defines the title of webpage.
<meta charset="utf-8">: Specifies the character encoding used in the webpage.
<meta name="viewport" content="width=device-width, initial-scale=1.0>: Sets the viewport width to the width of the device and sets the initial zoom level to 1.0.
<meta name="description" content="description of your webpage">: Provides a small description of the webpage.
<link rel="stylesheet" href="stylesheet.css">: Use this to link external css file to the html file.

CSS UNITS

ABSOLUTE UNITS

This unit is depended on parent element. For example, setting the font size of a parent element to 16px and the font size of a child element to 1.5em would result in a font size of 24px for the child element.

rem

This unit is depend on root element. For example, setting the font size of a root element to 16px and the font size of a element to 1.5rem would result in a font size of 24px for that element.

This unit is the percentage of its parent element. For example, setting the font size of a parent element to 16px and the font size of a child element to 50% would result in a font size of 8px for the child element.

vw/vh

This unit is depend upon the height and width of viewport. For example, setting the height of an element to 50vh would make it half the height of the viewport.

RELATIVE UNITS

It represent the physical pixel of the screen.

in/cm/mm

This is physical units such as centimeter,inch and milimeter.

REFERENCES

Geek For Geeks. "CSS units – %, em, rem, px, vh, vw". Retrieved from https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/
Java T Point. "CSS Box Model". Retrieved from https://www.javatpoint.com/css-box-model
MDN web docs. "position". Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/position
W3 School. "HTML Block and Inline Elements". Retrieved from https://www.w3schools.com/html/html_blocks.asp
Geek For Geeks. "CSS Grid Layout Module". Retrieved from https://www.geeksforgeeks.org/css-grid-layout-module/
W3 School. "CSS Flexbox". Retrieved from https://www.w3schools.com/css/css3_flexbox.asp

DEV Community