DEV Community

Tejeswararao123
Tejeswararao123

Posted on

HTML and CSS concepts

Box Model:

  • Every element on a webpage is considered a rectangular box
  • Box model has some properties which can be set to the HTML page #### Padding:
  • Specifies the gap between content and border 
// HTML code //

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 class="header"> hello</h1>
</body>
</html>


//  CSS code  //
.header{
    padding:1rem;
}
Enter fullscreen mode Exit fullscreen mode
  • The above maintain a gap of 1rem between content and border of h1 element
  • Here are some of the padding attributes #### padding-top
  • Specifies the gap between the top of the content and the border
  • in the same we can use padding-left, padding-bottom, and padding-right to give space at required position.
  • If we want to apply the same padding for the top and bottom and the same padding for the left and right you have to pass two values like below 
p{
    padding: 1rem 2rem;
}
Enter fullscreen mode Exit fullscreen mode
  • The above property sets 1rem gap at the top and bottom and a 2 rem gap at the left side and right side
  • if you want different spacing for all four sides you can give 4 values for the padding attribute 
a{
    padding: 1rem 2rem 3rem 2rem;
}
Enter fullscreen mode Exit fullscreen mode
  • Here the order of values applied to the element is a top, right, bottom, left #### Margin:
  • margin specifies the gap between the border and other outside sibling elements
  • Syntax for margin is the same as padding explained above but instead of padding we use margin in syntax
  • you can use all the attributes mentioned for padding For example 
p{
    margin: 10px 20px 22px 10px
}
Enter fullscreen mode Exit fullscreen mode

Border:

  • Border specifies how the border should be to your HTML elements like border style, border width, and border color.
  • border-style properties are dashed, solid, none, and dotted
  • border-width specifies the width of the border
  • border-color specifies the color of the border
  • Shorthand syntax to apply all of the above properties is 
a{
    border: solid 2px blue
}
Enter fullscreen mode Exit fullscreen mode

Box-sizing in CSS

  • This property controls how an element's width and height are calculated, including its padding and border.
  • By default, when you set the width and height of an element in CSS, those values only apply to the element's content
  • If you apply border and padding the element size will increase because the default value for box-sizing is content-box
  • If you want to mention sizes including padding and border you can give border-box for box-sizing element Example 
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}
Enter fullscreen mode Exit fullscreen mode

In the above code, the box-sizing property is set to border-box, which means that the element's width of 200 pixels includes its padding and border. Without the border-box value, the element's total width would be 222 pixels (200px + 10px padding on each side + 1px border on each side).

Inline versus Block Elements:

Block elements:

  • Block elements are those that take up the full width of their container and create a new line after the element.
  • Block elements typically contain other block and inline elements within them
  • Examples of block elements include 
<div>, <p>, <h1> to <h6>, <ul>, <ol>, and <form>.
Enter fullscreen mode Exit fullscreen mode

inline elements

  • These elements do not create a new line after the element and only take up as much width as necessary to contain their content.
  • Examples of inline elements include 
<span>, <a>, <strong>, <em>, and <img>.
Enter fullscreen mode Exit fullscreen mode
  • These elements don't have padding, border, and margin properties

Positioning: Relative/Absolute

position relative

  • When you set position: relative to an element, it is positioned relative to its normal position on the page.
  • This means that you can use the top, bottom, left, and right properties to move the element up, down, left, or right from its original position. 
.box {
  position: relative;
  top: 20px;
  left: 50px;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the box element will be positioned 20 pixels down from its normal position and 50 pixels to the right of its normal position.

position absolute:

  • When you set position: absolute on an element, it is positioned relative to its nearest positioned ancestor.
  • If no ancestor elements are positioned, then the element is positioned relative to the body of the webpage.
  • This means that you can use top, bottom, left, and right properties to position the element precisely on the page, regardless of where it appears in the HTML document. Example 
.box {
  position: absolute;
  top: 100px;
  left: 200px;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the box element will be positioned 100 pixels down from its nearest positioned ancestor and 200 pixels to the right of its nearest positioned ancestor.

Common CSS structural classes:

  • structural classes are used to apply styles to specific types of elements based on their position in the document tree. #### Parent selector
  • The parent selector (also known as the "descendant selector") is used to apply styles to child elements based on their relationship to a parent element.
  • The selector uses a space to indicate the relationship between the parent and child elements. Example 
.parent p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the p elements that are descendants of the parent element will have red text color.

Child Selector

  • The child selector (also known as the "direct descendant selector") is used to apply styles to direct child elements of a parent element.
  • The selector uses the > symbol to indicate the direct relationship between the parent and child elements. Example 
.parent > p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In this example, only the direct p children of the parent element will have red text color.

Sibling Selector

  • The sibling selector is used to apply styles to elements that are siblings of another element.
  • There are two types of sibling selectors: the adjacent sibling selector and the general sibling selector.

The adjacent sibling selector (represented by the + symbol)

  • selects the first sibling that follows immediately after the first element. Example 
h1 + p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the p element that immediately follows the h1 element will have red text color.

The general sibling selector (represented by the ~ symbol):

  • Selects all siblings that follow after the first element. 
h1 ~ p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In this example, all p elements that follow the h1 element will have red text color.

pseudo-classes

  • These are used to style elements based on their state or relationship to other elements in the document tree.
  • Pseudo-classes start with a colon (:) and are appended to a selector. Common types of pseudo-classes #### :hover *:hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse.
  • commonly used to highlight links and buttons. Example 
a:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This will make all links turn red when the user hovers over them.

:active

  • : active pseudo-class is used to apply styles to an element while it is being clicked or activated. 
button:active {
  background-color: gray;
}
Enter fullscreen mode Exit fullscreen mode

This will make a button turn gray while the user is clicking on it.

:focus

  • This is used to apply styles to an element that has focus.
  • commonly used to highlight form fields that are being filled out by the user. 
input:focus {
  outline: none;
  border-color: blue;
}
Enter fullscreen mode Exit fullscreen mode

This will remove the outline and change the border color of an input field when it has focus.

:first-child and :last-child

  • The :first-child and :last-child pseudo-classes are used to select the first or last child element of a parent element.
  • This is commonly used to style list items or table rows. Example 
li:first-child {
  font-weight: bold;
}

tr:last-child {
  background-color: gray;
}
Enter fullscreen mode Exit fullscreen mode

This will make the first list item bold and give the last table row a gray background color.

:nth-child()

The :nth-child() pseudo-class is used to select an element based on its position in the document tree. This is commonly used to alternate the styles of table rows or to select specific items in a list.

For example:

tr:nth-child(even) {
  background-color: gray;
}

li:nth-child(3n) {
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

This will give every even table row a gray background color and make every third list item italic.

  • You can use odd to select every nth odd element
  • To select a specific nth child use the below syntax 
li:nth-child(3) {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

This will select the third li element and make its text bold.

  • If you want to select every third child element starting from the fourth element use below one 
li:nth-child(3n+4) {
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

This will select every third li element starting from the fourth li element and underline its text.

Common CSS styling classes

  • CSS styling classes are reusable sets of styles that can be applied to HTML elements to quickly and consistently achieve a desired visual effect. #### .container
  • The .container class is used to define a fixed-width container element that centers its content horizontally on the page.
  • This class is commonly used for wrapping entire page layouts or individual sections of a page. 
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
Enter fullscreen mode Exit fullscreen mode

.btn

  • This class is used to define a button element with a standardized appearance. 
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

.card

  • This class is used to define a rectangular container element with a border and padding.
  • It is commonly used for displaying content in a structured and visually appealing way. 
.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode

The .card class is used to define a rectangular container element with a border and padding

.form-control

  • This class is used to define form input elements with a standardized appearance.
  • It is commonly used for text inputs, text areas, and other form elements.

text-center

  • This class is used to horizontally center text inside an element.
  • It is commonly used for headings, paragraphs, and other text elements. 
.text-center {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode 
.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
Enter fullscreen mode Exit fullscreen mode

By defining common style attributes you can re-use whenever you need.

CSS Specificity

  • CSS specificity is a way of determining which CSS rules should be applied to an HTML element when there are multiple CSS rules targeting the same element.

below is the order of specificity from lowest to highest

  1. Type selectors (e.g., div, p, a)
  2. Class selectors (e.g., .my-class)
  3. ID selectors (e.g., #my-id)
  4. Inline styles (e.g., style="color: red;")

The higher the specificity of a selector, the more weight it carries when determining which CSS rule should be applied to an element. For example, a rule with an ID selector will override a rule with a class selector, which in turn will override a rule with a type selector.

CSS Responsive Queries

  • To make our webpage responsive we use media queries
    Media queries allow developers to apply different styles to different devices or screen sizes based on their characteristics, such as screen width, height, orientation, resolution, and more.

  • To use media queries in CSS, you can add them to your CSS stylesheet using the @media rule.
    Example

/* styles for all devices */
body {
  font-size: 16px;
  color: #333;
}

/* styles for devices with a maximum width of 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* styles for devices with a minimum width of 1024px */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}
Enter fullscreen mode Exit fullscreen mode

In the example above, we have defined styles for all devices by targeting the body element. Then, we added two media queries to adjust the font size of the body element based on the device's screen width. The first media query targets devices with a maximum width of 768px, and the second targets devices with a minimum width of 1024px.

Media queries can also be combined with logical operators (and, not, and only) and other CSS selectors to create more complex rules.
Example:

/* styles for devices with a width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 90%;
  }
}

/* styles for devices with a width greater than 1024px or with a high-resolution display */
@media (min-width: 1024px) or (orientation: protrait) {
  .container {
    width: 80%;
  }
}
Enter fullscreen mode Exit fullscreen mode

Flexbox/Grid

Flexbox

Flexbox (short for "Flexible Box Layout") is a layout model in CSS that allows you to create flexible and responsive layouts for web pages.

  • It provides a way to arrange and align elements inside a container, regardless of their size or content, in a predictable and flexible way.

display:

This property sets the element to be a flex container or not. To create a flex container, set the display property to flex or inline-flex.

flex-direction:

This property sets the direction of the main axis of the flex container. It can be set to row (left-to-right), row-reverse (right-to-left), column (top-to-bottom), or column-reverse (bottom-to-top).

justify-content:

This property sets the alignment of flex items along the main axis of the flex container. It can be set to flex-start (left or top), flex-end (right or bottom), center (centered), space-between (distributed evenly with no extra space before the first or after the last item), space-around (distributed evenly with equal space before the first and after the last item), or space-evenly (distributed evenly with equal space between all items).

align-items:

This property sets the alignment of flex items along the cross-axis of the flex container. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), or baseline (aligned on their baselines).

flex-wrap:

This property determines whether flex items should wrap or not if they exceed the width or height of the flex container. It can be set to nowrap (no wrapping), wrap (wrapping if needed), or wrap-reverse (wrapping in reverse order).

align-content:

This property sets the alignment of multiple lines of flex items along the cross-axis of the flex container. It works like justify-content, but for multiple lines of flex items. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), space-between (distributed evenly with no extra space before the first or after the last line), space-around (distributed evenly with equal space before the first and after the last line), or space-evenly (distributed evenly with equal space between all lines).

flex:

  • This property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties.
  • It sets how much a flex item should grow or shrink relative to the other flex items in the same container. Example Html code 
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS code

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  height: 400px;
  background-color: lightblue;
}

.flex-item {
  flex: 1 1 100px;
  background-color: white;
  color: black;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Grid

CSS Grid is a powerful layout system that allows you to create complex two-dimensional layouts for web pages.

display: grid;:

  • This property is used to make an element a grid container.

grid-template-columns and grid-template-rows:

These properties are used to define the size of the grid tracks (rows and columns) in the grid. They can accept values such as length, percentage, fr units, auto, and minmax().

Example

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}
Enter fullscreen mode Exit fullscreen mode

grid-template-areas:

  • This property is used to define the grid areas by specifying the grid names for each cell in the grid. You can use dots to represent empty cells. Example 
.container {
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
}
Enter fullscreen mode Exit fullscreen mode

grid-template:

This is a shorthand property that combines grid-template-rows, grid-template-columns, and grid-template-areas in one declaration.

grid-column-gap and grid-row-gap:

  • These properties are used to define the space between grid columns and rows. 
.container {
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

grid-gap:

  • This is a shorthand property that combines grid-row-gap and grid-column-gap in one declaration. 
.container {
  grid-gap: 10px 20px;
}
Enter fullscreen mode Exit fullscreen mode

grid-auto-rows and grid-auto-columns:

  • These properties are used to set the size of the rows and columns that are not explicitly defined in the grid template. 
.container {
  grid-auto-rows: 200px;
  grid-auto-columns: 1fr;
}
Enter fullscreen mode Exit fullscreen mode

grid-auto-flow:

  • This property is used to specify how the grid should fill in cells that are not explicitly defined in the grid template. The possible values are row, column, row dense, and column dense. 
.container {
  grid-auto-flow: row;
}
Enter fullscreen mode Exit fullscreen mode

grid:

  • This is a shorthand property that combines grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow in one declaration. 
.container {
  grid:
    "header header header" 100px
    "nav main aside" 1fr
    "footer footer footer" 100px /
    1fr 2fr 1fr;
}
Enter fullscreen mode Exit fullscreen mode

grid-row-start, grid-row-end, grid-column-start, and grid-column-end:

  • These properties are used to specify the starting and ending positions of grid items in the grid. 
.item {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}
Enter fullscreen mode Exit fullscreen mode

grid-row and grid-column:

These are shorthand properties that combine grid-row-start, grid-row-end, grid-column-start, and grid-column-end in one declaration.
Example

.item {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}
Enter fullscreen mode Exit fullscreen mode

grid-area:

This property is used to specify the grid area that a grid item should span.

.item {
  grid-area: 2 / 2 / 4 / 4;
}
Enter fullscreen mode Exit fullscreen mode

justify-items and align-items:

  • These properties are used to align grid items within their grid cells. The possible values are start, end, center, stretch, and baseline. Example code 
.container {
  justify-items: center;
  align-items: end;
}
Enter fullscreen mode Exit fullscreen mode

justify-content and align-content:

  • These properties are used to align the grid tracks within the grid container. The possible values are start, end, center, stretch, space-between, space-around, and space-evenly.

Example

.container {
  justify-content: space-between;
  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

place-items and place-content:

  • These are shorthand properties that combine justify-items and align-items, and justify-content and align-content in one declaration. 
.container {
  place-items: center end;
  place-content: space-between center;
}
Enter fullscreen mode Exit fullscreen mode

grid-auto-flow:

  • This property controls the automatic placement of grid items that are not explicitly placed with grid-row and grid-column. Example 
.container {
  grid-auto-flow: dense;
}
Enter fullscreen mode Exit fullscreen mode

Common header meta tags

<meta charset="utf-8">

This meta tag specifies the character encoding used in the document, which is usually set to UTF-8.

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

This meta tag sets the viewport size for the document, which is important for responsive design. The width=device-width attribute sets the width of the viewport to the width of the device, while the initial-scale=1.0 attribute sets the initial zoom level to 1.0.

<meta name="description" content="Description of your website">
This meta tag provides a brief description of the website, which can be used by search engines or social media platforms when displaying search results or links.

<meta name="keywords" content="keyword1, keyword2, keyword3">
This meta tag specifies a comma-separated list of keywords or phrases that are relevant to the website.

<meta name="author" content="Your Name">
This meta tag specifies the author of the document.

<meta name="robots" content="index, follow">

This meta tag specifies how search engine crawlers should treat the website. The index attribute tells search engines to index the website, while the following attribute tells search engines to follow the links on the website.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
This meta tag specifies the compatibility mode for Internet Explorer.

References

Top comments (0)

Read next

rasulhsn profile image

A Different Perspective of Stack Memory in .NET

Rasul -

sagarlakshmipathy profile image

Apache Hudi on AWS Glue

Sagar Lakshmipathy -

rahulsingh_ca profile image

SvelteKit UI Libraries

Rahul -

devmirx profile image

How to leverage Jest in your JavaScript codebase: A guide to Snapshot Testing

LordCodex -