CSS

1 – Introduction

<link rel="stylesheet" href="styles.css">
<style>
    p {
    color: red;
    }
</style>

<h1 style="color:blue">CSS Introduction</h1>
<p>Cascale Style Sheets</p>
<span>by Kronos</span>

span{
    color: green;
}

CSS (Cascade Style Sheets) specifies the visual presentation of HTML document
You can style everything in an HTML document
With one CSS file you can change the layout to multiple HTML documents
There are 3 ways to use CSS:
inline → CSS is applied directly to an HTML element
internal → CSS is defined in head element of an HTML document
external → CSS is defines in a separate file. You import this file using link element inside the head element

—2nd
Basic Syntax: selector { property: value; }
selector → selects the HTML element. It can be one element or groups of elements
common selectors → element (p, span), classes(.classname), ID(#idname), attribute([attribute=”value”])
property → various characteristics of an HTML element that can be controlled
color, font-size, margin,padding, border etc
value → the value you want to assign to the property
You can have multiple properties in a selector and always ends with ;

2 – comments and selectors

    <!-- Type selector example -->
    <p>This is a paragraph.</p>

    <!-- Class selector example -->
    <button class="button">Click me!</button>

    <!-- ID selector example -->
    <h1 id="header">Header</h1>
    <h2>Header 2</h1>

    <!-- Attribute selector example -->
    <input type="text" placeholder="Enter your text here">

    <!-- Pseudo-element selector example -->
    <input type="text" placeholder="Enter some text">

    <!-- Child selector example -->
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <!-- Descendant selector example -->
    <div class="container">
      <p class="content">This is some content.</p>
    </div>

    <!-- Adjacent sibling selector example -->
    <h2 class="header">Header</h2>
    <footer class="footer">Footer</footer>

    <!-- Subsequent sibling selector example -->
    <h2 class="header">Header</h2>
    <div class="content"></div>

      <!-- Pseudo-class selector example -->
    <a href="#">Click me!</a>

      /* Element selector */
      p {
        font-size: 16px;
      }

      /* Class selector */
      .button {
        background-color: #FFC;
      }

      /* ID selector */
      #header {
        color: red;
      }

      /* Attribute selector */
      [type="text"] {
        border: none;
      }

      /* Pseudo-element selector */
      input::placeholder {
        color: gray;
      }

      /* Child selector */
      nav > ul {
        list-style-type: none;
      }

      /* Descendant selector */
      .container .content {
        background-color: #FFC;
      }

      /* Adjacent sibling selector */
      .header + .footer {
        text-align: center;
      }

      /* Subsequent sibling selector */
      .header ~ .footer {
        margin-top: 10px;
      }

       /* Pseudo-class selector */
      a:hover {
        text-decoration: underline;
      }

      h1, h2 {
       background-color: red;
      }

      /* Multiline
          comment
          */

element selector → targets all elements with a specific tag name.
p selector target all the p elements
class selector → targets all the elements with a specific class.
All CSS classes start with a dot .
.button targets the element with class=”button”
id selector → targets only one element with a specific id
id classes start with the a hash #

header targets the element with id=”header”

attribute selector → targets elements with specific attributes
It can include wildcards characters like , ^, $ and ~ [attribute^=value] → attribute value starts with specific value [attribute=value] → attribute value contains the specific value
[attribute$=value] → attribute value ends with the specific value
[attribute!=value] → attribute value is not equal to the specific value
selects the element with the attribute [type=”text”]

pseudo element selector → CSS provides a set of pseudo elements that allow you to style certain parts of an element
Here are some pseudo-element selector:
::before → inserts content before the content of the selected element
::after → inserts content after the content of the selected element
::first-line → selects the first line of a block-level element
::first-letter → selects the first letter of a block-level element
::placeholder → selects the placeholder of an input or textarea element
it selects the placeholder of the input element

—4th
child selector → targets only direct children of an element.

is used to separate the two selectors
nav > ul selects the ul child of the nav element
descendant selector → targets any descendant of a parent element
space is used to separate the two selectors
it selects the element with .content class with parent element with .container class
/* */ are used for comments in CSS
here is a multiline comment

–5th
adjacent sibling selector → targets the sibling element that directly follows another element

• is used to separate the two selectors
  it selects the element with class .footer that…
  is the direct sibling of the element with class .header
  general sibling selector → targets all the elements preceding a specific element
  ~ is used to separate the two selectors
  it selects the elements with class .footer that…
  are siblings of the element with class .header

–6th
pseudo-class selector → targets elements based on their state.
common pseudo classes are :hover, :active and :focus
it targets the a element on hover state.
group selector → targets multiple elements at a time.
, is used to separate the elements
it selects h1 and h2 and changes their background color

3 – Units

    <div class="container">
        <h1>Responsive Typography and Image Scaling</h1>
        <p>This text has a font size of 2.5em relative to the base font size, making it scalable.</p>
        <img src="example-image.jpg" alt="Example Image"> <!-- Responsive image scaling -->
    </div>

body {
    font-size: 16px;
}

.container {
    width: 80%; 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 1rem; 
}

h1 {
    font-size: 2.5em; 
}

p {
    line-height: 1.6; 
}

img {
    width: 100%; 
    max-width: 600px; 
}

units are used to specify various properties like width, height, margin, padding, font-size, etc
pixels (px) → a fixed size relative to the device screen
Percentage (%) → Relative to another value
usually parent element, viewport width, or viewport height
Em (em) → Relative to the current font size. em is equivalent to the font-size specified for the current element.
This makes text scaling easier and more consistent across different devices and texts.
Rem (rem) → Similar to em, but relative to the root font size (html tag’s font-size)
It’s often used as a unit for scalable typography or global spacing.

vw → Relative to viewport width (percentage of full screen width).
vh → Relative to viewport height (percentage of full screen height).
vmin and vmax → Relative to the lesser/greater dimension of the viewport.
deg → Angle in degrees.
rad → Angle in radians.
grad → Angle in gradians (approximately 1/400 of a circle).
turn → Full circle (360 degrees or 2π radians).

ex → Relative to the x-height (approximately 0.5 of the font size).
lh → It is relative to the line height of the element.
rlh → It is relative to the line height of the root element.
ch → Width of a character.
fr → Fraction for grid layout.
cm, mm, in, pt, pc → Absolute length units in …
centimeters, millimeters, inches, points, picas, and pixels respectively.

4 – colors and color properties

p {
    color: red; 
}

.container {
    background-color: #123456; 
}

body {
    background-color: rgb(255, 0, 0); 
}

.hsl-blue {
    background-color: hsl(240, 100%, 50%); 
}


div {
    background-color: rgba(255, 0, 0, 0.5); 
}

Colors in CSS can be specified by predefined names →
red, blue, green, yellow, orange, purple, black, white, gray and more
by hexadecimal values → #00FF00, by rgb → rgb(0,0,0) and hsl → (0, 100%, 50%)
rgb uses red, green, blue values from 0 to 255
hsl uses hue (around the color wheel), saturation(how vibrant is it) …
…and lightness( how much white or black is in it)
you can also use rgba and hsla to specify the opacity, 0 → fully transparent and 1 → fully opaque
rgba(255, 0, 0, 0.5) and hsla(22, 55%, 64%, 0.7)

div {
    color: #333; 
    background-color: rgba(255, 0, 0, 0.5); 
    border-color: hsl(0, 100%, 75%);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to right, red, blue);
    background-image: radial-gradient(circle, red, blue); 
    background-image: conic-gradient(from red, blue);
    background-image: repeating-linear-gradient(45deg, red 10%, blue 20%);
}

a {
    opacity: 0.7;
    mix-blend-mode: multiply; 
}

input {
  caret-color: red;
}

...
    filter: hue-rotate(180deg);
    filter: brightness(50%);
    filter: contrast(200%)
    filter: grayscale(100%);
    filter: saturate(200%);
    filter: invert(100%);
    filter: sepia(70%);
...


color → sets the text color
background-color → sets tje background color
border-color → sets the border color
text-shadow → adds shadow to a text and you can specify the color too
box-shadow → adds shadow to an element and you can specify the color too
opacity → specifies the element's opacity values can be from 0 to 1
caret-color → is used to set the color of the text input cursor

CSS supports gradients backgrounds
background-image → adds a background image, but you can also specify a color
linear-gradient → defines a linear-falling gradient from left to right, top to bottom etc.
radial-gradient → creates a radial gradient like a circle or an ellipse
conic-gradient → creates a conical gradient from the centre towards a specific angle
you can also have repeating gradients. For that exist the properties…
repeating-linear-gradient, repeating-radial-gradient

filter → applies graphical effects like blur , contrast and more
hue-rotate → rotates the color wheel by a specified angle
brightness → changes the brightness
contrast → changes the brightness
grayscale → convets an image to a grayscale
saturate → changes the saturation
invert → inverts the colors
sepia → converts an image to sepia tones

5 – background related properties

.red-background {
  background-color: red;
}

.gradient-background {
  background-image: linear-gradient(to right, red, orange);
}

.background-image {
  background-image: url("path/to/image.jpg");
}

.repeated-background {
  background-image: url("path/to/image.jpg");
  background-repeat: repeat;
}

.positioned-background {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-position: center top; 
}

.fixed-background {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.clipped-background {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-clip: padding-box; 
}

.origin-background {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-origin: border-box; 
}

.scaled-background {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-size: cover; 
}

In CSS there are several properties to customise one element’s background
background-color → sets the color behind the content of the element.
it can accept color keywords like “blue”, hexadecimal codes, rgb/rba and…
hsl/hsla values and also gradients backgrounds.
it sets the background color to red
background-image → sets the background for an element to an image.
It also accepts gradients
it sets the backround to a linear gradient

background-repeat → specifies how a background image will be repeated
You can use repeat, no-repeat, repeat-x, repeat-y, space, round
It sets the background to an image
It sets to repeat the background image
background-position → sets the position relative to its container
you can set one or two values for horizontal and vertical positioning
you can use left, right, top, bottom, center, and of course % percentage values
it sets the background position center horizontally and top vertically

background-attachment → specifies whether the image will scroll with the content
you can use fixed, local, scroll, initial or inherit
It sets the background image to fixed, it will not scroll with the page
background-clip → specifies the clipping region of the background…
border-box is the default value and extends to the border…
padding-box extends to the inside of the border…
and content-box extends to the content box
It sets the background image to extend to the inside of the border

background-origin → sets the positioning of the origin point. Values:
border-box sets the origin to upper left corner of the border…
padding-box sets the origin to upper left corner of padding edge…
content-box sets the origin to upper left corner of the content…
it sets sets the origin to the upper left corner of the border
background-size → controls the scaling of the background image
you can use %, px values. Also auto → original size
cover → image is resized to fully fills the container, contain → is resized to be fully visible

6 – fonts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Font Styling Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="custom-font">This is a paragraph with custom font styling.</p>
</body>
</html>

.custom-font {       
  font-size: 16px;          
  font-family: Arial, sans-serif; 
  font-style: italic;          
  font-weight: bold;          
}

In CSS you can customize the font style of a web document
font-family → specifies the font family to be used for a text elements
You can add more than one by separating them with comma ‘,’
It sets the font family to be Arial and then sans-serif
font-size → specifies the size of the font for a text element
You can use px, em, rem and % but also keywords like:
medium, x-small, small, large, x-large, smaller, larger etc
It sets the size to 16px;

font-weight → specifies the boldness of a font.
You can use keywords like normal, bold, bolder, lighter but also…
numerical values from 100 to 900
it sets the font weight to bold
font-style → specifies the style of a font
You can use normal, italic, oblique initial and inherit
initial and inherit can be used to almost all properties
It sets the style to italic

7 – line-height and text-decoration

<h1>This is a Header 1</h1>
<h2>This is a Header 2</h2>
<h3>This is a Header 3</h3>
<p>This is a paragraph with some example text. Notice how the lines are spaced out according to the `line-height` property value set to 1.5em. You can change this value to adjust the spacing as needed.</p>

body {
        font-family: Arial, sans-serif; 
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

p {
    line-height: 1.5em; /* Adjust the value as needed for desired spacing */
    font-weight: normal;
    color: #333;
    }
h1 {
        text-decoration: underline; /* Underlines Headers 1-3 */
        font-weight: bold;
    }
h2{
    text-decoration: overline dotted green;
}

h3{
    text-decoration: overline underline purple;
}

line-height → specifies the space between the text lines
it can take a number, a length, a percentage and the keyword normal
it sets the line-height to 1.5em
text-decoration → adds decoration to the text
it can take underline, overline then dotted, wavy, solid, double and then color
it sets h2 to overline dotted and green color
it sets h3 to overline underlina and purple color

8 – text-align, letter spacing, word-spacing and text-transform

<div class="left-aligned">This text is left-aligned within the first div.</div>
<div class="center-aligned">This text is centered within the Second div.</div>
<div class="right-aligned">This text is right-aligned within the Third div.</div>
<p class="normal-spacing">This text has normal letter spacing.</p>
<p class="expanded-spacing">This text has expanded letter spacing.</p>
<p class="normal-spacing">This text has normal word spacing.</p>
<p class="expanded-spacing">This text has expanded word spacing.</p>
<p class="uppercase">This text is in uppercase.</p>
<p class="capitalize">this text is capitalized.</p>

div.left-aligned {
    text-align: left; /* Aligns the text to the left */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

div.center-aligned {
    text-align: center; /* Centers the text within the div */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

div.right-aligned {
    text-align: right; /* Aligns the text to the right */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

p.normal-spacing {
    letter-spacing: normal; /* Default spacing between letters */
    font-size: 18px;
}

p.expanded-spacing {
    letter-spacing: 2px; /* Increases the space between letters */
    font-size: 18px;
}

p.normal-spacing {
    word-spacing: normal; /* Default spacing between words */
    font-size: 18px;
}

p.expanded-spacing {
    word-spacing: 2px; /* Increases the space between words */
    font-size: 18px;
 }   

p.uppercase {
    text-transform: uppercase; /* Converts all letters to uppercase */
    font-size: 18px;
}

p.capitalize {
    text-transform: capitalize; /* Capitalizes the first letter of each word */
    font-size: 18px;
    }     

text-align → specifies how the text will be aligned within its parent element
it can take start, end, left, right, center, justify, match-parent
it sets the alignment to left
it sets the alignment to center
it sets the alignment to right
letter-spacing → sets the space between the letters in a word
it can take normal keyword and length values like em, px etc
it sets the space to normal
it sets the space to 2px

word-spacing → sets the space between words
it can take the keyword normal, and length values like px, em etc;
example 1 with normal value
example 2 with 2px value
text-transform → changes the appearance of the text by capitalizing or the opposite
it can take capitalize, uppercase, lowercase and none keywords
example 1 with uppercase value
example 2 with capitalize value

9 – text-indent, vertical-align, text-align-last, direction properties

<p class="indented">This paragraph has a left indentation of 40 pixels.</p>
<p class="no-indent">This paragraph does not have any indentation.</p>
<div class="container">
    <span class="inline">This is a span with <span style="font-size: 20px; vertical-align: top;">top</span> alignment.</span>
    <span class="inline">This is another span with middle alignment.</span>
    <span class="inline">This one has bottom alignment.</span>
</div>

<p class="left-aligned-last">This is a paragraph that will be left aligned with the last line of text. It's quite long and has a bunch of words to demonstrate how this property works.</p>
<p class="right-aligned-last">This paragraph will have its last line right aligned. Again, it is quite long and has more words than the previous one.</p>

<div class="ltr">This is a left-to-right language (e.g., English) block.</div>
<div class="rtl">This is a right-to-left language (e.g., Arabic, Hebrew) block.</div>

p.indented {
    text-indent: 40px; 
    font-size: 18px;
}

p.no-indent {
    text-indent: none; 
    font-size: 18px;
}

.container {
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
}

.inline {
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 20px; 
}

p.left-aligned-last {
    text-align: justify; 
    text-align-last: left; 
    font-size: 18px;
    border: 1px solid #ddd;
}

p.right-aligned-last {
    text-align: justify;
    text-align-last: right;
    font-size: 18px;
    border: 1px solid #ddd;
}

div.ltr {
    direction: ltr;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

div.rtl {
    direction: rtl;
    border: 1px solid #ddd;
}

text-indent → controls the indentation to the first line of a block element
values → length values (mm, px), percentage values (%) and global values(inherit, initial etc)
example 1 → Indents the first line of text by 40 pixels
example 2 → Removes any indentation from the first line of text
vertical-align → aligns the inline/inline-block/table cell element vertically inside its parent
values → baseline, sub, super, text-top, text-bottom, middle…
top, bottom and of course length(em, px etc) and percentage values (%)
example 1 → centers the child elements vertically
example 2 → centers these elements with their parent (the .container div) vertically

text-align-last → controls the alignment of the last line of text within a block element
values → start, end, left, right, center, justify and global values(inherit, initial…)
example 1 → aligns the last line of the paragraph to the left
example 2 → aligns the last line of the paragraph to the right
direction → controls the the text direction within a block element
values → ltr, rtl and global values(inherit, initial…)s
example 1 → This will make the text read from left to right
example 2 → this will make the text read from right to left

10 – white-space, text-emphasis and text-shadow properties

<p class="normal-white-space">This is some normal text with a bunch of spaces and words.</p>
<p class="nowrap-white-space">This is Some nowrap text, but the spaces are not preserved or wrapped.</p>
<p class="pre-white-space">This is pre text, which preserves both spaces and line breaks, but it doesn't wrap the text.</p>
<p class="preline-white-space">This is preline text, which preserves spaces and collapses consecutive whitespace characters into a single space, and wraps lines at word boundaries.</p>

 <p class="fill-emphasis">This is some fill emphasis text with a custom symbol for emphasis marks (default).</p>
    <p class="before-emphasis">This is Some before emphasis text with an added dot in front of each word.</p>
    <p class="after-emphasis">This is Some after emphasis text with an added dot at the end of each word.</p>
    <p class="emphasis-combined">a shorthand for text-emphasis style and text-empasis-color</p>

<p class="default-shadow">This is Some default shadow text with a black shadow around it (default).</p>
<p class="custom-shadow">This is Some custom shadow text with two shadows added for depth. The first shadow has a dark, horizontal offset to the left of the text and a white shadow behind it, while the second shadow has a lighter, vertical offset to the right of the text.</p>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

p.normal-white-space {
    white-space: normal;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.nowrap-white-space {
    white-space: nowrap; 
    border: 1px solid #ddd;
}

p.pre-white-space {
    white-space: pre; 
    border: 1px solid #ddd;
}

p.preline-white-space {
    white-space: pre-line; 
    border: 1px solid #ddd;
}

  p.fill-emphasis {
    text-emphasis: fill; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.before-emphasis {
    text-emphasis: before "•"; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.after-emphasis {
    text-emphasis: after "•"; 
    border: 1px solid #ddd;
}

p.emphasis-combined {
    text-emphasis: filled double-circle #ffb703;
    border: 1px solid #ddd;
}

p.default-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
        border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.custom-shadow {
    text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3), 2px 2px 6px rgba(255, 255, 255, 0.7); 
    border: 1px solid #ddd;
}

white-space → specifies how spaces, tabs and newlines are handled
values: normal, nowrap, pre, pre-wrap, pre-line, break-spaces
example 1 → This is the default behavior, it wraps text and maintains spaces
example 2 → this prevents wrapping of text and collapses all consecutive…
whitespace characters into a single space
example 3 → This preserves both spaces and line breaks, but it doesn’t wrap the text
example 4 → this preserves spaces and collapses consecutive whitespace characters into a single space…
and wraps lines at word boundaries

text-emphasis applies emphasis to the text with marks
it is a shorthand for text-emphasis style and text-empasis-color
values → filled, open, filled sesame, open sesame, strings and color
example 1 → this adds a fill style for the emphasized text (default)
example 2 → This adds an emphasis mark before each word
example 3 → this adds an emphasis mark after each word
example 4 → a shorthand for text-emphasis style and text-empasis-color

text-shadow adds shadow effects around the text
syntax → text-shadow: offset-x | offset-y | blur-radius | color
it accepts comma-separated list of shadows
example 1 → this adds a default shadow effect around the text
example 2 → This adds a custom shadow effect with two horizontal and vertical offsets
text-shadow: 3px 6px → uses the default color and blur radius
text-shadow: blue 3px 6px → sets the color and the x/y offsets

11 – line-break and word-break properties

<p class="line-break-auto">This is a very long sentence without any specified line breaks. By default, the browser will break the word at spaces or punctuation marks to fit within the container width.</p class="line-break-auto">
<p class="line-break-normal">This is a very long sentence with irregular words and symbols like "--" and "-". By setting the `line-break: normal;` property, we can allow line breaks between words or within a word. However, it may not work as expected in all browsers.</p class="line-break-normal">
<p class="line-break-anywhere">This is a very long sentence without any spaces or punctuation marks and no line breaks are allowed. Setting `line-break: anywhere;` will allow line breaks at any point in the text block, but it may not work as expected in some browsers.</p class="line-break-anywhere">

<p class="word-break-normal">This is a very long sentence without any specified word breaks. By default, the browser will break the word at whitespace characters to fit within the container width.</p class="word-break-normal">
<p class="word-break-break-all">This is a very long sentence with irregular words and symbols like "--" and "-". By setting the `word-break: break-all;` property, we can force words to break at any point in the text block.</p class="word-break-break-all">
<p class="word-break-keep-all">This is a very long sentence without any spaces or punctuation marks and no word breaks are allowed. Setting `word-break: keep-all;` will prevent words from breaking in the middle of a word.</p class="word-break-keep-all">

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.line-break-auto {
    line-break: auto; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.line-break-normal {
    line-break: normal; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.line-break-anywhere {
    line-break: anywhere; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-normal {
    word-break: normal; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-break-all {
    word-break: break-all; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-keep-all {
    word-break: keep-all; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

line-break specifies how line break.
values: auto → uses the default break rule
normal → break using the most common rule
loose → uses the least restrictive rule
strict → uses the most stringent rule
anywhere → no need for further explanation
example 1 → this is the default value, and it allows line breaks between words or within a word
example 2 → This allows line breaks between words or within a word
example 3 → This allows line breaks at any point in the text block

word-break controls the behavior of line breaks
values: normal → default, words break only at whitespace characters
break-all → words break in any point of the text block
keep-all → words break only at whitespace characters
break-word (deprecated)
example 1 → this is the default value and it allows words to break at whitespace characters
example 2 → This allows words to break at any point, even in the middle of a word (like “–” and “-“)
example 3 → this allows words to break only at whitespace characters, not in the middle of a word

12 – text-combine-upright, text-underline-offset, text-underline-position and text-overflow properties

<p class="text-combine-upright-none">This is a sample text without any combined characters.</p>
<p class="text-combine-upright-all">This is a sample text with all characters combined using the 'All' value. However, it may not be supported in some browsers or for all languages.</p>
<p class="text-underline-offset-auto">This is a sample text with an automatically placed underline below it.</p>
<p class="text-underline-offset-2px">This is a sample text with the underline offset down by 2 pixels.</p>

<p class="text-underline-position-auto">This is a sample text with an automatically placed underline below It.</p class="text-underline-offset-5px">
<p class="text-underline-position-under">This is a sample text with the underline below the text.</p class="text-underline-offset-5px">
<p class="text-underline-position-right">This is a sample text with the underline to the right of the text.</p class="text-underline-offset-5px">
<p class="text-underline-position-left">This is a sample text with the underline to the left of the text.</p class="text-underline-offset-5px">

<div class="overflow-clip">This is a sample text that will be clipped if it exceeds the box's width.</div>
<div class="overflow-ellipsis">This is a sample text that will show an ellipsis (...) If it exceeds the box's width.</div>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.text-combine-upright-none {
    text-combine-upright: none; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-combine-upright-all {
    text-combine-upright: all;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-offset-auto {
    text-decoration: underline; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-offset-2px {
    text-decoration: underline; 
    text-underline-offset: 2px; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-auto {
    text-decoration: underline;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-under {
    text-decoration: underline; 
    text-underline-position: under; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

   .text-underline-position-right {
    text-decoration: underline; 
    text-underline-position: right; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-left {
    text-decoration: underline; 
    text-underline-position: left; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.overflow-clip {
    width: 100px;
    white-space: nowrap;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-overflow: clip; 
}

 .overflow-ellipsis {
    width: 100px;
    white-space: nowrap;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-overflow: ellipsis; 
}

text-combine-upright → controls how characters within a word are combined when they exceed the size of its container
values → none, all and global values
example 1 → This is the default value and it does not combine characters
example 2 → this value combines all characters in a word, regardless of their shape
text-underline-offset → sets the distance of an underline decoration
values → auto, length( 3px…), percentage (%) and global values
example 1 → this is the default value and it automatically places the underline below the text
example 2 → This value moves the underline down by 2 pixels

text-underline-position → specifies the position of the underline
values → auto, under, left, right and global values
example 1 → This is the default value and it places the underline below the text
example 2 → this value places the underline below the text
example 3 → this value places the underline to the right of the text
example 4 → This value places the underline to the left of the text

text-overflow → sets how hidden content will be displayed
values → clip, eclipsis and global values
global values: inherit → values should be changed to the inherited values
initial → values to the initial values
unset → if they inherit then to inherited values otherwist to initial values
and revert, revert-layer
example 1 → This value clips the overflow text
example 2 → This value adds an ellipsis (…) to indicate that text has been clipped

13 – image-orientation, object-fit and object-position properties

<img class=".from-image" src="oriole.jpg" alt="Orientation taken from the image" />
<img src="oriole.jpg" alt="none" />
<img class="image-pixelated" src="your-image.jpg" alt="Your Image">
<img class="image-crisp" src="your-image.jpg" alt="Your Image">
<p><span class="image-contain"><img src="path/to/your/image.jpg" alt="Example Image 1" class="contain"></span></p>
<p><span class="image-cover"><img src="path/to/another/image.jpg" alt="Example Image 2" class="cover"></span></p>

<p class="image-position"><img src="path/to/your/image.jpg" alt="Example Image 1" class="top-left"></p>
<p class="image-position"><img src="path/to/another/image.jpg" alt="Example Image 2" class="center-center"></p>
<p class="image-position"><img src="path/to/yet/another/image.jpg" alt="Example Image 3" class="bottom-right"></p>

img{
    width: 100px;
}

.from-image {
  image-orientation: from-image; orientation from image
}

.image-pixelated {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    image-rendering: pixelated; 
}

 .image-crisp {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    image-rendering: crisp-edges; 
}
.image-contain {
    width: 200px;
    height: 150px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-cover {
    width: 200px;
    height: 150px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

img.contain {
    object-fit: contain; 
    max-width: 100%;
    max-height: 100%;
}

img.cover {
    object-fit: cover; 
    max-width: 100%;
    max-height: 100%;
}

.image-position {
        width: 200px;
        height: 150px;
        border: 1px solid #ddd;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    img.top-left {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: top left; 
    }

    img.center-center {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: center; 
    }

    img.bottom-right {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: bottom right; 
    }

image-orientation → specifies the orientation of an image
values → none, from-image and global values
example → sets the orientation from the image EXIF data
image-rendering → controls how browsers render images
values → auto, crisp-edges, pixelated and global values
example 1 → this value forces the image to be rendered with pixelated edges
example 2 → ensures that the image has sharp edges

object-fit → specifies how the content of an image and video will be resized to fit its container
values → contain, fill, cover, none, scale-down
it has no effect to other replaced elements such as iframe, embed and fencedframe
example 1 → scales the image to fit within the container without distorting its aspect ratio
example 2 → scales and crops the image to fill the entire container while maintaining its aspect ratio
fill → fills its container and even changes the aspect ratio
none → not resized
scale-down → like none or contain, to the smallest version

object-position → sets the alignment of an image, video element within its container
values → top, bottom, left, rights, center, percentage, length values and…
offset values like bottom 20px right 30px
example 1 → positions the image’s top left corner at the top left of the container
example 2 → this centers the image both horizontally and vertically within the container
example 3 → positions the image’s bottom right corner at the bottom right of the container

14 – block model

<div class="boxmodel">
    <div class="margin">
        <p>Margin</p>
        <div class="border">
            <p>Border</p>
            <div class="padding">
                <p>Padding</p>
                <div class="content">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
</div>

.border {
    padding: 45px;
    width: 80%;
    height: 100%;
    position: relative;
    background-color: rgb(243, 188, 80);
}

.margin {
    background: #d2cece;
    padding: 45px;
    width: 100%;
    height: 100%;
    position: relative;
    border: 2px dashed #bbb;
}

.padding {
    padding: 45px;
    width: 90%;
    height: 100%;
    position: relative;
    background: #d2cece;
}

.content {
    padding: 20px;
    width: 90%;
    height: 100%;
    position: relative;
    background: white;
    border: 2px dashed #bbb;
}

.box {
  width: 150px;
  height: 50px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Box Model is a fundamental concept in CSS
It defines how elements structured and displayed
Content Area → This is the actual space occupied by the element’s content
Padding → this is the space between the content area and the border
it creates some space around the content to create visual separation.
Border → this is the line that separates the padding from the content area.
Margin → This is the space between an element and its adjacent elements.

standard CSS box model → The box size of an elements is defined by its width and height…
plus border and padding
.box width → 150 + 5 + 5 + 25 + 25 = 210px
.box height → 50 + 5 + 5 + 25 + 25 = 110px
alternative CSS box model → The box size of an elements is defined by its width and height
The content area width and height is calculated by subtract padding and border
to use the alternative model for an element, use box-sizing: border-box
for all the elements use…
*, *::before, *::after{ box-sizing: border-box; }

15 – position property

<div class="static">This div is statically positioned.</div>
<div class="relative">This div is positioned relative to its normal flow.</div>
 <div class="absolute">This div is positioned absolutely relative to its nearest positioned ancestor or the `<html>` root.</div>
<div class="fixed">This div is positioned fixed relative to the viewport.</div>
<div class="sticky">This div is positioned sticky relative to its nearest positioned ancestor or the `<html>` root.</div>

.static {
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

 .relative {
    position: relative;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.absolute {
    position: absolute;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.fixed {
    position: fixed;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.sticky {
    position: sticky;
    top: 20px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

position static and relative

position → controls the positioning of an element in a page.
values → static, relative, absolute, fixed, sticky and global values
static → default. Elements remain in their normal flow.
Positional properties are not taken into account, top, right, bottom, left and z-index
relative → the element is positioned relative to their normal position.
With top, right, left and right you specify its offset for its natural position

position fixed, sticky and absolute

fixed → the element is removed from its normal flow.
top, right, bottom and left specify the position relative to the viewport
sticky → the element behaves like relative…
until it reaches a certain threshold, top or bottom…
then it becomes fixed relative to its parent or html element
absolute → the element is removed from its normal flow and is positioned relative to its parent
top, right, left and bottom specify its offset from its parent

16 – display property

<div class="inline">This span is inline.</div>
<span class="inline">And this span too.</span>
<div class="block">This div is block.</div>
<div class="inline-block">This div is inline-block.</div>
<span class="inline-block">And this span too.</span>
<div class="flex">This div is flex.</div>
<div class="grid">This div is grid.</div>

.inline {
    display: inline;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

 .block {
    display: block;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

.inline-block {
    display: inline-block;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

 .flex {
    display: flex;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

.grid {
    display: grid;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

a – display and inline value

display → controls how an element is displayed on a webpage.
It sets whether the element behaves like a block, inline or other types of elements
values → inline, block, inline-block, flex, inline-flex, grid, inline-grid and flow-root
inline → the element will take up only as much horizontal space as necessary for its content
It does not generate line breaks before or after itself.
You cannot set its dimensions, width and height
example → display.inline;

b – block and inline-block display values

block → it is the default value for block elements (div, p, h1-h6). The element will start on a new line
It will also take the full width of its parent and it will create a line break after itself
You can also set its dimensions, width and height
example → display:block
inline-block → it behaves like a block element but it maintains the inline behavior, no line breaks before and after
You can also set its dimensions(width, height), margin, border and padding properties
example → display: inline-block;

c – flex and grid display values

flex → behaves like a block element but lays out its contents according to flexbox model
In short it arranges its elements in single row or column
It allows more flexibility in their alignment, order ect.
example → display: flex;
grid → behaves like a block element but lays out its contents according to grid model
In short it arranges its elements in a two-dimensional grid
It allows more complex arrangment of elements
example → diplay: grid;
More about flexbox and grid in the future

17 – margin, padding and border properties

<div class="box">This box has all margins set to 20 pixels.</div>
<div class="box-individual">This box has individual margins: top=10px, right=20px, bottom=30px, left=40px.</div>

<div class="box-padding">This box has all paddings set to 20 pixels.</div>
<div class="box-padding-individual">This box has individual paddings: top=10px, right=20px, bottom=30px, left=40px.</div>

<div class="box-border">This box has a solid black border.</div>
<div class="box-border-dashed">This box has a dashed red border</div>

.box {
    width: 200px; 
    height: 100px; 
    background-color: #ddd; 
    margin: 20px; 
}

.box-individual {
    width: 200px; 
    height: 100px; 
    background-color: #aaa; 
    margin-top: 10px; 
    margin-right: 20px; 
    margin-bottom: 30px; 
    margin-left: 40px; 
}

.box-padding {
    width: 200px; 
    height: 100px; 
    background-color: #ddd; 
    padding: 20px; 
}

.box-padding-individual {
    width: 200px; 
    height: 100px; 
    background-color: #aaa; 
    padding-top: 10px; 
    padding-right: 20px; 
    padding-bottom: 30px; 
    padding-left: 40px; 
}

.box {
    width: 200px; 
    height: 100px; 
    background-color: #ddd; 
    border: 1px solid #000; 
}

.box-dashed {
    width: 200px; 
    height: 100px; 
    background-color: #aaa; 
    border: 2px dashed red; 
}

a – margin property

margin → specifies the space around an element
You can specify 1 value for each side(top, right, bottom, and left), 1 value for all sides…
2 values 1st for top & bottom and 2nd left & right and
3 values 1st for top, 2nd for left & right and 3rd for bottom
You can also specify each side separately with margin-top|right|bottom|left
values → length, percentage and auto(selects the suitable margin to use)
margin: 20px; → Set all four margins to 20 pixels
margin-top: 10px; → sets top margin margin-right: 20px; → sets right margin
margin-bottom: 30px; → sets bottom margin margin-left: 40px; → sets left margin

b – padding property

padding → specifies the space between border and the element content
You can specify 1 value for each side(top, right, bottom, and left), 1 value for all sides…
2 values 1st for top & bottom and 2nd left & right and…
3 values 1st for top, 2nd for left & right and 3rd for bottom
You can also specify each side separately with padding-top|right|bottom|left
values → length and percentage
padding: 20px; → Set all four paddings to 20 pixels
padding-top: 10px; → sets top padding padding-right: 20px; → sets right padding
padding-bottom: 30px; → sets bottom padding padding-left: 40px; → sets left padding

c – border property

border → is a shorthand property for border-width, border-style and border-color. It is used to set a border to all 4 sides
1st value is the width, 2nd the style and 3rd the color
You can specify one of the three values if you need to
You can also specify each side separately with border-top|right|bottom|left
width values → thin, medium and thick keyword and length values
style values → none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
color values → color keywords, hexadecimal values, rgb(a) abd hsl(a) values
border: 1px solid #000; → Set a solid black border with width of 1px
border: 2px dashed red; → Set a dashed red border with width of 2px

18 – Grid Layout Introduction

<div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <!-- Add more grid items as needed -->
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px; 
    grid-gap: 10px; 
}

a – Introduction

CSS Grid is a powerful layout system introduced in CSS3
It provides a flexible way to create complex responsive designs by defining rows and columns.
It’s a two-dimensional layout model
display: grid; → Enable the element to be a grid container
grid-template-columns: 100px 200px 100px; → Creates three columns with specific size for each one
Adding more children inside the parent with display: grid…
it will follow the rules from the grid-template-columns
grid-gap → Set gap between rows and columns

b – grid-template-columns, grid-template-rows properties

grid-template-columns → defines the number and size of columns within a grid container.
grid-template-rows → defines the number and size of rows within a grid container.
Both accept the same values
values → length values(px etc), percentage and fraction(fr)
fr → stands for “Fraction of Available Space”
The total available space is divided equally among all fractional units
grid-template-columns: 1fr 2fr 3fr; → the first column will take up one third of the available width,
the second column will take up two thirds,
and the third column will take up all remaining space.

c – value keywords for grid-template-columns and grid-template-rows

The values can also be keywords:
max-content → should take up the maximum possible amount of space,
min-content → should take up the minimum possible amount of space.
minmax(min, max) → specifies the minimum and maximum possible dimensions for grid items.
auto → represents the range between the minimum and maximum
grid-template-columns: minmax(100px, 200px) auto;
the first column will have a minimum width of 100px and a maximum width of 200px.
The second column will occupy any remaining available space within the grid
repeat → creates columns and rows by repeating a pattern
repeat(3, 100px); → creates a grid with three columns, each being exactly 100px wide

19 – grid-template-areas, grid-area and grid-template

<div class="grid-container">
    <div class="cell header">Header</div>
    <div class="cell sidebar">Sidebar</div>
    <div class="cell main">Main Content</div>
    <div class="cell content">Additional Content</div>
    <div class="cell footer">Footer</div>
</div>

<div class="grid-container-area">
    <div class="cell item1">Item 1</div>
    <div class="cell item2">Item 2</div>
    <div class="cell item3">Item 3</div>
</div>

<div class="grid-container-template">
    <div class="cell header">Header</div>
    <div class="cell sidebar">Sidebar</div>
    <div class="cell main">Main Content</div>
</div>

.grid-container {
        display: grid;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: 50px auto 70px;
        grid-template-areas:
            "header header header"
            "sidebar main content"
            "footer footer footer";
        gap: 10px;
        padding: 10px; 
    }

.header { 
    grid-area: header; 
    background-color: #f0e68c; 
}

.sidebar { 
    grid-area: sidebar; 
    background-color: #add8e6; 
}

.main { 
    grid-area: main; 
    background-color: #90ee90;  
}

.content { 
    grid-area: content; 
    background-color: #b0c4de; 
}

.footer { 
    grid-area: footer; 
    background-color: #f5deb3; 
}

.cell { 
    border: 1px solid black; 
    padding: 10px; 
}

.grid-container-area {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: 50px auto 70px;
    gap: 10px; 
    padding: 10px; 
}

.item1 { 
    grid-area: 1 / 1 / span 3 / 2; 
    background-color: #f0e68c; 
}

.item2 { 
    grid-area: 1 / 3 / span 2 / span 2;
    background-color: #add8e6; 
}

.item3 { 
    grid-area: 2 / 1 / 3 / 3; 
    background-color: #90ee90; 
}

.grid-container-template {
    display: grid;
    grid-template: 
        "header header" auto
        "sidebar main" 200px / 1fr 3fr;
    gap: 10px;
    padding: 10px;
}

.header, .sidebar {
    background-color: #f0e68c;
}

.main {
    background-color: #add8e6;
}

a – grid-template-areas

grid-template-areas defines a named grid area for each cell in a grid layout
It allows you to create visual grids by assigning area names
Specify the areas inside double quotes “”
header spans all three cells
sidebar, main and content occupy only one cell each
footer also spans all three cells
unused cells can be referred using null tokens
A null token is a sequence of one or more full stop ‘.’

b – grid-area

grid-area is used to position a grid item in a grid container.
It specifies which row, column, or both start and end positions for the item.
It accept 4 values(3 optional and 1 required):
1st → (optional) defines the start row 2nd→ (optional) defines the start column
3rd → (required) defines the end row 4th → (optional) defines the end column
or you can use a named area if grid-template-areas used in the grid container
grid-area: 1 / 1 / span 3 / 2; → spans for 3 rows
grid-area: 1 / 3 / span 2 / span 2; → spans for 2 rows and 2 columns

c – grid-template

grid-template is a shorthand property for grid-columns, grid-rows and grid-areas
It simplifies the process of creating and configuring grids
It groups together related settings such as number of columns/rows, their sized etc
example 1 → it specifies 2×2 grid container
1st line both cells are the header with auto size
2nd line sidebar and main
200px specifies the row size values
1fr 3fr specify the column size values

20 – grid-auto-columns, grid-auto-rows and grid-auto-flow properties

<div class="grid-container">
    <div class="cell">Auto-Placed Item 1 (200px)</div>
    <div class="cell">Auto-Placed Item 2 (200px)</div>
    <div class="cell">Item with different content</div>
</div>
<div class="grid-container-rows">
    <div class="cell">Auto-Placed Item 1 (50px)</div>
    <div class="cell">Auto-Placed Item 2 (50px)</div>
    <div class="cell">Item with different content</div>
</div>
<div class="grid-container-flow">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
</div>

.grid-container {
    display: grid;
    grid-template-rows: 50px auto 70px;
    grid-auto-columns: 200px;
}

.cell {
    border: 1px solid black;
    padding: 10px;
}

.grid-container-rows {
    display: grid;
    grid-template-columns: 200px auto;
    grid-auto-rows: 50px;
}

.grid-container-flow {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(2, 200px);
    grid-auto-flow: row dense;
}

a – grid-auto-columns property

grid-auto-columns defines the default size for auto-placed columns in grid layout
It is useful when you want to specify a consistent width for all columns
This way you do not have to specify each column individually
It applies only to auto-placed grid items
not to items that are explicitly defined
values → length(px, cm), percentage(%), fr, minmax, fit-content,
mix-content, max-content and auto
grid-auto-columns: 200px; → defines the default column width to 200px;

b – grid-auto-rows property

grid-auto-rows defines the default size for auto-placed rows in grid layout
It is useful when you want to specify a consistent width for all rows
This way you do not have to specify each rows individually
It applies only to auto-placed grid items
not to items that are explicitly defined
values → length(px, cm), percentage(%), fr, minmax, fit-content,
mix-content, max-content and auto
grid-auto-rows: 200px; → defines the default column height to 50px;

c – grid-auto-flow property

grid-auto-flow specifies how auto-placed items are placed in the grid
It can have one or two values that specify row/column and grid density
values → row, column, dense (if one values used)
row dense, column dense (if two values are used)
row → ensures that auto-placed items are placed in a row-wise manner
column → ensures that auto-placed items are placed in a column-wise manner
dense specifies where a grid item should start within a grid row fills in the holes in the grid
if is not used row or columned , then row is the default, If is not used dense then it does not fill holes
grid-auto-flow: row dense; → fill the container’s size and minimize the number of rows used

21 – grid-row-start, grid-column-start, grid-row-end and grid-column-end properties

<div class="grid-container">
    <div class="cell first-item">First Item (Start Row 2, End Row 4)</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
    <div class="cell">Item 4</div>
    <div class="cell second-item">Fifth Item (Start Column 2, End Column 4)</div>
    <div class="cell">Item 6</div>    
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
}

.cell {
    border: 1px solid black;
    padding: 10px;
}

.first-item {
    grid-row-start: 1; 
    grid-row-end: 3; 
}
.first-second {
    grid-column-start: 2;
    grid-column-end: 4;
}

a – grid-row-start and grid-column-start properties

grid-row-start specifies where a grid item should start within a grid row
values → auto(next available row), integer, span #n
grid-row-start: 2; → Places the grid item at the start of row 2
grid-column-start specifies where a grid item should start within a grid column
values → auto(next available row), integer, span #n
grid-column-start: 3; → Places the grid item at the start of column 3

b – grid-row-end and grid-column-end properties

grid-row-end specifies where a grid item ends within a grid row.
values → auto(next available row), integer, span #n
grid-row-end: 4; → Places the grid item at the end of row 3
grid-column-end specifies where a grid item ends within a grid column.
values → auto(next available row), integer, span #n
grid-column-end: 4; → Places the grid item at the end of column 3

22 – grid-row, grid-column properties

<div class="grid-container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 10px; 
}

.item1 {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    grid-row: 1 / 3; 
    grid-column: 2 / 4; 
}

.item2 {
    background-color: #e0e0e0;
    padding: 20px;
    border-radius: 5px;
    grid-row: 2 / 5;
    grid-column: 1 / 3;
}

a – grid-row property

specifies where a grid item starts and ends within the grid
It can be used when you want control over how many rows the grid item occupies
or precisely place it within the layout.
values → auto(auto placement), integer, span #n
when integer / integer → specifies which row starts and finishes
grid-row: 1 / 3; → Starts at row 1 and ends at row 3

b – grid-column property

specifies where a grid item starts and ends within the grid
It can be used when you want control over how many columns the grid item occupies
or precisely place it within the layout.
values → auto(auto placement), integer, span #n
when integer / integer → specifies which column starts and finishes
grid-column: 2 / 4; → Starts at column 2 and ends at column 4

23 – row-gap, column-gap and gap properties

<div class="grid-container">
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
    <div class="grid-item">Item</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    row-gap: 20px; 
    column-gap: 10px;
}

.grid-item {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    background-color: aqua;
}

• row-gap specifies the space between each row in a grid
• column-gap specifies the space between each column in a grid
• gap specifies the space between columns and rows in a grid
• gap it is a shorthand for row-gap and column gap
• gap also applies to flex containers
• values → length, percentage and calc() values
• row-gap: 20px; → this applies 20px gap between each row
• column-gap: 10px; → This applies 10px gap between each column
• gap: 20px 10px; → instead of the previous examples

24 – flexbox layout introduction

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

.container {
  display: flex;
}

.item {
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
  border: 2px solid black;
}

a – flexbox introduction

• flexbox or A.K.A flexible box layout is a layout that allows you to layout elements in one dimension.
• the container’s items can be laid out in vertical or horizontal dimension. column or row
• flexbox is useful when using responsive designs
• the child items are resized and reordered based on the available space.
• display: flex; → set the container as a flexbox container
• flexbox container has main axis and cross axis. By default main axis is the horizontal axis
• the cross axis is the perpendicular axis to main axis, by default the vertical axis
• main-axis and cross-axis change when you change the flex-direction. Default is row

b – flexbox important properties

• flex-direction→Defines the main axis of the flex container, which determines the direction of the items
• flex-wrap→Allows items to wrap if there is not enough space
• flex-grow→Defines the ability of an item to grow if there is available space within its container
• flex-shrink→Defines how much an item can shrink if there is not enough space in its container
• flex-basis→Defines the initial size of an item on the main axis before any space is distributed
• flex→Combines flex-grow, flex-shrink and flex-basis properties into a single shorthand property
• in the next videos we will explain the properties in detail

25 – flex-direction and flex-wrap properties

 <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <div class="column-direction container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <div class="reverse-direction container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <hr>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
    <div class="wrap container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
    <div class="wrap-reverse container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>

.container {
    display: flex;
    border: 1px solid black;
    width: 200px;
    margin: 10px;
}

.item {
    width: 100px;
    height: 50px;
    background-color: blueviolet;
    margin: 5px;
    color: white;
    text-align: center;
    line-height: 50px;
}

.container {
    flex-direction: row;
}

.column-direction.container {
    flex-direction: column;
}

.reverse-direction.container {
    flex-direction: row-reverse;
}

.container {
    flex-wrap: nowrap;
}

.wrap.container {
    flex-wrap: wrap;
}

.wrap-reverse.container {
    flex-wrap: wrap-reverse;
}

a – flex-direction property

• flex-direction sets the direction of the main axis
• It also sets the direction, normal or reverses
• values → row, row-reverse, column, column-reverse
• flex-direction: row; → sets the main axis to row and normal direction(default)
• flex-direction: column; → sets the main axis to column and normal direction
• flex-direction: row-reverse; → sets the main axis to row and reverse direction

b – flex-wrap property

• flex-wrap wraps or unwraps the items when they exceed the container’s size
• values → nowrap, wrap, wrap-reverse
• wrap → forces the items onto multiple lines
• nowrap → forces the items onto one line(default)
• wrap-reverse → like wrap but start and end are inverted
• flex-wrap: nowrap; → sets to nowrap
• flex-wrap: wrap; → sets to wrap
• flex-wrap: wrap-reverse; → sets to wrap and reverse

26 flex-grow, flex-shrink properties

    <div class="container">
        <div class="item1 item"></div>
        <div class="item2 item"></div>
        <div class="item3 item"></div>
    </div>

   <div class="container2">
        <div class="item4 item"></div>
        <div class="item5 item"></div>
        <div class="item6 item"></div>
    </div>

.container {
    display: flex;
    border: 1px solid black;
}

.item {
    height: 100px;
    border: 2px solid blueviolet;
}

.item1,
.item3 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

.container2 {
    margin-top: 50px;
    display: flex;
    border: 1px solid black;
    width: 400px
}

.item4,
.item5 {
    flex-shrink: 1;
    width: 200px;
}

.item6 {
    flex-shrink: 2;
    width: 200px;
}

a – flex-grow property

• flex-grow specifies the grow factor
• In other words specifies how much can grow relative to its siblings
• The greater the value the more it will grow in proportion to its siblings
• values → number values
• item1 and item3 will take 25% each of the total width
• item2 will take 50% of the total width
• there are in total 4 grow factors (1+2+1)

b – flex-shrink property

• flex-shrink specifies the shrink factor
• if the total size of children are larger than their parent container, they can shrink
• The greater the value the more it will shrink in proportion to its siblings
• values → number values
• item4 and item5 will have 40% each
• item6 will have 20%
• there are in total 4 shrink factors(1+1+2)

27 – flex-basis, flex and flex-flow properties

<div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
</div>
<div class="container">
    <div class="item item21">Item 1</div>
    <div class="item item22">Item 2</div>
    <div class="item item23">Item 3</div>
</div>
<div class="container2">
        <div class="item-flow">Item 1</div>
        <div class="item-flow">Item 2</div>
        <div class="item-flow">Item 3</div>
        <div class="item-flow">Item 4</div>
    </div>

.container {
    display: flex;
    border: 2px solid black;
    width: 500px;
    height: 100px;
    padding: 5px;
    margin: 10px;
}

.item {
    border: 1px solid red;
    height: 50px;
}

.item1 {
    flex-basis: 100px;
}

.item2 {
    flex-basis: 1fr;
}

.item3 {
    flex-basis: 20%;
}

.item4 {
    flex-basis: 5em;
}

.item21 {
    flex: 2 1 100px;
}

.item22 {
    flex: 1 2 auto;
}

.item23 {
    flex: 1 1 5em;
}

.container2 {
    margin: 10px;
    display: flex;
    width: 300px;
    border: 2px solid black;
    flex-flow: row wrap;
    height: 350px;
}

.item-flow {
    border: 1px solid red;
    flex: 0 0 100px;
}

a – flex-basis property

• flex-basis specifies the initial main size of a flexible item
• This happens before any free space is distributed.
• values → witdth(em, px, %), auto(default), content, max-content, min-content and fit-content
• flex-basis: 100px; → initial main size
• flex-basis: 1fr; → proportionally sized with free space
• flex-basis: 20%; → proportionally sized by taking up 20% of available space
• flex-basis: 5em; → fixed size of 5em

b – flex property

• flex property is a shorthand property for flex-grow, flex-shrink and flex-basis
• It allows you to control how items are distributed inside theis container
• values: (grow, shrink, basis) none → 0 0 auto; auto → 1 1 auto; 10em → 1 1 10em
• two values, if both integers: 2 2 → 2 2 0%, if one integer: 1 30px → 1 1 30px;
• flex: 2 1 100px; → grow twice, shrink once and initial size of 100px
• flex: 1 2 auto; → grow once, shrink twice and takes initial size based on content
• flex: 1 1 5em; → grow once, shrink once and set initial size to 5em

c – flex-flow property

• flex-flow is a shorthand property for flex-direction and flex-wrap
• It specifies items’ direction and if wrapped
• values(direction) → row, row-reverse, column, column-reverse
• values(wrap) → nowrap, wrap, wrap-reverse
• Values from direction and wrap can be used together or alone
• flex-flow: row wrap; → row direction with wrap enabled
• flex-flow: column nowrap; → column direction with wrap disabled

28 – justify-content and align-items properties

<div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-around">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-evenly">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-center">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <hr />
    <div class="container-baseline">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-end">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-start">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <div class="container-stretch">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>

.container {
    display: flex;
    border: 2px red dotted;
    justify-content: space-between;
    margin: 2px;
}

.item {
    background-color: #f1f1f1f1;
    padding: 20px;
    margin: 5px;
    border: 2px blue dashed;
}

.container-around {
    display: flex;
    border: 2px red dotted;
    justify-content: space-around;
    margin: 2px;
}

.container-evenly {
    display: flex;
    border: 2px red dotted;
    justify-content: space-evenly;
    margin: 2px;
}

.container-center {
    display: flex;
    border: 2px red dotted;
    justify-content: center;
    margin: 2px;
}

.container-baseline {
    height: 150px;
    display: flex;
    border: 2px red dotted;
    align-items: baseline;
    margin: 2px;
}

.container-end {
    height: 150px;
    display: flex;
    border: 2px red dotted;
    align-items: end;
    margin: 2px;
}

.container-start {
    height: 150px;
    display: flex;
    border: 2px red dotted;
    align-items: start;
    margin: 2px;
}

.container-stretch {
    height: 150px;
    display: flex;
    border: 2px red dotted;
    align-items: stretch;
    margin: 2px;
}

a – justify-content property

• justify-content specifies the alignment of extra space between the items.
• It is used for the main axis
• values → positional alignment(center, start, end, flex-start, flex-end, left and right)
• distributed alignment(space-between, space-around, space-evenly and stretch)
• overflow alignment(sace center and unsafe center)
• justify-content: space-between; → the spacing between items is the same
• justify-content: space-around; → the spacing between items is the same. The space in the beginning and at the end is the half of the space between
• justify-content: space-evenly; → the spacing between the item and in the beginning and in the end is the same
• justify-content: center; → items are centered and packed to each other

b – align-items property

• align-items specifies how items should be aligned along the cross axis
• values → basic keywords(normal, stretch)
• positional alignment(center, start, flex-start, flex-end, self-start, self-end and anchor-center)
• baseline alignment(baseline, first baseline, last baseline, safe center, unsafe center)
• align-items: baseline; → aligns to containers baseline
• align-items: end; → aligns items to the end of the container
• align-items: start; → aligns items to the start of the container
• align-items: stretch; → items enlarged to fill the container

29 – align-content and align-self properties

.container {
    display: flex;
    flex-wrap: wrap;
    height: 400px; /* Set a fixed height for the container */
    border: 2px solid #333;
}

.item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    text-align: center;
    width: 200px; /* Set a fixed width for the items */
}

.container1 {
    align-content: stretch; /* Default value */
}

.container2 {
    align-content: flex-start;
}

.container3 {
    align-content: flex-end;
}

.container4 {
    align-content: center;
}

.container5 {
    align-content: space-between;
}

.container6 {
    align-content: space-around;
}

.container7 {
    align-content: space-evenly;
}

.container-self .item1 { align-self: stretch; }
.container-self .item2 { align-self: flex-start; }
.container-self .item3 { align-self: flex-end; }
.container-self .item4 { align-self: center; }
.container-self .item5 { align-self: baseline; }

.container-self  {
    display: flex;
    height: 300px; 
    border: 2px solid #333;
    margin-top: 10px;
}

<h2>align-content: stretch;</h2>
<div class="container container1">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: flex-start;</h2>
<div class="container container2">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: flex-end;</h2>
<div class="container container3">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: center;</h2>
<div class="container container4">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: space-between;</h2>
<div class="container container5">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: space-around;</h2>
<div class="container container6">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<h2>align-content: space-evenly;</h2>
<div class="container container7">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<div class="container-self">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
</div>

a – align-content property

• align-content controls the alignment of flex items along the cross axis
• It applies to the container itself and not on individual items
• values → start, center, end, flex-start, flex-end, baseline…
• …space-between, space-around, space-evenly, stretch…
• … safe center and unsafe center
• align-content: stretch; → default value, fills the container along the cross axis
• align-content: flex-start; → to the cross-axis start side
• align-content: center; → close to each other in the center of the container

b – align-self property

• align-self sets individually the alignment of a flex item along the cross axis
• values → start, center, end, flex-start, flex-end, anchor-center baseline…
• …space-between, space-around, space-evenly, stretch…
• … safe center and unsafe center
• align-self: stretch; → Stretch ‘auto’-sized items to fit the container
• align-self: flex-end; → Put the flex item at the end
• align-self: center; → Puts the item around the center
• align-self: baseline; →aligns to the alignment baseline

30 – media queries Introduction

@media screen and (min-width: 780px) {
  div {
    display: flex;
  }
}

@media print {
    div { 
        background-color: white;
        color: black;
    }
}

@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

@media not (hover: hover) {
  .no-hover {
    display: none;
  }
}

a – media queries intro and types

• Media queries are a fundamental part of responsive web design
• They allow you to apply different styles for different screen sizes and device types
• They are defined using @media rule in CSS
• media types: all → applies for all devices(default),
• print → styles for print preview mode screen → styles for screen devices
• in media rules you can also use logical operators → and, not, only and or
• @media screen and (min-width: 780px) → for screen and min width 780px
• @media print → media query for print version

b – media queries common descriptors

• width → Minimum and maximum width of the viewport. height → Minimum and maximum height of the viewport.
• aspect-ratio → Aspect ratio of the viewport. orientation → Orientation (portrait or landscape).
• device-width, device-height → Dimensions of the device screen. color → Number of bits per color component in the output device.
• color-index → Maximum number of colors that can be addressed on the output device. monochrome → Number of shades of gray in the output device.
• resolution → Minimum and maximum resolution (dots per inch) of the output device.
• scan → Scan type (progressive or interlaced). hover → Whether hover capabilities are available.
• @media (orientation: landscape) → only for landscape orientation
• @media (min-width: 768px) and (max-width: 1024px) → for width between 768px and 1024px
• @media not (hover: hover) → for non-touch devices

c – media queries best practices

• Mobile First → Start with the smallest screen and build up to larger ones
• Avoid Overusing Media Queries → Too many can slow down your site…
• …Aim for a breakpoint every 50-70 pixels or so.
• Use Relative Units → Use relative units like em, rem, % instead of fixed units…
• …like pixels to ensure consistency across different devices.
• Test Thoroughly → Test your designs on various devices and screen sizes to ensure they look good everywhere.
• Just remember that media queries are a powerful tool in CSS…
• for creating responsive web design

31 – any-hover and any-pointer media features

<div class="container">Hover over me!</div>

.container {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.container:hover {
  background-color: lightgreen;
}

@media (any-hover: none) {
  .container {
    background-color: lightcoral;
  }
}

@media (any-pointer: none) {
    .container {
        background-color: lightcoral;
    }
}

a – any-hover media feature

• any-hover can be used to detect whether a pointing device(mouse) can hover over elements
• values: none → there is no pointing device that can hover
• hover → pointing device that can hover
• syntax → any-hover: none | hover;
• Desktop browsers have a pointing device
• Mobile browsers with touch input, there might be no any hover effect
• @media (any-hover: none) → applies to devices with no hover effect

b – any-pointer media feature

• any-pointer can be used to detect whether a pointing device is available
• Such devices are a mouse or a touch screen
• values: none → no pointing device are available
• coarse → pointing device with limited accuracy
• fine → pointing device with fine accuracy
• Desktop browsers have a pointing device
• Mobile browsers with touch input, there might be no any pointer available
• @media (any-pointer: none) → applies if no pointing device is available

32 – aspect-ratio and color media features

<div class="container">
    <div class="box"></div>
</div>

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    width: 100%;
    height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 300px; 
    height: 200px; 
    background-color: red;
}

@media (aspect-ratio: 16/9) {
    .box {
        width: 500px; 
        height: auto;  
        background-color: #ffcccc; 
    }
}

@media (color) {
  p {
    color: blue;
  }
}

@media (min-color: 32) {
  p {
    color: red;
  }
}

a – aspect-ratio media feature

• aspect-ratio media feature allows you to apply styles based on the aspect ratio of the viewport
• It is useful for creating responsive designs and adapt to different aspect ratios
• This way you can design for both portrait and landscape modes
• you can also use min-aspect-ratio and max-aspect-ratio for minimum and maximum values
• @media (aspect-ratio: 16/9) → Media query for aspect ratio 16:9
• it changes the background-color(from red), width and height properties
• @media (max-aspect-ratio: 3/2) → Media query for minimum aspect ratio 3/2
• @media (min-aspect-ratio: 4/3) → Media query for maximum aspect ratio 4/3

b – color media feature

• color media feature allows you to apply styles based on the number of bits per color component(RGB)
• The value must be an integer but you can also add mathematical operators like <,>, =
• For example color <= 12
• 0 values is for not color device
• You can also use min-color and max-color media feature
• @media (color) → applies when is a color device
• @media (min-color: 32) → applies when at minimum 32 bits per color component
• @media (max-color: 32) → applies when at maximum 32 bits per color component

33 – color-gamut, color-index media features

<div class="content">
        <h1>Welcome to Our Website!</h1>
        <p>This is a simple example of using the color-index media feature in CSS.</p>
</div>

<div class="color-box srgb"></div>
<div class="color-box display-p3"></div>
<div class="color-box rec2020"></div>

.color-box {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 10px;
}

@media (color-gamut: srgb) {
    .srgb { background-color: rgb(85, 85, 85); }
}

@media (color-gamut: p3) {
    .display-p3 { background-color: oklch(69% 0.27 140); }
}

@media (color-gamut: rec2020) {
    .rec2020 { background-color: rgb(15, 15, 15); }
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

@media (min-color-index: 1) {
    body {
        background-color: lightgray;
    }
    .content {
        max-width: 80%;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    }
}

@media (max-color-index: 8) {
    body {
        background-color: lightblue;
    }
    .content {
        max-width: 60%;
        margin: auto;
        padding: 10px;
        border: 1px solid #aaa;
        box-shadow: none;
    }
}

a – color-gamut media feature

• color-gamut allows you to query and apply styles based on the approximate gamut of the display
• It is important when dealing with high-fidelity colors
• values: srgb → indicates an sRGB color space
• p3 →indicates a DCI-P3 or Adobe RGB(1988) color space
• rec2020 →indicate a Rec. 2020 color space, most widely used color space
• display-p3 → a p3 alias
• The example automatically adjusts the background color based on the displays…
• …capability to display different color spaces.

b – color-index media feature

• color-index queries and applies styles based on the output device’s color lookup table
• It is useful for optimizing image and video quality
• value → integer
• You can also use min-color-index and max-color-index
• min-color-index is the same as color-index >= value
• max-color-index is the same as color-index <= value
• @media (min-color-index: 1) → style for browsers with at least 1 color index
• @media (max-color-index: 8) → style for browsers with fewer than 8 of color indices

34 – display-mode and dynamic-range media features

<h1>Display Mode Media Feature Example</h1>
<p>This is an example of how to use the display-mode media feature in CSS. The styles will change based on whether the page is viewed in 
standalone or fullscreen mode.</p>
<a href="https://example.com">Visit Example.com</a>

<h1>Dynamic Range Media Feature Example</h1>
  <p>This is an example of how to use the dynamic-range media feature in CSS. The styles will change based on whether the device supports a high 
or standard dynamic range.</p>

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

@media (display-mode: standalone) {
  body {
    background-color: #f0f8ff;
    color: #036;
  }
  a {
    color: #00f;
  }
}

@media (display-mode: fullscreen) {
  body {
    background-color: #fff;
    color: #000;
  }
  a {
    color: #03f;
  }
}

@media (dynamic-range: high) {
  body {
    background-color: #f5f5f5;
    color: #000;
  }
  p {
    font-size: 1.2em;
  }
}

@media (dynamic-range: standard) {
  body {
    background-color: #e5e5e5;
    color: #333;
  }
  p {
    font-size: 1em;
  }
}

a – display-mode media feature

• display-mode feature specifies if the document is running in a specific display more
• values: browser → is inside a browser tab or window
• standalone → is installed as a standalone app on a device
• minimal-ui → is like a standalone app but with minimal set of UI elements
• picture-in-picture → applies style while in PIP
• @media (display-mode: standalone) → styles for standalone mode
• @media (display-mode: fullscreen) → styles for full screen mode

b – dynamic range media feature

• dynamic-range queries the combination of brightness, contrast and color depth.
• values: standard → matches devices with no lack of visual capabilities
• high → the device supports a high dynamic range
• that means color depth greater than 24bit, high contrast and high peak brightness
• A device matches high will also match standard value
• @media (dynamic-range: high) → styles for high dynamic range devices
• @media (dynamic-range: standard) → styles for standard dynamic range devices

35 – forced-colors and grid media features

<button id="toggleColor">Toggle Color Mode</button>

button {
    padding: 10px 20px;
    color: white;
    background-color: black;
    border: none;
    cursor: pointer;
}

@media (forced-colors: active) {
    button {
        border: 1px solid ButtonBorder;
    }
}

@media (grid: 0) {
  .header {
    color: lightgray;
  }

  .text {
    color: red;
  }
}

@media (grid: 1) {
  .header {
    color: lightgray;
  }

  .text {
    color: black;
  }
}

a – forced-colors media feature

• forced-colors applies styles when the user agent has enabled forced colors mode
• An example of forced colors mode is High Contrast mode in Windows
• Values: none and active
• box-shadow, text-shadow, background-image are forced to none
• color-scheme is forced to light dark and scrollbar-color is forced to auto
• color, background-color, text-decoration-color, text-emphasis-color, border-color, outline-color…
• … and column-rule-color use browser-specified values
• @media (forced-colors: active) → applies style when forced-colors mode is enable

b – grid media feature

• grid feature checks whether the output device uses a grid-based screen
• values: 0 or 1, 1 uses a grid-based screen
• Computer and smartphones have bitmap-based screens
• Text-only terminals and simple phones are grid-based
• @media (grid: 0) → applies styles to normal devices (computers and smartphones)
• @media (grid: 1) → applies styles to grid-based devices

36 – height and width media features

@media (height: 1024px) {
    .container {
        background-color: pink; 
    }
}
@media (min-height: 1024px) {
  .container {
        background-color: red; 
    }
}

@media (max-height: 1200px) {
 .container {
        background-color: green; 
    }
}

@media (width: 780px) {
    .container {
        background-color: pink; 
    }
}

@media (min-width: 780px) {
    .container {
        background-color: red; 
    }
}

@media (max-width: 1200px) {
    .container {
        background-color: green; 
    }
}

a – height media feature

• height allows you to apply styles based on the height of the viewport
• or the dimensions of an embedded document..
• It is useful for creating responsive designs that adapt to different screen sizes
• such as mobile devices and desktops
• You can also use min-height and max-height
• @media (height: 1024px) → applies styles when height is 1024 pixels
• @media (min-height: 1024px) → applies styles when minimum height is 1024 pixels
• @media (max-height: 1200px) → applies styles when maximum height is 1200 pixels

b – width media feature

• width allows you to apply styles based on the width of the viewport
• It is useful for creating responsive designs that adapt to different screen sizes
• such as mobile devices and desktops
• You can also use min-width and max-width
• @media (width: 780px) → applies styles when width is 780 pixels
• @media (min-width: 780px) → applies styles when minimum width is 780 pixels
• @media (max-width: 1200px) → applies styles when maximum width is 1200 pixels

37 – hover and inverted-colors media features

<button>Click Me!</button>

body {
    background-color: white;
    color: black;

}button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: blue;
    border: none;
    cursor: pointer;
}

@media (hover: hover) {
    button:hover {
        background-color: red;
    }
}

@media (inverted-colors: none) {
    body {
        background-color: black;
        color: white;
    }
}

a – hover media feature

• hover media feature applies styles when a pointing device can hover oven an element
• It is useful when certain elements have to change appearance on pointing device hover
• and it ensues that the hover effect will be applied only if the user can hover an element
• values: none → cannot hover like mobile devices
• hover → the input device can hover over an element
• @media (hover: hover) → applies style when hover is detected

b – inverted-colors media feature

• inverted-colors media feature applies styles when the system’s display used an inverted color scheme
• That means that dark colors are displayed in bright colors and vice versa
• It helps to make your content readable when inverted colors are enables due to poor visibility condition
• values: none → colors are displayed normally
• inverted → display uses inverted color scheme
• @media (inverted-colors: inverted) → applies style when inverted colors are detected

38 – monochrome and orientation media features

@media (monochrome) {
  body {
        background-color: #f0f0f0;
        color: #000;
    }
}

@media (monochrome: 0) {
 body {
        background-color: #ccc;
        color: #000;
    }
}

@media (min-monochrome: 1) {
    body {
        background-color: #f0f0f0;
        color: #000;
    }
}

@media (max-monochrome: 8) {
    body {
        background-color: #ccc;
        color: #000;
    }
}

@media screen and (orientation: portrait) {
    body {
        background-color: #f0f0f0;
        color: #000;
    }
    .content {
        padding: 10px; 
    }
}

@media screen and (orientation: landscape) {
    body {
        background-color: #ccc;
        color: #000;
    }
    .content {
        padding: 20px;
    }
}

a – monochrome media feature

• monochrome media feature is used to test the numbers of bits per pixel
• Typically on devices that cannot handle color accurately
• You can also use min-monochrome and max-monochrome
• @media (monochrome) { }→ applies styles to any monochrome device
• @media (monochrome: 0) { }→ applies styles to non-monochrome device
• @media (min-monochrome: 1) { } → applies styles specific to monochrome devices with at least 1 bits per pixel (bpp)
• @media (min-monochrome: 8) { } → applies styles specific to monochrome devices with maximum 8 bits per pixel (bpp)

b – orientation media feature

• orientation media feature allows you to apply different styles based on user’s screen orientation
• This is useful for creating responsive designs that adapt to how the context is being viewed
• values: portrait → the height is greater or equal to the width
• landscape → the width is greater than the height
• @media screen and (orientation: portrait) { } → applies styles for portrait orientation
• @media screen and (orientation: landscape) { } → applies styles for landscape orientation

39 – overflow-block and overflow-inline media features

@media (overflow-block: scroll) {
  div {
    color: blue;
  }
}

@media (overflow-block: paged) {
  div {
    color: green;
  }
}

@media (overflow-inline: none) {
  div {
    color: blue;
  }
}

@media (overflow-inline: scroll) {
  div {
    color: blue;
  }
}

a – overflow-block media feature

• overflow-block checks the device’s overflow handling along the block axis
• values: none,
• scroll → provides scrolling mechanism for the containing block
• optional-paged → provides scrolling and page pages can be triggered
• pages → provides scrolling and pages are broken into discrete pages.
• @media (overflow-block: scroll) { } → applies styles when scroll is provided
• @media (overflow-block: paged) { } → applies styles when paged is provided

b – overflow-inline media feature

• overflow-block checks the device’s overflow handling along the inline axis
• values: none,
• scroll → provides scrolling along the inline axis
• @media (overflow-inline: none) { } → applies when overflowed text is not displayed
• @media (overflow-inline: scroll) { } → applies when overflowed text is displayed by scrolling to it

40 – pointer and resolution media features

@media (pointer: fine) {
    .container {
        padding: 20px;
        border: 1px solid #add8e6;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

@media (pointer: coarse) {
    .container {
        padding: 10px;
        border: 1px solid #98fb98;
        box-shadow: none;
    }
}

@media (resolution: 150dpi) {
    .container {
        padding: 10px;
        border: 1px solid red; 
    }
}

@media (max-resolution: 72dpi) {
    .container {
        padding: 10px;
        border: 1px solid #add8e6;
    }
}

@media (min-resolution: 72dpi) {
    .container {
        padding: 20px;
        border: 1px solid #98fb98; /
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

a – pointer media feature

• pointer media feature allows you to query the capabilities of the pointing device
• Such devices are a mouse, a touchpad or a touchscreen
• values: none → it does not support a pointing device
• coarse → supports a pointing device of limited accuracy (finger on touchscreen)
• fine → supports an accurate pointing device(mouse etc)
• @media (pointer: fine) { } → applies styles when there is an accurate pointing device
• @media (pointer: coarse) { } → applies styles when there is a pointing device with limited accuracy

b – resolution media feature

• resolution media feature allows you to query the output pixel density of the screen
• This can be specified using dots per inch (dpi) and pixels per inch (ppi)
• you can also use min-resolution and max-resolution
• @media (resolution: 150dpi) { } → applies styles with exact 150dpi
• @media (max-resolution: 72dpi) { } → applies styles for low resolution screens (e.g., older laptops or mobile devices)
• @media (min-resolution: 72dpi) { } → applies styles for high resolution screens (e.g., modern laptops, tablets, and smartphones)

41 – prefers-color-scheme and prefers-contrast media features

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: #black;
    }
}

@media (prefers-contrast: more) {
    body {
        background-color: #f0f0f0;
        color: #1a1a1a; 
    }
}

@media (prefers-contrast: less) {
    body {
        background-color: #262626; 
        color: #e0e0e0;
    }
}

a – prefers-color-scheme media feature

• prefers-color-scheme media feature detects the user’s preferred color scheme light or dark
• It is useful for creating for accessible and personalized experience across different devices
• values: light → user prefers light theme or has not expressed a preference
• dark → user prefers a dark theme
• @media (prefers-color-scheme: dark) { } → applies styles for dark preference
• @media (prefers-color-scheme: light) { } → applies styles for light preference

b – prefers-contrast media feature

• prefers-contrast media feature detects the user’s preferred contrast level
• This is useful for accessibility ensuring that content is legible regarding system’s color scheme or brightness settings
• values: no-preference → no user preference
• more → user’s preference is a higher level of contrast
• less → user’s preference is a lower level of contrast
• custom → user uses a specific set of colors and contrast
• @media (prefers-contrast: more) { } → applies styles for more contrast preference
• @media (prefers-contrast: less) { } → applies styles for less contrast preference

42 – prefers-reduced-data and prefers-reduced-motion media features

@media (prefers-reduced-motion: reduce) {
    .container h1, .container p {
        animation: none !important; 
        transition: none !important; 
    }
}

@media (prefers-reduced-motion: no-preference) {
    .container h1, .container p {
        animation: fadeIn 2s ease-in;
    }
}

@media (prefers-reduced-motion: reduce) {
    .container h1, .container p {
        animation: none !important;
        transition: none !important; 
    }
}

@media (prefers-reduced-motion: no-preference) {
    .container h1, .container p {
        animation: fadeIn 2s ease-in; 
    }
}

a – prefers-reduced-data media feature

• prefers-reduced data detects if the user has requested a lightweight alternative
• Limited availability because is an experimental technology
• values: no-preference → the user has not made any preference
• reduce → the user made a preference for alternative lightweight content
• @media (prefers-reduced-motion: reduce) { } → applies styles for those with reduced traffic
• @media (prefers-reduced-motion: no-preference) { } → applies styles for those with no specified preference

b – prefers-reduced-motion media feature

• prefers-reduced-motion detects if the user has requested reduced motion
• This is useful for users that are sensitive to screen flicker or animations
• values: no-preference → the user has not made any preference
• reduce → the user enabled reduced motion
• @media (prefers-reduced-motion: reduce) { } → applies styles for users who prefer reduced motion
• @media (prefers-reduced-motion: no-preference) { } → applies styles for users who do not prefer reduced motion

43 – prefers-reduced-transparency and scan media features

@media (prefers-reduced-transparency: reduce) {
    body {
        background-color: #ffffff; 
    }
}

@media (scan: interlaced) {
    body {
        background-color: #f0f;
        color: #0ff;
    }
}

@media (scan: progressive) {
    body {
        background-color: #0ff;
        color: #f0f;
    }
}

a – prefers-reduced-transparency

• prefers-reduced-transparency media feature checks it the user has enabled reduced effect transparency
• This is very important for applications where transparency is very important
• Such applications are image galleries and video players
• values: no-preference → the user has not enabled reduced transparency
• reduce → the user has enabled reduced transparency
• @media (prefers-reduced-transparency: reduce) { } →media query for reduced transparency preference

b – scan media feature

• scan media feature checks the scanning process of the monitor
• values: interlace → image is composed of alternating lines.
• Avoid very fast movement and to avoid flickering it should be wider than 1px
• interlace was used by old CRT monitor.
• progressive → each frame is complete and doesn’t have this alternation
• @media (scan: interlaced) { } → Media query for displays using interlaced scanning
• @media (scan: progressive) { } → Media query for displays using progressive scanning

44 – scripting, update and video-dynamic-range media features

@media (scripting: none) {
  .none {
    font-weight: normal;
  }
}

@media (scripting: initial-only) {
  .initial-only {
    color: black;
    font-weight: lighter;
  }
}

@media (scripting: enabled) {
  .enabled {
    color: red;
    font-weight: bold;
  }
}

@media (update: none) {
  p {
    /* animation: slide 5s infinite alternate;*/
  }
}

@media (update: slow) {
  p {
    animation: slide 5s infinite alternate;
  }
}

@media (update: fast) {
  p {
    animation: slide 1s infinite alternate;
  }
}

@media (dynamic-range: standard) {
      h1 {
         color: black;
      }
   }

@media (dynamic-range: high) {
      h1 {
         color: blue;
      }
   }

a – scripting media feature

• scripting media feature is used to determine whether scripting like JavaScript is enabled
• The result is based on user’s browser preferences
• values: none → scripting is not available
• initial-only → scripting available only the initial page load
• enabled → scripting is fully supported
• @media (scripting: none) { } → style applies when scripting is not enabled
• @media (scripting: initial-only) { } → style applies when scripting is available only at the first page load
• @media (scripting: enabled) { } → style applies when scripting is fully enabled

b – update media feature

• update media feature checks how often the device updates the rendered content
• values: none → once rendered there will be no update on the content
• slow → cannot update the content quickly enough so there will be no smooth animation
• fast → content can be update fast enough and the animations will be smooth
• @media (update: none) { } → style applies when no update will occur
• @media (update: slow) { } → style applies when slow update will occur
• @media (update: fast) { } → style applies when fast update will occure

c – video-dynamic-range media feature

• video-dynamic-range applies styles based on the dynamic range of the output device
• It is used to test the characteristics in the video plane
• There is limited availability to browsers
• values: standard → matches any devices except those that lack visual capabilities
• high → matches devices with high peach brightness, high contrast ratio and color depth more than 24 bit
• @media (dynamic-range: standard) { } → style applies to all output devices
• @media (dynamic-range: high) { } → style applies only to devices with high peach brightness, high contrast ratio and color depth more than 24 bit

45 – transform property introduction

<h1>Transform Property Example</h1>

<div class="box rotate">Rotate</div>

<div class="box scale">Scale</div>

<div class="box skew">Skew</div>

<div class="box translate">Translate</div>

.box {
    width: 100px;
    height: 100px;
    background-color: rgb(112, 112, 219);
    margin: 50px;
    transition: transform 0.5s ease;
}

.rotate {
    transform: rotate(45deg);
}

.scale {
    transform: scale(2, 1);
}

.skew {
    transform: skew(30deg, -20deg);
}

.translate {
    transform: translate(50px, 25px);
}

a – transform property introduction

• transform property is used to apply 2D or 3D transformation to elements.
• You can rotate, scale, skew and more without affecting the layout of other elements
• the values of transform are transform functions like scale, translate, rotate
• You can combine multiple transform functions in a single transform property
• transform: rotate(45deg); → rotates element 45 degrees
• transform: scale(2, 1); → scales element 2x X axis
• transform: skew(30deg, -20deg); → skews element
• transform: translate(50px, 25px); → moves element

b – transform functions list

• Matrix transformation: matrix(), matrix3d()
• Perspective: perspective()
• Rotation: rotate(), rotate3d(),rotateX(), rotateY(), rotateZ()
• Scaling: scale(), scale3d(), scaleX(), scaleY(), scaleZ()
• Skewing: skew(), skewX(), skewY()
• Translation: translate(), translate3d(), translateX(), translateY(), translateZ()
• Next videos will show examples with those transform fuctions

46 – transform matrix and matrix3d

<div class="box translated"></div>
<div class="box rotated"></div>
<div class="box transformed"></div>

<div class="box rotated3d">Rotated 3D</div>
<div class="box transformed3d">Transformed 3D</div>
<div class="box skewed">Skewed 3D</div>

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 20px;
    transition: transform 0.5s ease-in-out;
}
.translated {
    transform: matrix(1, 0, 0, 1, 100, 100);
}

.rotated {
    transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
}


.transformed {
    transform: matrix(1, 0.3, -0.3, 1, 0, 0);
}

.rotated3d {
transform: matrix3d(cos(45deg), 0, sin(45deg), 0,
        0, 1, 0, 0,
        -sin(45deg), 0, cos(45deg), 0,
        0, 0, 0, 1);
}

.transformed3d {
transform: matrix3d(2, 0, 0, 0,
        0, 2, 0, 0,
        0, 0, 1, 0,
        100, 100, 0, 1);
}

.skewed {
transform: matrix3d(1, 0.3, 0, 0,
        -0.3, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1);
}

a – transform matrix

• transform: matrix() is used to apply a 2D transformation to an element
• It uses a transformation matrix
• syntax: transform: matrix(a, b, c, d, e, f);
• a, d → Scale along X and Y axis respectively
• b, c → Skew along X and Y axis respectively.
• e, f → Translate along X and Y axis respectively.
• transform: matrix(1, 0, 0, 1, 100, 100); → Basic Translation
• transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); → Basic Rotation
• transform: matrix(1, 0.3, -0.3, 1, 0, 0); → Scaling and Skewing

b – transform matrix3d

• transform: matrix3d() allows you to apply a 3D transformation to an element
• It uses a 4×4 transformation matrix.
• transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
• a, b, c, e, f, g, i, j, k, m, n, o → describe the linear transformation
• d, h, l, p → describe the translation
• example 1→ Basic rotation
• example 2→ Scaling and translation
• example 3 → Skewing

47 – transform perspective, rotate and rotate3d

<div class="scene">
    <div class="cube">
        <div class="front face"></div>
        <div class="back face"></div>
        <div class="right face"></div>
        <div class="left face"></div>
        <div class="top face"></div>
        <div class="bottom face"></div>
    </div>
</div>

<div class="container rotate">
</div>

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px; /* Distance from the viewer */
    margin: 50px auto;
    background-color: #f0f0f0;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* Ensures child elements are treated as 3D objects */
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

/* Front face */
.front {
    background-color: rgba(255, 0, 0, 0.7);
    transform: translateZ(100px); /* Move the front face forward */
}

/* Back face */
.back {
    background-color: rgba(0, 255, 0, 0.7);
    transform: rotateY(180deg) translateZ(100px); /* Rotate and move back face */
}

/* Right face */
.right {
    background-color: rgba(0, 0, 255, 0.7);
    transform: rotateY(90deg) translateZ(100px); /* Rotate and move right face */
}

/* Left face */
.left {
    background-color: rgba(255, 255, 0, 0.7);
    transform: rotateY(-90deg) translateZ(100px); /* Rotate and move left face */
}

/* Top face */
.top {
    background-color: rgba(255, 0, 255, 0.7);
    transform: rotateX(90deg) translateZ(100px); /* Rotate and move top face */
}

/* Bottom face */
.bottom {
    background-color: rgba(0, 255, 255, 0.7);
    transform: rotateX(-90deg) translateZ(100px); /* Rotate and move bottom face */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: aqua;
}

.rotate {
    width: 200px; /* Adjust the size as needed */
    transition: transform 0.5s ease-in-out; /* Smooth transition effect */
}

.rotate:hover {
    transform: rotate(45deg);
}

a – transform perspective

• perspective gives the appearance that elements are being viewed from a particular distance.
• This creates a 3D effect
• value: length → defines the depth of the field at which the viewer is located
• smaller length values create a greater perspective effect
• perspective: 600px; → sets the distance from the viewer to 600px
• transform-style: preserve-3d; → ensures the faces are treated as 3D objects
• faces are positioned absolutely within the cube container

b – transform rotate and rotate3d

• rotate rotates an element around a fixed point
• value: angle → specifies the angle of rotation
• Positive values → clockwise rotation, Negative values → counterclockwise rotation
• transform: rotate(45deg); → Rotates the image 45 degrees clockwise
• rotate3d allows you to apply a 3D rotation
• It take 4 values, x, y, z define the direction of the rotation
• angle defines the degree of the rotation around the specified axis
• transform: rotate3d(1, 1, 1, 90deg); → rotates along a diagonal line from one corner to the opposite corner

48 – transform rotateX, rotateY and rotate Z

<div class="box"></div>
<div class="box rotateX">rotateX</div>
<div class="box rotateY">rotateY</div>
<div class="box rotateZ">rotateZ</div>

.box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: transform 1s; 
}

.rotateX {
    transform: rotateX(45deg); /* Rotate 45 degrees around the X-axis */

.rotateY {
    transform: rotateY(45deg); /* Rotate 45 degrees around the Y-axis */
}

.rotateZ {
    transform: rotateZ(45deg); /* Rotate 45 degrees around the Y-axis */
}

a – rotateX, rotateY and rotate Z

• rotateX is used to rotate an element around X-axis (horizontal)
• rotateX(45deg) is the same as rotate3d(1, 0, 0, 45deg)
• transform: rotateX(45deg); → Rotates 45 degrees around the X-axis
• rotateY is used to rotate an element around Y-axis (vertical)
• rotateY(45deg) is the same as rotate3d(0, 1, 0, 45deg)
• transform: rotateY(45deg); → Rotate 45 degrees around the Y-axis
• rotateZ is used to rotate an element around Z-axis
• rotateZ(45deg) is the same as rotate3d(0, 0, 1, 45deg)
• transform: rotateZ(45deg); → Rotate 45 degrees around the Z-axis

49 – transform scale and scale3d

<div class="box">Scale Me!</div>
<div class="box scale">Scale Me!</div>
<div class="box scale2">Scale Me!</div>

<div class="box2">Scale Me 3D!</div>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 100px; 
}

.scale {
    transform: scale(1.5);
}

.scale2 {
    transform: scale(1.5, 2);
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 100px; 
    perspective: 800px;
    margin: 100px
}

.scale3d{
    transform: scale3d(1.5, 1.5, 2);
}

a – transform scale

• transform scale allows you to resize an element
• It maintains its aspect ratio
• syntax: scale(s) or scale(s1, s2)
• values: number, percentage. If only ‘s’ defined it scales it uniformly
• if s1 and s2 defined the s1 scales horizontal and s2 vertical
• transform: scale(1.5); → scales up the box 1.5 times its original size
• transform: scale(1.5, 2); → scales up the box horizontally 1.5 times and vertically 2 times

b – transform scale3d

• transform scale3d allows you to scale an element in three dimensions…
• along x-axis, y-axis and z-axis
• It is useful for creating 3D effects
• syntax: scale3d(s1, s2, s3)
• values: s1 → horizontal scale, x
• s2 → vertical scale, y s3 → depth scale, z
• transform: scale3d(1.5, 1.5, 2);

50 – transform scaleX, scaleY and scaleZ

<div class="box" id="box">Original</div>
<div class="box scaleX" id="box">X</div>
<div class="box scaleY" id="box">Y</div>
<div class="box scaleZ" id="box">Z</div>

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;    
    margin: 10px;
    border: 1px solid black
    perspective: 300px;
}

.scaleX {
    transform: scaleX(2); 
}

.scaleY {
    transform: scaleY(2); 
}

.scaleZ {
    transform: scaleZ(2);
}

a – transform scaleX

• transform scaleX allows you to scale an element horizontally…
• along its X-axis.
• transform: scaleX(2); → Scales along X-axis by a factor of 2
• transform scaleY allows you to scale an element vertically…
• along its Y-axis.
• transform: scaleY(2); → Scales along X-axis by a factor of 2
• transform scaleZ allows you to scale an element along its Z-axis
• It can be used to create a 3D effect
• transform: scaleZ(2); → Scales along Z-axis by a factor of 2

51 – transform skew, skewX, skewY

<div class="skewed-element">
    Skewed Text
</div>

<div class="box skewX-box">
    Skew X (30deg)
</div>
<div class="box skewY-box">
    Skew Y (20deg)
</div>
<div class="box combined-skew-box">
    Combined Skew (30deg, 20deg)
</div>

.skewed-element {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 100px; 
    transform: skew(30deg); 
}

.skewed-element2 {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 100px;
    transform: skew(0.05turn, 0.05turn);
}

.skewed-element3 {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 100px;
    transform: skew(10grad);
}

.box {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: white;
    font-size: 18px;
}

.skewX-box {
    background-color: #4CAF50;
    transform: skewX(30deg);
}

.skewY-box {
    background-color: #2196F3;
    transform: skewY(20deg);
}

.combined-skew-box {
    background-color: #FF5722;
    transform: skewX(30deg) skewY(20deg); 
}

a – transform skew

• transform skew skews and an element on 2D
• It distorts and element along X or Y axis
• values (x,y) → deg (degrees) 30deg,
• grad (gradians) 100grad, rad (radians) 0.5rad
• turn (turns)0.25 turn
• if only x is provided then skews on x
• transform: skewX(30deg); → Skews along the X axis by 30 degrees
• transform: skew(0.05turn, 0.05turn); → skews along both axis
• transform: skew(10grad); → Skews along the X axis by 10grad

b – transform skewX and skewY

• transform skewX and skewY is alternative to skew
• skewW skews along X axis
• skewY skews along Y axis
• transform: skewX(30deg); → Skew along the X-axis by 30 degrees
• transform: skewY(20deg); → Skew along the Y-axis by 20 degrees
• transform: skewX(30deg) skewY(20deg); → Combine both skews

52 – transform translate and translate3d

<div class="box">Original</div>
<div class="box translate-single">Translated</div>
<div class="box translate">Translated</div>

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
}

.translate-single {
    transform: translate(150px);
}

.translate {
    transform: translate(50px, 50px);
}

a – transform translate

• transform translate is used to move an element along the X and Y axes.
• The transformation is defined by a two-dimensional vector
• values(x,y): percentage and length values.
• You can also mix the length and percentage values
• transform: translate(150px); → moves the box 150px on X-axis
• transform: translate(50px, 50px); → moves the box 50px on X and Y axes b – transform translate3d, translateX | Y | Z
• transform translate3d allows you to apply translations along X, Y and Z axis.
• The transformation is defined by a three-dimensional vector
• It is useful for creating 3D effects
• values(x, y, z): percentage and length values.
• translateX → moves an element along X axis
• translateY → moves an element along Y axis
• translateZ → moves an element along Z axis

53 – transitions

<div class="transition-box">Hover Over Me!</div>
<div class="box custom hover">Custom (Cubic-Bezier)</div>

.transition-box {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease, transform 0.3s ease;
}

.transition-box:hover {
    background-color: blue;
    transform: scale(1.2); 
}
.custom {
        transition-timing-function: cubic-bezier(0, 1, 1, 0);
    }

a – transition introduction

• transitions provide a way to smoothly animate changes to CSS properties over a specified duration.
• This can add interactivity and visual appeal to your web pages.
• You can do this by using the transition property
• transition property is shorthand for four individual transition properties:
• transition-property, transition-duration, transition-timing-function, and transition-delay
• use of transition: 1 – select the element you want to apply transition
• 2 – choose the property (color, height…) 3 – specify the duration of the transition (1s, 2s…)
• 4 – specify the timing function (linear, ease…) 5 – specify the starting delay

b – transition property

• transition property is a powerful tool for creating smooth animations between different states of an element
• syntax: transition: [ || || || ] [, …]
• you can use: – property and duration only – property, duration and delay
• property, duration and timing-function – property, duration, timing-function and delay
• you can also use multiple properties separated by ‘,’ and even all keyword
• transition: background-color 0.5s ease, transform 0.3s ease; → Transition properties
• transform: scale(1.2); → end state: Scale the box up by 20% on hover

c – transition timing functions

• CSS provides several timing functions that you can use to control the speed curve of a transition
• ease: Default value. Starts slow, speeds up, and then slows down again.
• linear: Constant speed from start to finish.
• ease-in: Starts slowly and then accelerates.
• ease-out: Starts quickly and then slows down.
• ease-in-out: Starts slowly, accelerates in the middle, and then slows down again at the end.
• You can also define custom timing functions using cubic-bezier values.
• A common example is cubic-bezier(0, 1, 1, 0)

54 – transition-behavior, delay, duration and property

.box {
    width: 100px;     
    height: 100px;     
    background-color: #3498db;
    margin: 20px auto;  
    transition-property: background-color, transform;
    transition-duration: 1s, 2s; 
    transition-behavior: allow-discrete; 
    transition-delay: 0.5s;
    transition-timing-function: ease-in;
}

a – transition-behavior and delay

• transition-behavior allows you to control how transitions are animated.
• values: normal → no animation for discrete animated properties
• allow-discrete → Allows discrete changes to be animated
• transition-behavior: allow-discrete; → Allows discrete changes to be animated
• transition-delay can be used to specify a delay for the start of a CSS transition.
• values: s or ms. 0s or 0ms starts immediately
• You can specify multiple values for multiple properties separated with ‘,’
• transition-delay: 0.5s; → transition will start after 0.5s

b – transition-duration and property

• transition-duration defines how long the transition will take to complete
• values: s or ms. 0s or 0ms indicates no transition.
• transition-duration: 1s, 2s; → 1s for the first and 2s for the second property
• transition-property specifies the name or names of properties to which a transition effect should be applied.
• values: none, all and property namesYou can specify multiple values for multiple properties separated with ‘,’
• transition-property: background-color, transform; → applies transition to those properties
• transition-timing-function defines how intermediate values for animated properties are calculated during a transition.
• values: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end and cubic-bezier
• transition-timing-function: ease-in; → starts slowly and finishes quickly.

55 – animation property

<div class="animation-example"></div>

.animation-example {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: exampleAnimation;
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        /*
        animation: exampleAnimation 4s ease-in-out 2s infinite;
        */

    }

    @keyframes exampleAnimation {
        0% { background-color: red; transform: scale(1); }
        50% { background-color: blue; transform: scale(1.5); }
        100% { background-color: green; transform: scale(1); }
    }

a – animation property intro

• animation property can be used to create animations for HTML elements
• It is a shorthand for animation-name, animation-duration, animation-timing-function…
• animation-delay, animation-iteration-count, animation-direction, animation-fill-mode…
• animation-play-state and animation-timeline
• syntax → animation: name duration timing-function delay iteration-count direction fill-mode play-state;
• @keyframes are used to create the animation
• @keyframes exampleAnimation { } → defines key frames animation
• animation-name: exampleAnimation; → uses the defined keyframs animation

b – @keyframes rule

• @keyframes rule is used to define the animation code
• It can be applied to an element using the animation property
• It allows you to create smooth transitions and animations by specifying keyframes, which are the stages of an animation.

syntax →
  @keyframes example {
           from { /* 0% start state */ }
           to { /* 100% end state */ }
    }

*

alternative syntax →
  @keyframes example {
      0% {
        /* CSS properties at the start of the animation */
      }
      50% {
        /* CSS properties halfway through the animation */
      }
      100% {
        /* CSS properties at the end of the animation */
      }
    }

• @keyframes example → The name of the animation (example in this case).
• The keyframe blocks (from, to, or percentages) that define the animation’s stages.

56 – animation properties part 1

<div class="box"></div>

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: slideIn;
  animation-duration: 2s;
  animation-delay: 1s; 
  animation-iteration-count: 3;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
}

a – animation-delay and duration

• animation-name property specifies the name of the @keyframes rule that defines the animation sequence
• you can specify multiple rule names separated with a ‘,’
• animation-name: slideIn; → specifies the rule name
• animation-duration specifies the length of time it takes for an animation to comple one cycle
• values: auto → for time-based animations, fills the entire timeline
• or value specifies in either s or ms
• animation-duration: 2s; →sets the animation duration to 2 seconds

b – animation-timing-function and delay

• animation-timing-function controls how an animation progresses through its duration
• It defines the speed curve of the animation, making it possible for animations to accelerate, decelerate…
• or maintain a constant speed.
• animation-timing-function: ease-in-out; → sets the animation to slow start and slow end
• animation-delay specifies the amount of time that should elapse before an animation starts playing
• This can be specifies in s and ms
• You can specify a negative value. -2s it will start the animation immediately but 2 secs in the animation
• animation-delay: 1s; → 1 sec animation delay

c – animation-iteration-count and direction

• animation-iteration-count specifies the number of times an animation should repeated
• values: infinite → will repeat for ever
• number → you can speficy an integer and a non-integer number. 0.5 will play half animation
• animation-iteration-count: 3; → will repeat the animation 3 times
• animation-direction swhether the animation should play forwards, backwards, or alternate between both directions.
• values: normal, reverse, alternate, alternate-reverse
• animation-direction: alternate-reverse; → Moves backward on odd iterations and forward on even iterations.

57 – animation properties part 2

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: exampleAnimation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timeline: scroll();
}

.pause {
    animation-play-state: paused;
}

.add {
    animation-name: addAnimation;
    animation-delay: 1s; 
    animation-composition: add;
}

@keyframes exampleAnimation {
    from {
        transform: translateX(0);
        background-color: blue;
    }
    to {
        transform: translateX(200px);
        background-color: red;
    }
}

a – animation-fill-mode and animation-play-state

• animation-fill-mode is used to define the styles applied to an element before and after the animation plays.
• values: none → No styles are applied before or after the animation.
• forwards → computed values are kept by the element after the animation ends.
• backwards → computed values are applied to the element as soon as the animation starts, and before the animation actually begins playing.
• both → Combines both forwards and backwards
• animation-fill-mode: forwards; → the box will remain at its final position (translated 200px right) and in its final color (red) after the animation ends.
• animation-play-state allows you to control whether an animation is running or paused
• values: running → The animation is currently playing.
  paused → The animation has been paused, and it will not continue until it is resumed.
• animation-play-state: paused; → stops the animation

b – animation-timeline and animation-composition

• animation-timeline allows you to specify a timeline that controls the timing of animations instead of using the default document timeline
• values: none → no association with a timeline
  scroll() → Binds the animation to the scroll timeline.
• view() → Creates an animation timeline that is based on the visibility of an element within the viewport.
• animation-timeline: scroll() → ensures that the animation progresses in sync with the scrolling position.
• animation-composition controls how multiple animations that target the same properties on a single element combine their effects.
• values: replace → (default) New animations will overwrite previous ones.
• add → New animations will add to the effect of existing animations.
  accumulate → Similar to add, but with additional rules for handling keyframes and timing functions.
• animation-composition: add; → adds to the effects of other animations without replacing them.

58 – Cheatsheet

Basic Selectors

• Element Selector: Targets elements by tag name.
  p { color: blue; }
• Class Selector: Targets elements with a specific class.
  .highlight { background-color: yellow; }
• ID Selector: Targets an element with a specific ID (unique).
  #main-title { font-size: 36px; }
• Universal Selector: Applies to all elements.
  * { margin: 0; padding: 0; }
• Attribute Selector: Targets elements with specific attributes or attribute values.
  [type="text"] { border: 1px solid black; }

Combinators

• Descendant Combinator (Space): Selects elements that are descendants of another element.
  div p { color: red; }
• Child Combinator (>): Selects direct children of an element.
  ul > li { font-weight: bold; }
• Adjacent Sibling Combinator (+): Selects the element immediately following another element.
  h1 + p { margin-top: 20px; }
• General Sibling Combinator (~): Selects all siblings that follow another element.
  h2 ~ p { font-style: italic; }

Box Model

• Margin: The space outside the border.

margin: 10px;
margin-top: 20px;
margin-left: 30px;
margin-right: 40px;
margin-bottom: 50px;

• Padding: The space inside the border.

padding: 10px;
padding-top: 20px;
padding-left: 30px;
padding-right: 40px;
padding-bottom: 50px;

• Border: The line around an element.

border: 1px solid black;
border-width: 2px;
border-style: dashed;
border-color: red;

• Width/Height: Sets the width and height of an element.

width: 300px;
height: 200px;

Typography

• Font Family: Specifies the font family for text.
  font-family: Arial, sans-serif;
• Font Size: Sets the size of the font.
  font-size: 16px;
• Font Weight: Controls the boldness of the font.
  font-weight: bold;
• Text Align: Aligns text within an element.
  text-align: center;

Background

• Background Color: Sets the background color of an element.
  background-color: #f0f0f0;
• Background Image: Sets a background image for an element.
  background-image: url('image.jpg');
• Background Repeat: Controls how the background image is repeated.
  background-repeat: no-repeat;
• Background Position: Positions the background image within an element.
  background-position: center;

Display

• Display Block: Makes an element take up the full width available and start on a new line.
  display: block;
• Display Inline: Allows elements to sit next to each other horizontally.
  display: inline;
• Display Inline-Block: Combines both inline and block properties.
  display: inline-block;
• Display Flex: Creates a flex container for child elements.
  display: flex;
• Display Grid: Creates a grid container for child elements.
  display: grid;

Positioning

• Position Static: Default value. Elements are positioned according to the normal flow of the document.
  position: static;
• Position Relative: Moves an element relative to its normal position.

position: relative;
top: 20px;
left: 30px;

• Position Absolute: Positions an element relative to the nearest positioned ancestor (not static).

position: absolute;
top: 50px;
right: 100px;

• Position Fixed: Keeps an element in a fixed position even when scrolling.

position: fixed;
bottom: 20px;
left: 30px;

Flexbox

• Flex Direction: Defines the direction of the main axis (row or column).

flex-direction: row; /* Default */
flex-direction: column;

• Justify Content: Aligns items along the main axis.

justify-content: flex-start; /* Default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;

• Align Items: Aligns items along the cross axis.

align-items: stretch; /* Default */
align-items: flex-start;
align-items: center;
align-items: flex-end;

Grid

• Grid Template Columns: Defines the number and size of columns in a grid container.
  grid-template-columns: repeat(3, 1fr);
• Grid Template Rows: Defines the number and size of rows in a grid container.
  grid-template-rows: auto;
• Justify Items: Aligns items along the row axis within their grid area.

justify-items: start; /* Default */
justify-items: center;
justify-items: end;
justify-items: stretch;

• Align Items: Aligns items along the column axis within their grid area.

align-items: start; /* Default */
align-items: center;
align-items: end;
align-items: stretch;

Other Useful Properties

• Color: Sets the color of text.
  color: #333333;
• Opacity: Sets the opacity level of an element.
  opacity: 0.5;
• Margin/Padding: Controls the space around or inside an element.

margin: 10px;
padding: 20px;

• Box Shadow: Adds a shadow effect to an element.
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
• Transform: Applies 2D or 3D transformations to an element.
  transform: rotate(90deg);

THE END