- This article includes a topic based on HTML and CSS.
Box Model
- The box model is a concept in web development that defines how elements on a web page are structured and how their size and position are calculated.
-
Every HTML element is represented as a rectangular box, which consists of four parts: content, padding, border, and margin.
- Content: Content is the actual information or media that the element contains, such as text, images, or videos.
-
Padding: The padding is the space between the content and the border, and it can be used to add extra spacing around the content.
Border: The border is a line that surrounds the padding, and it can be styled with different colours, widths, and styles.
Margin: The margin is the space between the border and the neighbouring elements, and it can be used to create gaps between elements.
Together, these four parts of the box model determine the total size of the element.
The total size of the element is then calculated by adding the size of the content, padding, border, and margin.
Inline versus Block Elements
Elements can be classified into two main categories: Inline and block elements.
The distinction between these two types of elements affects how they are rendered on the web page.
-
Block elementsThe elements that take up the entire width of their parent container and create a new line after the element.
- Examples of block elements include headings, paragraphs, lists, and divs.
- These elements are often used for larger pieces of content that require their own space on the page.
- They can also be styled using CSS to adjust their dimensions, margin, and padding.
-
Examples of block elements are
<div> /*Syntax for divisions*/ <h1>, <h2>, <h3>, /*Syntax for headings*/ <p> /*Syntax for paragraphs*/ <ul>, <ol>, <li> /*Syntax for bullet points*/ <table>, <tr>, <th>, <td> /*Syntax for table*/ <form>, <button> /*Syntax to take input from user*/
-
Inline elements: - The elements that do not create a new line after them and only take up as much width as their content requires.
- Inline elements include text, images, and links.
- These elements are often used for smaller pieces of content that need to be integrated into a larger block element.
- Inline elements can also be styled using CSS, but their width, margin, and padding properties may not behave in the same way as they do for block elements.
-
Examples of inline elements are
<span> /*Syntax for span*/ <a> /*Syntax for anchor*/ <img> /*Syntax for image*/ <strong>, <em>, <i> /*Syntax for different styling in a text*/ <br> /*Syntax to break lines*/
The choice of whether to use a block or inline element depends on the context and purpose of the content.
For example, headings and paragraphs are typically block elements because they require their own space and are often used to separate content.
Meanwhile, links and images are typically inline elements because they are usually embedded within larger blocks of text or other content.
In summary, block and inline elements differ in size, layout, and behaviour on the page. Understanding the difference between these two types of elements is important when designing and styling web pages.
Positioning: Relative/Absolute
- Positioning in CSS refers to the process of placing an HTML element precisely in a particular position on a webpage.
- It can be used to adjust the location of an element on the page, as well as to layer elements on top of each other.
-
There are several types of positioning in CSS, But we will discuss Relative and Absolute positioning in this section:
Relative Positioning:
- Relative positioning is a type of positioning in CSS that allows you to position an element relative to its normal position.
- With relative positioning, you can move an element away from its default position, either by shifting it left, right, up or down or by a combination of these movements.
- When an element is positioned relatively, its position is calculated based on its original position in the document flow. This means that if you move a relatively positioned element, the other elements on the page will still flow around it as if it were still in its original position.
- NOTE - When you use relative positioning, the element still takes up the same amount of space as it would in its original position, so it may overlap other elements on the page if it is moved too far.
Absolute Positioning:
- Absolute positioning is a CSS property used to position an element in a specific location relative to its nearest positioned ancestor.
- When an element is positioned absolutely, it is removed from the normal flow of the document and does not affect the position of other elements on the page.
- To use absolute positioning, the parent element must have a position property set to either relative, absolute or fixed. The positioned element is then positioned concerning its parent element's top, right, bottom and left properties.
- Note: When using absolute positioning is that the position of the element is fixed relative to its nearest positioned ancestor, which means that if the parent element is not positioned, the element will be positioned relative to the body element.
-
Here is an example of how to use absolute positioning:
<!-- HTML FILE --> <div class="parent"> <div class="child"></div> </div>
```css
<!-- CSS FILE -->
.parent {
position: relative;
width: 200px;
height: 300px;
background-color: gray;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}```
Common CSS structural classes
- CSS class selectors are used to apply special styles to an element in certain circumstances or states.
They allow developers to target elements based on their state or position in the document, without using JavaScript or adding extra HTML markup.
-
Some common CSS pseudo-class selectors include:
- :first-child - selects the first child element of the parent element.
- :last-child - selects the last child element of the parent element.
- :nth-child - selects a specific child element based on its position in the parent element.
- :hover - applies a style when the mouse pointer is over the element.
- :active - applies a style when the element is being activated (e.g., clicked).
- :focus - applies a style when the element has focus (e.g., when it is selected by keyboard navigation).
- :checked - applies a style to an element that is checked, such as a checkbox or radio button.
- :disabled - applies a style to an element that is disabled, such as an input field or button.
By applying different styles to elements based on their state or position, developers can provide visual feedback to users and guide them through the interface.
Common CSS styling classes
Common CSS styling classes are pre-defined classes used to apply specific styling to elements in HTML. These classes allow developers to quickly and easily apply common styles to elements on their web pages without having to write custom CSS code.
-
Some examples of common CSS styling classes include:
- Text styling classes: These classes allow developers to change the font size, colour, weight, and other text properties. Examples include .text-bold, .text-italic, .text-underline, and .text-uppercase.
- Margin and padding classes: These classes control the spacing around elements on a web page. Examples include .m-0 (margin set to 0), .m-1 (margin set to 1rem), .p-0 (padding set to 0), and .p-1 (padding set to 1rem).
- Border classes: These classes allow developers to add borders to elements on a web page. Examples include .border, .border-top, .border-bottom, and .border-radius.
- Background colour classes: These classes allow developers to set the background colour of elements on a web page. Examples include .bg-primary, .bg-secondary, and .bg-dark.
- Flexbox classes: These classes allow developers to use the CSS Flexbox layout model to position elements on a web page. Examples include .d-flex, .justify-content-center, and .align-items-center.
- Responsive classes: These classes allow developers to apply different styles to elements based on the size of the device being used to view the web page. Examples include .d-sm-block (display as a block on small screens and above), .d-md-flex (display as flex on medium screens and above), and .hidden-lg-up (hide on large screens and above).
By using common CSS styling classes, developers can save time and effort when styling their web pages, while also ensuring a consistent look and feel across their site.
CSS Specificity
CSS specificity is a set of rules that determine which styles will be applied to an element when multiple style rules are targeting the same element.
It is a measure of the weight of a CSS selector, and it determines which rule will be applied if two or more selectors target the same element.
CSS specificity is calculated based on the combination of the different selector types used in the style rule.
Each selector type has a specific value, and the values are added together to determine the specificity of the selector.
-
The different selector types, in order of increasing specificity, are:
- Type selectors (e.g., p, div, span)
- Class selectors (e.g., .class-name)
- ID selectors (e.g., #id-name)
- Inline styles (e.g., style="colour: red;")
The specificity of a selector can be represented as a four-digit number.
The first digit represents the number of ID selectors, the second digit represents the number of class selectors and attribute selectors, the third digit represents the number of type selectors, and the fourth digit represents the number of pseudo-classes and pseudo-elements.
For example, the selector #header .logo has a specificity of 110, because it has one ID selector and one class selector. On the other hand, the selector body .logo has a specificity of 010, because it has one class selector and one type selector.
When multiple style rules apply to an element, the browser applies the style rule with the highest specificity. If two or more style rules have the same specificity, the browser applies the style rule that comes last in the CSS file or the HTML document.
It is important to keep in mind the specificity of selectors when writing CSS, to avoid unexpected styling behaviour and to ensure that the desired styles are applied to the elements. It is also important to avoid using too many ID selectors, as they have high specificity and can lead to specificity wars and difficult-to-maintain CSS code.
CSS Responsive Queries
CSS responsive queries allow developers to create responsive websites that adjust to different screen sizes and devices. These queries use CSS media queries to apply specific styles based on the device's screen size.
For example, a responsive query may specify that if the screen size is smaller than 768 pixels, the font size should be reduced and the navigation menu should be collapsed. Alternatively, if the screen size is larger than 1200 pixels, the layout should be adjusted to accommodate more content.
To implement responsive queries, developers typically define a set of breakpoints based on common screen sizes, such as 320px for mobile devices, 768px for tablets, and 1200px for desktops. They can then apply styles based on these breakpoints using media queries.
-
The following code applies a style to all elements with the class "content" when the screen width is less than 768 pixels:
@media (max-width: 768px) { .content { font-size: 14px; } } By using responsive queries, developers can ensure that their websites are optimized for different devices and provide a consistent user experience across all screen sizes.
Flexbox/Grid
Flexbox and Grid are two powerful tools in CSS that allow developers to create complex and responsive layouts.
-
Flexbox is a one-dimensional layout system that is best suited for arranging items along a single row or column.
- It consists of a container element and one or more child elements, or flex items.
- The container element is defined using the display: flex property and the child elements can be aligned and positioned using a range of flex properties, such as justify-content and align-items.
- Flexbox is great for creating navigation menus, form layouts, and other simple layouts.
-
Grid is a two-dimensional layout system that allows developers to create grid layouts that are highly responsive and dynamic.
- Grid consists of a container element and a set of grid items that are arranged in rows and columns.
- Grid can be used to create complex layouts that include multiple rows, columns, and nested grids.
- Grid also includes a range of properties that allow developers to control the sizing, positioning, and alignment of grid items.
In general, Flexbox is best suited for simple layouts that require alignment along a single axis, while Grid is better suited for complex layouts that require alignment along two axes.
However, both Flexbox and Grid are highly flexible and can be used in combination to create even more complex layouts.
Common header meta tags
- Common header meta tags are used to provide metadata information about an HTML document.
- These tags are placed in the head section of an HTML document and help search engines and other applications understand the content and purpose of the page.
-
Here are some common header meta tags:
/*1.*/ <title> <title> /*2.*/ <meta name="description" content="description of the page"> /*3.*/ <meta name="keywords" content="comma-separated list of keywords"> /*4.*/ <meta name="viewport" content="width=device-width, initial-scale=1.0"> /*5.*/ <meta http-equiv="refresh" content="5;url=redirect-url">
1. Title tag: - This tag is used to define the title of the document. It is displayed in the title bar of the browser and is also used by search engines to understand the content of the page.
Description tag: This tag is used to provide a brief description of the page's content. Search engines often use this description to display a summary of the page in search results.
Keyword tag: This tag is used to specify a list of keywords that are relevant to the content of the page. Search engines use this information to help rank the page in search results.
Viewport tag: This tag is used to specify the viewport size of the page for mobile devices. It ensures that the page is displayed properly on devices with different screen sizes.
Redirection tag: This tag is used to automatically redirect the page to another URL after a specified time. The number after "content=" specifies the number of seconds before the redirect occurs, and "url=" specifies the URL to redirect to.
References:
- For more details, click on the below:
Top comments (0)