CSS

"In the realm of the web, CSS is the artist's brush, painting life and beauty onto the canvas of HTML.”

CSS is very vast and mastering it takes time and lots of effort. There are many CSS libraries that makes our lives easier as a developer but knowing the functioning of the main CSS concepts is a must else you’ll be lost using them and will not design your webpages the way you intended to.

CSS Box Model Overview:CSS Flexbox Model Overview:CSS Grid Model Overview:

Include css file in the plain html


<link rel="stylesheet" type="text/css" href="/style.css" />

Script tag (Not used)


<style type="text/css">
div { color: #444;}
</style>

Inline Css (Not recommended) but the tailwindCss’s utility classes are amazing and it’s an exception


<tag style="property: value"> </tag>

CSS Modules (Used in React)


import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

Selectors

* : Selects all elements.

div: Selects all <div> tags.

div, p: Selects all <div> elements and all <p> elements.

div p: Selects all <p> elements that are descendants of <div> elements.

div > p: Selects all <p> elements that are direct children of <div> elements.

div + p: Selects all <p> elements that immediately follow <div> elements.

div ~ p: Selects all <p> elements that are preceded by <div> elements.

Pseudo-Classes:

a:link: Selects links in their normal state.

a:active: Selects links in their clicked/active state.

a:hover: Selects links when the mouse pointer is over them.

a:visited: Selects visited links.

input:checked: Selects checked input elements.

input:disabled: Selects disabled input elements.

input:enabled: Selects enabled input elements.

input:focus: Selects input elements that have keyboard focus.

input:in-range: Selects input elements with values within the defined range.

input:out-of-range: Selects input elements with values outside the defined range.

input:valid: Selects input elements with valid values.

input:invalid: Selects input elements with invalid values.

input:optional: Selects input elements that don't have a required attribute.

input:required: Selects input elements with a required attribute.

input:read-only: Selects input elements with a readonly attribute.

input:read-write: Selects input elements without a readonly attribute.

div:empty: Selects elements with no children.

p:first-letter: Selects the first letter of a <p> element.

p:first-line: Selects the first line of a <p> element.

p:first-of-type: Selects the first <p> of its type.

p:last-of-type: Selects the last <p> of its type.

p:lang(en): Selects <p> elements with an "en" language attribute.

:not(span): Selects elements that are not <span> elements.

p:first-child: Selects the first child of its parent.

p:last-child: Selects the last child of its parent.

p:nth-child(2): Selects the second child of its parent.

p:nth-child(3n+1): Selects elements based on the nth-child (an + b) formula.

p:nth-last-child(2): Selects the second child from the end.

p:nth-of-type(2): Selects the second <p> of its parent.

p:nth-last-of-type(2): Selects the second <p> from the end.

p:only-of-type: Selects the unique <p> of its parent.

p:only-child: Selects the only child of its parent.

:root: Selects the root element of the document.

::selection: Selects a portion of text selected by the user.

:target: Selects the active anchor (element with the target ID).

Attribute Selectors:

a[target]: Selects links with a target attribute.

a[target="_blank"]: Selects links that open in a new tab (with the target attribute set to "_blank").

[title~="chair"]: Selects elements with a title attribute containing the word "chair."

[class^="chair"]: Selects elements with a class attribute that starts with "chair."

[class|="chair"]: Selects elements with a class attribute that starts with the word "chair."

[class*="chair"]: Selects elements with a class attribute that contains the word "chair."

[class$="chair"]: Selects elements with a class attribute that ends with "chair."

input[type="button"]: Selects specified input elements with the type attribute set to "button."

CSS Properties:

align-content: Specifies the behavior of the flex-wrap property in a flex container.

align-items: Defines the alignment for items inside a container.

align-self: Controls the alignment for a selected item within a flex container.

all: Applies to all properties.

animation: Binds an animation to an element.

animation-delay: Sets a delay before the animation starts.

animation-direction: Determines whether the animation runs in reverse or alternates between cycles.

animation-duration: Specifies the duration of the animation in seconds or milliseconds.

animation-fill-mode: Defines the style of an element when the animation is not playing.

animation-iteration-count: Sets the number of times an animation replays.

animation-name: Specifies a name for the @keyframes animation.

animation-play-state: Determines whether the animation is running or paused.

animation-timing-function: Specifies the speed curve of an animation.

backface-visibility: Controls whether an element is visible when not facing the screen.

background: Combines all background properties into one declaration.

background-attachment: Specifies whether the background image is fixed or scrolls.

background-blend-mode: Defines the blending mode of each background layer.

background-clip: Determines the painting area of the background.

background-color: Sets the background color.

background-image: Specifies the background image.

background-origin: Determines where the background image is positioned.

background-position: Sets the starting position of the background image.

background-repeat: Defines how the background image is repeated.

background-size: Sets the background image size.

border: Sets all border properties in one line.

border-bottom: Specifies the bottom border properties in one line.

border-bottom-color: Defines the color of the bottom border.

border-bottom-left-radius: Sets the border radius for the bottom-left corner.

border-bottom-right-radius: Sets the border radius for the bottom-right corner.

border-bottom-style: Specifies the style of the bottom border.

border-bottom-width: Sets the width of the bottom border.

border-collapse: Controls border collapse in tables.

border-color: Sets the border color.

border-image: Sets an image as the border.

border-image-outset: Extends the border image area beyond the border box.

border-image-repeat: Determines how the border image is repeated, rounded, or stretched.

border-image-slice: Specifies how to slice the border image.

border-image-source: Defines the path to the border image.

border-image-width: Sets the width of the border image.

border-left: Specifies the left border properties in one line.

border-left-color: Defines the color of the left border.

border-left-style: Specifies the style of the left border.

border-left-width: Sets the width of the left border.

border-radius: Sets the border radius for the four rounded corners.

border-right: Specifies the right border properties in one line.

border-right-color: Defines the color of the right border.

border-right-style: Specifies the style of the right border.

border-right-width: Sets the width of the right border.

border-spacing: Controls border spacing in tables.

border-style: Defines the border style.

border-top: Specifies the top border properties in one line.

border-top-color: Defines the color of the top border.

border-top-left-radius: Sets the border radius for the top-left corner.

border-top-right-radius: Sets the border radius for the top-right corner.

border-top-style: Specifies the style of the top border.

border-top-width: Sets the width of the top border.

border-width: Sets the border width.

bottom: Sets the bottom offset for relative and absolute positioned elements.

box-shadow: Adds a shadow to an element.

box-sizing: Controls the box sizing properties.

caption-side: Specifies the placement of a table caption.

clear: Determines whether an element can be next to a floating element.

clip: Clips an absolutely positioned element.

color: Sets the text color.

column-count: Divides the content into columns.

column-fill: Specifies whether columns are balanced or not.

column-gap: Sets the gap between columns.

column-rule: Defines the separator between columns, similar to a border.

column-rule-color: Specifies the color of the column rule.

column-rule-style: Sets the style of the column rule.

column-rule-width: Determines the width of the column rule.

column-span: Controls whether an element spans multiple columns.

column-width: Specifies the width of a column.

columns: Combines the column-width and column-count properties.

content: Inserts content before and after elements.

counter-increment: Counts sections in a document.

counter-reset: Resets counters in a document.

cursor: Specifies the type of cursor to be displayed when an element is hovered.

direction: Defines the writing direction, especially useful for languages like Arabic (right-to-left).

display: Sets the display type of an element.

empty-cells: Controls the visibility of borders and backgrounds on empty table cells.

filter: Applies image effects, such as grayscale, blur, or invert.

flex: Specifies an item's length relative to other items within a flex container.

flex-basis: Sets the initial length of a flexible item.

flex-direction: Defines the direction of flexible items.

flex-flow: Acts as shorthand for flex-direction and flex-wrap.

flex-grow: Determines how much an item will grow relative to other items.

flex-shrink: Defines how an item shrinks relative to other items.

flex-wrap: Controls whether flexible items wrap or not.

float: Positions elements to the left or right within the container.

font: Combines all font properties in one line.

@font-face: Declares non-web-safe fonts for use in web documents.

font-family: Specifies the font of an element.

font-size: Sets the font size.

font-size-adjust: Controls font size when the first declared option is not available.

font-stretch: Widens or narrows text.

font-style: Sets the font style to normal, italic, or oblique.

font-variant: Applies small-caps to text.

font-weight: Defines the character's weight as bold or thin.

hanging-punctuation: Determines whether a punctuation mark can be placed outside the line box.

height: Sets the height of an element.

justify-content: Justifies the items within a flexible container horizontally if necessary.

@keyframes: Specifies the animation code.

left: Sets the left offset for relative and absolute positioned elements.

letter-spacing: Adjusts the space between characters.

line-height: Sets the line height of text or inline-block elements.

list-style: Combines all list properties into one declaration.

list-style-image: Replaces the list item marker with an image.

list-style-position: Determines whether list item markers are inside or outside the content flow.

list-style-type: Sets the type of list item marker.

margin: Sets the top, right, bottom, and left margins in one line.

margin-bottom: Specifies the bottom margin.

margin-left: Defines the left margin.

margin-right: Sets the right margin.

margin-top: Determines the top margin.

max-height: Sets the maximum height of an element.

max-width: Specifies the maximum width of an element.

@media: Introduces media queries for responsive design.

min-height: Sets the minimum height of an element.

min-width: Specifies the minimum width of an element.

nav-down: Controls where to navigate when the arrow-down button is pressed.

nav-index: Sets the sequential navigation order.

nav-left: Specifies where to navigate when the arrow-left button is pressed.

nav-right: Defines where to navigate when the arrow-right button is pressed.

nav-up: Determines where to navigate when the arrow-up button is pressed.

opacity: Sets the transparency level of an element.

order: Reorders elements within a container.

orphans: Determines the minimum number of lines in a block container.

outline: Outlines an element, including color, style, and width.

outline-color: Specifies the color of the outline.

outline-offset: Sets the gap between the element and the outline.

outline-style: Defines the style of the outline.

outline-width: Determines the width of the outline.

overflow: Controls how to handle the display of content that overflows its container.

overflow-x: Specifies horizontal overflow behavior.

overflow-y: Defines vertical overflow behavior.

padding: Sets the padding between the element's border and content.

padding-bottom: Specifies the bottom padding.

padding-left: Defines the left padding.

padding-right: Sets the right padding.

padding-top: Determines the top padding.

page-break-after: Adds a page break after an element.

page-break-before: Adds a page break before an element.

page-break-inside: Allows or denies a page break inside an element.

perspective: Specifies the distance in pixels at which a 3D element is placed from the view.

perspective-origin: Determines the position of a 3D element based on the x- and y-axes.

position: Sets the positioning type, including absolute, fixed, relative, and static.

quotes: Sets quotation marks to wrap an element.

resize: Declares whether elements can be resized.

right: Sets the right offset for relative and absolute positioned elements.

tab-size: Defines the length of a tab character space.

table-layout: Specifies the table layout algorithm.

text-align: Sets the horizontal alignment of text.

text-align-last: Controls the horizontal alignment of the last line of text.

text-decoration: Adds text decorations like overlines, underlines, or line-through styles.

text-indent: Sets the indentation of the first line of text.

text-overflow: Specifies how overflowed content is marked, often using an ellipsis.

text-shadow: Applies a shadow to text.

text-transform: Controls the capitalization of text.

top: Sets the top offset for relative and absolute positioned elements.

transform: Handles 2D and 3D transformations.

transform-origin: Changes the position of transformed elements.

transform-style: Renders nested elements in 3D.

transition: Specifies transition properties in one line.

transition-delay: Sets the delay before a transition effect starts.

transition-duration: Determines the duration of the transition effect.

transition-property: Specifies which CSS property the transition affects.

transition-timing-function: Defines the speed curve of the transition.

unicode-bidi: Determines whether text should be overridden to support more languages.

user-select: Disables user content selection.

vertical-align: Controls vertical alignment.

visibility: Determines whether hidden elements leave a gap.

white-space: Specifies how white spaces are handled.

width: Sets the width of an element.

word-break: Defines text-breaking rules when text reaches the end of the container.

word-spacing: Sets the size of white space between words.

word-wrap: Breaks long words and wraps them onto the next line.

z-index: Specifies the stack order of elements.

CSS Box Model Overview:

The CSS box model is used to define the dimensions and spacing of an HTML element. It consists of four main components:

Content: This is the innermost part of the element where the actual content, such as text or images, is displayed.

Padding: The padding is the space between the content and the element's border. It's used to create space within the element.

Border: The border is a visible boundary around the padding. It can have different styles, colors, and widths.

Margin: The margin is the space between the element's border and adjacent elements on the page. It's used to create space between elements.

Here's a visual representation of the CSS box model:

CSS Box Model Properties:

Width and Height:

You can set the width and height of an element using the width and height properties. These values apply to the content area.


.box {
  width: 200px;
  height: 100px;
}

Padding:

You can set the padding around the content using the padding property. It can be defined for each side (top, right, bottom, left) individually or all at once.


.box {
  padding: 10px; /* All sides */
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Border:

You can set the border of an element using the border property. This property includes sub-properties like border-width, border-style, and border-color.


.box {
  border: 2px solid #333; /* width, style, color */
}

Margin:

You can define the margin space around the element using the margin property. It can also be set for each side individually or all at once.


.box {
  margin: 20px; /* All sides */
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 15px;
  margin-left: 25px;
}

Calculating Total Element Dimensions:

To calculate the total dimensions of an element, you need to consider the content, padding, border, and margin. Here's how you calculate it:

Total Width = Width + (Padding-Left + Padding-Right) + (Border-Left + Border-Right) + (Margin-Left + Margin-Right)

Total Height = Height + (Padding-Top + Padding-Bottom) + (Border-Top + Border-Bottom) + (Margin-Top + Margin-Bottom)

Example:

Let's say you have an element with the following properties:


.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

The total dimensions of this element would be:

Total Width = 200px + (10px + 10px) + (2px + 2px) + (20px + 20px) = 264px Total Height = 100px + (10px + 10px) + (2px + 2px) + (20px + 20px) = 164px

CSS Flexbox Model Overview:

The CSS Flexbox (Flexible Box) model is a layout model that makes it easier to design complex layouts and distribute space within a container. Here are extensive notes along with some visual representations of the CSS Flexbox model.

Flexbox is designed to distribute space along a single axis (either horizontally or vertically) within a container. It allows you to create flexible and responsive layouts, making it easier to align and distribute items in a container. The main concepts of the Flexbox model include:

Flex Container: The parent element containing one or more flex items. You apply the display: flex or display: inline-flex property to turn an element into a flex container.

Main Axis: The primary axis along which flex items are laid out. It can be horizontal (row) or vertical (column).

Cross Axis: The perpendicular axis to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice versa.

Flex Items: The children of a flex container. These items are the elements you want to control and arrange within the flex container.

Here's a visual representation of the Flexbox model:

CSS Flexbox Properties:

display: flex or display: inline-flex: To create a flex container, apply this property to an element.


.flex-container {
  display: flex; /* or display: inline-flex; */
}

flex-direction: Defines the main axis of the flex container. It can be row, row-reverse, column, or column-reverse.


.flex-container {
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

justify-content: Specifies how flex items are aligned along the main axis. It can be flex-start, flex-end, center, space-between, or space-around.


.flex-container {
  justify-content: center; /* or flex-start, flex-end, space-between, space-around */
}

align-items: Defines how flex items are aligned along the cross axis. It can be flex-start, flex-end, center, baseline, or stretch.


.flex-container {
  align-items: center; /* or flex-start, flex-end, baseline, stretch */
}

flex: Sets the flexibility of a flex item. It includes three values: flex-grow, flex-shrink, and flex-basis.


.flex-item {
  flex: 1 0 auto; /* flex-grow, flex-shrink, flex-basis */
}

Example:

Let's say you have a simple flex container and two flex items:


.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1 0 auto;
}

CSS Grid Model Overview:

CSS Grid allows you to define a grid container and its grid items in rows and columns. It's a two-dimensional system, which means you can control the layout both horizontally and vertically. The main concepts of the CSS Grid model include:

Grid Container: The parent element that contains the grid items. You apply the display: grid or display: inline-grid property to make an element a grid container.

Grid Items: The children of a grid container. These are the elements that you want to position within the grid.

Grid Lines: The horizontal and vertical lines that form the grid. Grid lines separate rows and columns.

Grid Rows and Columns: Rows are horizontal divisions, and columns are vertical divisions within the grid. You can specify their sizes, positions, and alignment.

Here's a visual representation of the CSS Grid model:

CSS Grid Properties:

display: grid or display: inline-grid: To create a grid container, apply this property to an element.


.grid-container {
  display: grid; /* or display: inline-grid; */
}

grid-template-rows and grid-template-columns: Defines the size and structure of rows and columns in the grid.


.grid-container {
  grid-template-rows: 1fr 2fr; /* Row sizes */
  grid-template-columns: 1fr 2fr; /* Column sizes */
}

grid-gap and grid-row-gap/grid-column-gap: Sets the gaps between grid items and grid lines.


.grid-container {
  grid-gap: 10px 20px; /* Gap between rows and columns */
  grid-row-gap: 10px; /* Gap between rows */
  grid-column-gap: 20px; /* Gap between columns */
}

grid-template-areas: Allows you to define named grid areas within the grid, making it easier to place items.


.grid-container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Example:

Let's say you have a simple grid container with rows and columns defined:


.grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

.grid-item {
  grid-column: 2 / 3; /* Item spans from column line 2 to 3 */
  grid-row: 1 / 3;    /* Item spans from row line 1 to 3 */
}

In this example, the grid container is divided into rows and columns, and a grid item spans across specific rows and columns.