> CSS Box Model:
When HTML elements are treated as a box, there are special benefits to web page design. This is a very convenient method to design the layout of any web page in particular. The CSS box model is the combined position of borders, margins, padding, and elements or content around HTML elements. Box model properties define border, margin, padding, or outline around any content.
Parts of CSS Box Model:
Margin - The margin is defined as the space around the border. No color can be used on the surface or background of the margin, it is completely transparent.
Border - The border is located around the content padding, that is, between the margins and the padding. The color of the surface or background influences the border.
Padding - The space around the content is determined using padding. No color can be used on the padding surface or background, it is completely transparent.
Content Itself- Any content in the box model is text, images, etc., which are displayed on the web page.
With CSS, when we define the width and height of an HTML element, we actually define the full width and height for only the content, such as - an image, a paragraph, etc. But in order to display any content beautifully on a web page, you must determine the padding, borders and margins.
> Explanation of CSS Media Query:
Media query is a method integrated with version 3.0 of CSS that makes it easy to make any web page responsive. Run or execute CSS style codes within the media query only if certain conditions are true.
The @media property is used to access CSS media queries. The width of the HTML elements is usually defined for different devices and a certain number of CSS style codes are specified for all devices of that width.
There is an example below, where CSS's @media property has been used. Normally the color of the surface or background is blue, but when the browser window is 600px or less, the color of the surface or background will be light blue.
A web page should be designed for a mobile or smartphone device before it is designed to be responsive to the desktop screen, so that the web page loads or appears faster on smaller screens like mobile.
Top comments (0)