CSS Notes 2026

Updated 2026.07.14.c

1 Introduction

  1. Margins are large so if this is printed, it will look nicer.
  2. CSS properties are in lower case. VARIABLES that the user can change in a property are in UPPERCASE. Choices for values in a property are in lower case.

2 HTML

2.1 HTML template/skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proj 09, BEM</title>
  <!-- <link rel="stylesheet" href="proj03boxxx.css"> -->

  <style>
    * { 
      box-sizing: border-box;
      margin: 8px;
    }


  </style>
</head>
<body>


  <script>
  /* Script must be down here or the document will not load before
  JavaScript executes and you will get an error like 
  "element does not exist" when getting an element by ID or class. */
  </script>
</body>
</html>

2.2 article

Often used to make a card or article with multiple lines.

2.3 button

  1. Syntax: <button id="" style="" onclick="">Button text</button>
  2. A width of X and height of 0.3X works well.
  3. VSC Emmet: button.classname<tab>

2.4 del

This is used now instead of strikethrough. A horizontal line will be shown in the center of the text.

  1. Syntax: <del>Delete this</del>

2.5 video

Attributes:

  1. src="https://mysite.com/video.mp4" = URL of the video
  2. controls = a boolean, if this exists then show the browser's native video controls.
  3. type="VALUE" = values can be video/webm, video/mp4.
  4. autoplay = a boolean, if this exists then autoplay the video when page loads.
  5. controlslist="value" = which controls to allow on the video. Values include: nodownload, nofullscreen, noremoteplayback. Ex: controlslist="play nodownload". See https://wicg.github.io/controls-list/explainer.html
  6. crossorigin
  7. disablepictureinpicture
  8. disableremoteplayback
  9. height="100px"
  10. loading="value"
  11. loop = if this exists allows the video to play over and over again.
  12. muted = if this exists the video starts as muted.
  13. poster="https://mysite.com/image.jpg" = an image to show while the video is loading.
  14. preload="VALUE"
  15. `width="100px"

In the below example the browser first tries to show a .webm video. If that doesn't work then it tries to show an mp4 video. If that doesn't work then an error message shows.

<video controls>
  <source src="myvideo.webm" type="video/webm" />
  <source src="myvideo.mp4" type="video/mp4" />
  <p>ERROR: Your video doesn't support HTML video.</p>
</video>

More info at: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video.

3 CSS Units

3.1 COLOR, CSS Colors

CSS colors (COLOR) can be specified in many ways:

  1. COLORNAME: a predefined color name like "lightgray". See https://www.w3schools.com/cssref/css_colors_legal.php for legal color names.
  2. HEXCODE: "#c0c0c0" for gray.
  3. RGB(RED, GREEN, BLUE): for rgb values which range from 0 to 255. Each color is RED, GREEN, and BLUE values.
  4. RGBA(RED, GREEN, BLUE, ALPHA): where the A is opacity from 0.0 to 1.0.
  5. HSL(HPCT, LPCT, LPCT) or HSLA() colors where A is Alpha, or opacity. The values are for HUE, SATURATION, and LIGHTNESS. HUE ranges from 0 to 360. Other values are a percent from 0% to 100%. Saturation: 100% is full color, 50% is partial gray with some colors, 0% is full gray scale, no color.

3.2 LENGTH, CSS Length

Many items take a "length" as a value. Lengths can be absolute or relative. Lengths are a number followed by a suffix. Ex: 50% or 2em or 2vw.

  1. Here are the suffixes for absolute lengths: cm, mm, in, px, pt (points), pc (pica)
  2. Here are the suffixes for relative lengths: em (the width of capital M in the current font), ex (relative to x-height of current font, rarely used), ch (relative to the width of zero "0"), rem (relative to the font-size of the root element), vw (relative to 1% of the width of the viewport), vh (relative to the height of the viewport), vmin (relative to the 1% of the viewport's smaller dimension), vmax (relative to 1% of the viewport's larger dimension), % (relative to parent element).
  3. 100vh means 100% of the viewport height.
  4. 50vw means 50% of viewport width.
  5. 1rem is the base type size of the HTML element. By default 1rem is 16px, 2rem is 32px.
  6. Avoid em and use rem instead for responsive websites. rem is a relative size.
  7. In some cases like grids the size can be fr like 1fr or 2fr, which means fraction.

4 CSS selectors

Selectors are used to select HTML elements to apply the style to. CSS selectors are "greedy", that is they will select all the tags that match the selector syntax.

Here's the basic syntax:

body {
  background-color: grey;
  }
  1. * {} = select all elements.
  2. p {} = select all p elements.
  3. .classname {} = select by class name
  4. tagname {} = select all tags that match this tagname. Ex: body {}
  5. #id {} = select the tag(s) with this ID.
  6. .classname tagname {} = select the tagname inside a certain class.
  7. .parentclass .childclass {} = Select all childclass elements inside parentclass.
  8. .parent > .child {} = matches only direct children of the class "parent".
  9. div + p {} = match only next sibling.
  10. div ~ p {} = match all following siblings.
  11. h1, h2, p {} = this CSS applies to all these tags, they are grouped. Match h1 or h2 or p.
  12. div.class1 {} = Compound selector. Select div with a class of "class1".
  13. .class1.class2 {} = Select where the tag has both classes. .button.primary {}
  14. p.mypara = Select all tags with this class.

4.1 Attribute selectors

  1. input[type="text"] {} = match only input boxes of type text. Patterns: [attr] (if attribute exists?), [attr=value] for exact match of attribute value, [attr^=val] if attribute starts with, [attr$=val] for if attribute ends with, [attr*=val] if attribute contains val.

4.2 State-based pseudo classes

  1. :root {} or body {} = define default settings for whole document.
  2. a:hover {} = change color or background of a link when the mouse moves over it.
  3. input:focus {} if input box has focus
  4. button:active {} = if button is active.
  5. :focus = When a text field has focus you can change the background-color to light yellow.
  6. :active =

4.3 Other pseudo-classes

  1. :checked = if a checkbox is checked.
  2. :indeterminate = if a radio button is neither checked or unchecked, like when a page first loads.
  3. :required = when an input field is required.
  4. :optional = when an input field is not required.
  5. :link = Normally for <a> anchor element.
  6. :visited = Normally for <a> anchor element.
  7. :first-child = div:first-child {} finds the first child of a div.
  8. :last-child = div:last-child {} finds the last child of a div element.
  9. :nth-child(n) = apply to nth child like div:nth-child(2) to apply style to second child of <div>.
  10. :lang(COUNTRY_CODE1, COUNTRY_CODE2, COUNTRY_CODE3...) = apply to elements with a specific language or lang="en" element attribute. Ex: body:lang(en-US) {} See MDN. The language codes are in BCP 47 language codes list. RFC 5646 is a technical definition of how tags are structured and used: https://datatracker.ietf.org/doc/html/rfc5646, Language codes, Language tag lookup.
  11. :empty = select elements that have no content and no children. Ex: p:empty {}.

There are more pseudo-classes at W3Schools.

4.4 Structural pseudo classes

  1. li:first-child {} = for first child only.
  2. li:last-child {} = for last child only.
  3. li:nth-child(2) = for 2nd child only.
  4. ::placeholder {} = change all input box placeholder values.
  1. input:checked {} = for input box that is checked. For check box?
  2. input:disabled {} = for disabled input box. Show the user that it's disabled maybe with a gray background.
  3. input:valid {} = for valid text.

4.6 Logical pseudo-classes

  1. :is(.a, .b) { } = group multiple selectors in one rule. Select class a or class b. Equivalent to .a, .b {}. Useful when combining with other selectors. Select element with a class of a and id of #id: :is(.a, #id) { }
  2. not(.class) = does not have the class .class.
  3. .demo :not(.pink) { } = choose items that have .demo class but not .pink classes.
  4. :where(.a, .b. #id) { } = always has ZERO specificity. Select match elements with class "a" or "b" or #id. In CSS the more specific selector wins. Safe for base styles which will be overridden in later CSS. Ex: .card :where(h1, p1, 1) {color:gray;}

4.7 Pseudo-elements (partial element selection)

  1. p::before {} = possibly to change content or add an icon before someting.
  2. p::after {} = do something after the element.
  3. p::first-letter {} = possibly to capitalize first letter of a sentence regardless of what the HTML looks like.
  4. p::first-line {} = make first line all small upper case?

4.8 Scope selectors

  1. div:has(p) {} = if a div has a p child tag.
  2. :scope > .child {} = :scope refers to current root element.

4.9 Class selectors

Select all tags with .myclass as the class.

.myclass1 {
}

Item must have both classes:

.class1.class2 {
}

4.10 ID selectors

#Myid {
  color: blue;
}

4.11 Parent child selectors

Old way:

.parent .child {
}

With CSS nesting:

.parent {
  color: blue;

  .child {
    color: red;
  }
}

Group selectors. Find .parent class with .child1 class OR .parent class with .child2 class.

.parent .child1, .parent .child2 {
}

4.12 @import url()

Import a font, image or something else. This imports a Google font package.

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

4.13 @media ()

@media checks the size of the screen. It's useful for setting limits on elements for different screen sizes. Inisde the parentheses must be something to check, typically max-width or width.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media for more examples.

Examples

/* You can have multiple @media statements for different screen sizes. */
    /* Styles if screen width < 480px. Instead of 'max-width' we can 
    also use 'width'.    */
    @media (max-width: 480px) { 
      .title {
        font-size: 32px;
      }
    }
    /* Styles if screen width < 768px */
    @media (max-width: 768px) { 
      .title {
        font-size: 36px;
      }
    }
/* At the top level of your code */
/* "screen" means just use it for screen. Other values are: "all" and "print".
*/
@media screen and (width >= 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (width >= 900px) {
    article {
      display: flex;
    }
  }
}

4.14 CSS variables

/* Define CSS variables */
    :root { 
      --primary-color: #edf2fc;
      --secondary-color: #212121;
    }
/* Use CSS variables */
    body {
      background: var(--primary-color);
      font-family: "Courier Prime", monospace;
    }

5 CSS commands

CSS commands come after the selector and after {} and are like "color:" which allows the user to specify a foreground color. A command has many values that can go with it and many value styles.

  1. You MUST put a semi colon after each command's value: color: red;.
  2. Any fake attribute can be added to an HTML element and addressed with CSS or JavaScript.

5.1 color: COLOR

The text, or foreground, color of an element.

  1. Use a hex code color:#ff0033;
  2. Use a color name: color: white;
  3. Use an rgb() or rgba() with alpha: color: rgba(255,128,128,0.15);. RGB colors have values 0 to 255. Alpha channel (a portion) value is 0.0 to 1.0.
  4. Use hsl().
  5. Color names supported by all browsers: https://www.w3schools.com/cssref/css_colors.php
  6. More color formats: https://www.w3schools.com/cssref/css_colors_legal.php

5.2 background-color: COLOR

Same syntax and values as for color:.

5.3 display: KEYWORD

  1. Syntax: display: none | inline | block | inline-block | list-item | table | table-cell | table-row | flex | inline-flex | grid | inline-grid;
  2. flex: use with flex box
  3. grid: use width grid, different from flex box.
  4. Use this for menu items each in its own div but to get them on line line. display: flex;

Example

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>CSS Anim ch 8 Menu</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
     <!-- See https://pastebin.com/jMG2ADx4 -->
    <style>
      * { 
        box-sizing: border-box;
        margin: 8px;
        }
      body {
        font-family: "Roboto", sans-serif;
        background-color: rgb(209, 207, 207);
        }

      .title {
        font-size: 16px;
      }
      .title:hover {
        transition: all 0.5s ease-in-out;
        background-color: rgb(239, 174, 174);
      }
      .menu {
        display: flex;
      }
      .menu-link {
        transition: all 0.5s ease-in-out;
      }
      .menu-link:hover {
        transition: all 0.5s ease-in-out;
        font-size: calc(100% + 4px);
        background-color: yellow;
        translate: translateY(-10px);
      }
      .image:hover {
        transition: all 0.5s ease-in-out;
        width: calc(200px + 10px);
      }
    </style>
</head>
<body>
  <div class="title-wrapper">
    <h1 class="title">The Website Title!</h1>
  </div>
  <div class="menu">
    <div class="menu-item"><a href="#" class="menu-link">Home</a></div>
    <div class="menu-item"><a href="#" class="menu-link">About Us</a></div>
    <div class="menu-item"><a href="#" class="menu-link">Services</a></div>
    <div class="menu-item"><a href="#" class="menu-link">Portfolio</a></div>
    <div class="menu-item"><a href="#" class="menu-link">Contact Us</a></div>
  </div>

  <img src="https://i.pravatar.cc/300?img=63" width="200" alt="Old man in a hat" class="image">
  <div>Real world challenge ch 8</div>
  <div>My setup: VSC v1.119 on Windows 11 using Live Server extension in VSC. So I can test the web page in Live Server in another browser window. Live Server opens the web page in Google Chrome v150.0.7871. </div>
  <div>For free test images see <a href="https://pravatar.cc">pravatar.cc</a>.</div>

</body>
    <script>
    </script>
</html>

5.4 width: LENGTH

  1. Use an absolute value: 100px
  2. Use a percent: 70%
  3. Use total width: 100vw.

5.5 max-width: LENGTH

Same as width:. This is the max width of the element allowed if the browser window is resized.

5.6 height: LENGTH

  1. Same as width: with these differences:
  2. Use total or percent of viewport: 100vw for 100% of viewport width.

5.7 max-height: LENGTH

Same as max-width for this applies to height.

5.8 content: 'string'

Adds content before or after or inside an element. Content is required for :after and :before but can be blank.

h2:after {
content: '*'; /* Use actual printable character */
  }
li:before {
  content: ' \00a7'; /* Use hex code */
  }

More entities:

  1. https://www.w3schools.com/cssref/css_entities.php

5.9 font-family: FONT1<,FONT2...>

  1. Syntax: font-family: "1+FONTNAMES, GENERIC_FONT_NAME"
  2. Example: font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  3. GENERIC_FONT_NAME = serif, sans-serif, monospace, system-ui, cursive, fantasy, math, ui-sans-serif, ui-serif, ui-monospace, ui-rounded.
  4. sans-serif is a generic font name, or "web safe font", that most browsers support.
  5. Fonts are used in the order they are specified here, the last font is a "fallback font" which is only used if all other fonts are not supported by the browser.
  6. Font names with spaces must be 'single quoted' like 'Times New Roman'.
  7. Font names must be supported by your browser or linked via https://fontawesome.com or https://fonts.google.com fonts in the HTML header.
  8. Fonts can be imported using @import.
  9. Go to https://fonts.google.com to include or @import more fonts for free.
  10. Web safe fonts: https://www.w3schools.com/cssref/css_websafe_fonts.php

5.10 font-size: VALUE

  1. Syntax: font-size: medium|xx-small| x-small|small| large|x-large| xx-large|smaller| larger| LENGTH|PERCENT| initial|inherit;
  2. Use pixels: font-size: 10px;
  3. Use predefined words: font-size: large;
  4. Use percent: font-size: 120%;

5.11 font-weight: WEIGHT

  1. Syntax: font-weight: normal| bold| bolder| lighter| NUMBER| initial| inherit;
  2. Use a number 100 to 900 in increments of 100: font-weight: 200;
  3. Use a word: font-weight: bold;
  4. If there's an error then 'normal' is used, it's a medium weight.

5.12 letter-spacing VALUE

  1. Syntax: letter-spacing: 8px;
  2. Change the spaces between letters. This can also be animated.

5.13 border: BORDER-WIDTH BORDER-STYLE BORDER-COLOR

  1. Syntax: border: BORDER-WIDTH BORDER-STYLE BORDER-COLOR|initial|inherit;
  2. See below for formats for BORDER_WIDTH, BORDER-STYLE, BORDER-COLOR.
  3. Basic example: border: 5px solid red;
  4. This replaces border-style, border-color, border-width.

5.14 border-color:

  1. Syntax: border-color: COLOR;
  2. Basic example: border-color: red;

5.15 border-style:

  1. Syntax: border-style: VALUE; or border-style: TOP/BOTTOM LEFT/RIGHT or border-style: TOP LEFT/RIGHT BOTTOM or border-style: TOP RIGHT BOTTOM LEFT
  2. Basic example: border-style: 5px solid red;
  3. Values for VALUE: none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden
  4. Requires border-width and border-color.

5.16 border-width:

  1. Syntax: border-width: VALUE; or border-width: TOP/BOTTOM LEFT/RIGHT or border-width: TOP LEFT/RIGHT BOTTOM or border-width: TOP RIGHT BOTTOM LEFT
  2. Basic example: border-width: 5px;
  3. Values for VALUE: thin, medium, thick, LENGTH (4px or 1.5rem)
  4. Requires border-width and border-color.

5.17 border-top, border-bottom, border-right, border-left

  1. Syntax: border-top: VALUE BORDERSTYLE COLOR

5.18 padding:

This applies to INSIDE the element. Units that can be used: "auto", px, em, or percent.

  1. Syntax: padding: ALLSIDES; /* Inside margin */
  2. Syntax: padding: TOPBOTTOM LEFTRIGHT;
  3. Syntax: padding: TOP LEFTRIGHT BOTTOM;
  4. Syntax: padding: TOP RIGHT BOTTOM LEFT;

5.19 margin:

This applies to outside the element. Units that can be used: "auto", px, em, or percent. Margin adds spacing between elements on the page.

  1. Syntax: margin: TOP_BOTTOM_LEFT_RIGHT; /* Outside margin */ This applies to all margins, top, bottom, left, and right.
  2. Syntax: margin: TOPBOTTOM LEFTRIGHT;
  3. Syntax: margin: TOP LEFTRIGHT BOTTOM;
  4. Syntax: margin: TOP RIGHT BOTTOM LEFT;

5.20 border-box:

  1. Syntax: border-box: content-box|border-box;
  2. For keyword content-box the width of the element is the width of the content only, it ignores the width of padding and border.
  3. For keyword border-box the width of the element INCLUDES the width of the content, padding and border.

5.21 top, bottom, left, right

These act differently depending on the value of position:.

5.21.1 top:

  /* Goes to top right of browser window. */
  position: absolute;
  top: 0;
  right: 0;

5.21.2 bottom:

  postion: absolute;
  bottom: 0; /* Goes at bottom of browser window, good for headers and footers */
  /* This item will not move when web page is scrolled. */
  postion: fixed;
  bottom: 0; /* Goes at bottom of browser window, good for footers */

5.21.3 left:

5.22 opacity:

Value is 0% (not transparent at all) to 100% (completely transparent). For a :hover effect try 30%;

  1. Syntax: opacity: PERCENT;
button:hover {
  opacity: 30%;
  }

5.23 box-shadow: none|HOFFSET VOFFSET [BLUR_RADIUS|[SPREAD]] [COLOR] [inset] [initial|inherit];

box-shadow puts a box around the HTML tag. box-shadow has more options than text-shadow.

  1. HOFFSET: Horizontal offset. Positive is rightward.
  2. VOFFSET: Vertical offset. Positive is down.
  3. BLUR: Blur radius is a value. 2px is a slight blur. 6px is very blurry.
  4. SPREAD: larger positive number makes the shadow larger. Make the number negative to shrink the shadow. Spread requires a blur value first.
  5. COLOR: Standard color format. This is a nice gray blur with some alpha transparency. box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5)
  6. inset: if HOFFSET and VOFFSET are positive, inset will put the shadow INSIDE the box in the upper left.
  7. Ex: box-shadow: 5px 5px lightgreen;

5.24 text-shadow: HOFFSET VOFFSET [BLUR_RADIUS] COLOR|none|initial|inherit;

  1. HOFFSET: horizontal offset. Positive puts shadow to right, negative value puts shadow to the left of the text.
  2. VOFFSET: vertical offset. Positive puts shadow lower, negative value puts shadow above the text.
  3. BLUR_RADIUS of 2px is a slight blur. 6px is very blurry.
  4. COLOR: Standard CSS color format. rgba(0,0,0,0.5) is a small, nice gray shadow that fades nicely.

5.25 transition: [CSSPROPERTY] DURATION [TRANSTYPE] DELAY

This controls how long a transition takes, like button:hover. Separate transition types with a comma. Transition properties go in the non-normal selector like button:hover per Reddit.

  1. Basic Syntax: transition: [CSSPROPERTY] DURATION [TIMING_FUNCTION] [DELAY]; Affects all properties. Use Nms for milliseconds or Ns for seconds, like 0.5s.
  2. Syntax 2: transition: opacity 300ms; Affects only opacity transitions.
  3. Full Syntax: transition: [CSSPROPERTY] DURATION TIMINGFUNCTION DELAY
  4. CSSPROPERTY can be a CSS property or all. all is default. Properties affected by transition: many like color, backgroud-color, padding, transform, etc.
  5. Ex: transition: 200ms; for 200 milliseconds. Transitions normally are 200-400ms.
  6. Link: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

5.26 transition-duration: TIME

  1. Specify the time in "s" or "ms" for the transition to happen. Ex: 0.5s or 500ms.

5.27 transition-property: CSSPROPERTY_LIST

  1. List properties to be affected by transition.
  2. Ex: transition-property: font-size, color;

5.28 transition-timing-function: TIMINGFUNCTION

  1. How the transition works over time.
  2. Use one of these values: ease, ease-in, east-out, ease-in-out, linear (default), step-start, step-end, steps(4, end).
  3. steps(4,end) defines 4 steps to finish the transition. This can make it look jumpy if that's the effect you want.

5.29 Animation

5.29.1 @keyframes KEYFRAMENAME {}

Defines an animation at 0% to 100% at a minimum. Each keyframe definition must have a different name. To have the animation go back and forth use animation-direction: alternate;.

    /* This is the minimum for @keyframs */
    @keyframes pointdown { /* Define animation */
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(16px);
        }
      100% { /* This state must match original for smooth animation */
        transform: translateY(0);
      }
    }

5.29.2 animation KEYFRAMENAME TIME [infinite|ITERATION_COUNT [DIRECTION]] [FILL-MODE]

This is the combined shorthand syntax.

  1. Full Syntax: animation KEYFRAMENAME TIME(ms) TIMING_FUNCTION DELAY ITERATION_COUNT DIRECTION FILL-MODE PLAY-STATE
  2. KEYFRAMENAME = name given in the @keyframes area.
  3. TIME = time in milliseconds to run the animation once. Ex: 1000ms. Or in seconds: 2s.
  4. TIMING_FUNCTION = same values as for CSS property animation-timing-function like linear| ease| ease-in| ease-out| ease-in-out| step-start| step-end| steps(INT,start|end)| cubic-bezier(n,n,n,n)| initial| inherit;
  5. DELAY = delay before the animation starts like 2s.
  6. ITERATION_COUNT = animate this many times then stop. Ex 5.
  7. DIRECTION = which direction, choices are normal | reverse | alternate | alternate-reverse | initial | inherit; alternate will run the animation forwards and backwords for you. You do not have to define the animation in 3 steps where the last step is the same as the starting step. Two steps will work.
  8. FILL-MODE = a style when the animation is not playing. Values are: none | forwards | backwards | both | initial | inherit;
  9. PLAY-STATE = Use this property in a JavaScript to pause an animation in the middle of a cycle. Values: paused | running | initial | inherit;
  10. Ex: animation pointdown 1000ms This runs only once.
  11. Example for infinite: animation pointdown 1000ms infinite
  12. alternate will run the animation forwards and backwards automatically. alternate-reverse will reverse the animation smoothly so it doesn't jump around to the starting point each time.
  13. Link https://www.w3schools.com/cssref/css3_pr_animation.php

5.29.3 animation-name: KEYFRAMENAME

5.29.4 animation-direction: DIRECTION

  1. Syntax: animation-direction: DIRECTION
  2. Values are: normal which is default. reverse. alternate to make it go back and forth. alternate-reverse starts at end of keyframes.

5.29.5 animation-duration: TIME

  1. Ex: 1s for 1 second, or 500ms for 500 milliseconds.

5.29.6 animation-iteration-count: COUNT | infinite

  1. If animation-direction is alternate then the number of times the animation plays is half of animation-iteration-count.

5.29.7 animation-play-state: running | paused

This can be changed via JS to start and stop an animation via a button click or another event.

5.29.8 animation-timing-function: TIMING_FUNCTION

  1. Choose one of: ease, ease-in, ease-out, east-in-out, linear, step-start, step-end, steps(4,end)

5.29.9 animation-fill-mode: FILLMODE

  1. Not needed if animation-duration is infinite.

5.29.10 translate(XAMOUNT,YAMOUNT), translateX(XAMOUNT), translateY(YAMOUNT)

    p {
      transform: translateY(16px);
      animation: pointdown 1000ms; /* Specify animation here */
    }
    @keyframes pointdown { /* Define animation */
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(16px);
      }
    }

5.29.11 Animate a gradient

From https://www.w3schools.com/cssref/tryit.php?filename=trycss3_property1

<!DOCTYPE html>
<html>
<head>
<style>
@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}

@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

.ex1 {
  background: linear-gradient(var(--startColor), var(--endColor));
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0%,
  100% {
    --startColor: #EADEDB;
    --endColor: #BC70A4;
  }
  50% {
    --startColor: #BC70A4;
    --endColor: #BFD641;
  }
}

#grad1 {
  height: 200px;
}
</style>
</head>
<body>

<h1>The @property Rule</h1>

<div id="grad1" class="ex1">This is the gradient.</div>

</body>
</html>

5.30 CSS Functions.

Functions can be used to calculate the length and put in values. There are many built-in functions like calc(), cos(), etc. They can be used with filter: or in other ways.

Link: https://www.w3schools.com/cssref/css_functions.php

5.30.1 blur(1px)

Add blur to an element. 1px blur is plenty but the words are still readable. 2px makes text unreadable.

h1 {
  filter: blur(2px);
}

#img1 {
  filter: blur(2px);
}

#img2 {
  filter: blur(6px);
}

It works on images too: <img class="blur" width="100px" src="https://countryflagsapi.netlify.app/flag/us.svg">

5.30.2 brightness(PCT)

Makes the image darker (<100%) or brighter (>100%). 0% turns the image black.

  <img width="100px" style="filter: brightness(50%);" src="https://countryflagsapi.netlify.app/flag/us.svg">

5.30.3 calc(EXPRESSION)

Calculate a new number or value.

.header {
    font-size: calc(100% + 4px);
    }

5.30.4 clamp(MINSIZE, STARTSIZE, MAXSIZE)

  1. Syntax: CSSPROPERTY: clamp(MINSIZE, STARTSIZE, MAXSIZE)

Responsive setting to set the <h1> element's font-size to 5vw, but never smaller than 1.5rem or larger than 3rem: font-size: clamp(1.5rem, 5vw, 3rem);

Set the <div> element's font-size to 2.5vw, but never smaller than 1rem or larger than 2rem. Also set the div container to 50% wide, but never smaller than 200px or wider than 600px:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

div {
  border: 1px solid green;
  padding: 10px;
  font-size: clamp(1rem, 2.5vw, 2rem);
  width: clamp(200px, 50%, 600px);
}

5.30.5 conic-gradient(COLOR1, COLOR2, COLOR3)

You must define at least 2 steps.

  1. Syntax: background-image: conic-gradient(red, yellow, green);

5.30.6 counter(NAME [,CNTRSTYLE])

This allows you to put numbered section headers in your page.

  1. Syntax: counter(NAME, CNTRSTYLE)
  2. Default CNTRSTYLE is Arabic numbers.
  3. Some CNTRSTYLES: decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-roman (Roman numbers like i, ii, iii...), upper-roman. And symbols: disc, circle, square. There are more international numbering systems supported.
  4. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/counter
  5. Use with counter-reset if you need to change the counter. Also use with counter-set, counter-increment, @counter-style which defines a custom style.
<style>
body {
  counter-reset: section;
}

h2::before { /* Typical usage */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
<body>
  <h2>conic-gradient()</h2>
  <div id="conicgradient">This has a conic gradient.</div>

  <h2>counter()</h2>
</body>

Using emoji as a counter style.

@counter-style thumbs {
    system: cyclic;
    symbols: "👍";
}

.mylist li::before {
    content: counter(item, thumbs);
}

5.30.7 grayscale(PCT)

Converts an image to grayscale. This could be useful, on hover the image could turn to color. Enter a percent like 82%.

  1. Syntax: filter: grayscale(VALUE)
  2. Values of 1 will be completely grayscale with no color at all. Or use a percent like 60%.

5.30.8 invert(PCT)

Inverts the colors of an image.

  1. Syntax: filter: invert(PERCENT);
    <img width="100px" style="filter: invert(100%);" src="https://countryflagsapi.netlify.app/flag/us.svg">
    <img width="100px" style="filter: invert(30%);" src="https://countryflagsapi.netlify.app/flag/us.svg">

5.31 CSS @ rules

  1. See https://www.w3schools.com/cssref/css_ref_atrules.php

5.31.1 @import

Import another style sheet into yours.

<style>
@import '/dir/style01.css';
@import url('https://mysite.com/style01.css');
</style>

5.31.2 @media(CONDITIONAL)

Check for screen size.

/* You can have multiple @media statements for different screen sizes. */
    /* Styles if screen width < 480px */
    @media (max-width: 480px) { 
      .title {
        font-size: 32px;
      }
    }
    /* Styles if screen width < 768px */
    @media (max-width: 768px) { 
      .title {
        font-size: 36px;
      }
    }

Screen sizes:

  1. Small smart phone: 480px
  2. Larger smart phone: 640px
  3. Tablets: 768px
  4. Laptops: 1024px
  5. Desktops: 1280px

5.31.3 @page

Customize the printed version of the page.

5.31.4 @property

Define custom CSS properties directly in the stylesheet without having to run Javascript. This at-rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not.

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
body {
  backgound-color: var(--my-color);
}

5.31.5 @supports

Test whether a browser supports a CSS feature or not. See these web pages:

  1. https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule
  2. Info on @supports: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports
  3. https://css-tricks.com/almanac/rules/s/supports/

Syntax:

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

/* OR operator */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

/* Check to see if browser does not support a feature */
@supports not (transform-origin: 10em 10em 10em) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

Test support via pseudo-elements.

@supports selector(::--webkit-scrollbar) {
  color: green;
  }

Test for font supported.

@supports font-tech(color-COLRv1) {
  body {
    font-family: "Bungee Spice", fantasy;
  }
}

Does browser support a specific at-rule?

@supports at-rule(@keyframes) {
}

Example:

/* use this CSS if the browser does not support display: grid */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* use this CSS if the browser supports display: grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

5.31.5.1 Nesting

Two ways to check for nesting in a browser.

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

Or use @supports.

@supports (selector(&)) {
  /* nesting parsing available */
}

6 Responsive web design

Responsive web design expands or contracts elements nicely when the screen size is changed, or when devices with a smaller screen are used. Use flexbox, css grid, @media queries to find screen size and apply different styles for different screen sizes.

Sources: https://www.youtube.com/watch?v=2IV08sP9m3U

  1. Use relative padding. padding: min(5em, 8%); to use smallest value for padding.
  2. Use responsive font sizes. Don't use UOM px, use rem instead for font size. rem is a relative font size and is the root element's font size. font-size: 10vw; for 10% of viewport width.
  3. Use clamp(MINVAL, PREFERREDVAL, MAXVAL); Ex: font-size: clamp(1.8rem, 5vw, 5rem);
  4. Responsive images. max-width: 100%; height: auto; causes image to stretch in some cases.
    1. Define the height and width in the HTML element: <img src="images/sunset1.jpg" width="600" height="600"> No longer needed in Chrome v149+?
  5. For multiple images on a page use aspect-ratio: 1/1; for desktops, or aspect-ratio: 16 / 9; for landscape mode. For smartphone in portraite mode use aspect-ratio: 9 / 16; and images are stretched. Also use object-fit: contain; and you will get empty spaces around the images. So use object-fit: cover; and there will be no empty spaces.
  6. Use height: 100vh; to make element cover entire screen height. But on Smartphone the height is bigger than the screen so the user has to scroll down to see the whole element. CSS introduces a new UOM called dvh or "dynamic viewport height". If we do height: 100vh; height: 100dvh; the browser will just ignore the method that doesn't work.
  7. In JS hide or remove the inert HTML attribute so the user does not accidentally click a hidden menu or item.
  8. Chrome Dev Tools does not show problems in mobile phone screens, you must actually test the whole site on an actual mobile phone.

6.1 Using grids

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>Grid Test 1</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
    <!-- base href="https://mysite.com/base/" target="_blank" -->
    <!-- Using Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <style>
      :root {
        --primary-color: lightblue;
      }
      body {
        min-height: 100dvh;
        margin: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #3730a3, #2563eb);
        font-family: "Inter", sans-serif;
        box-sizing: border-box;
      }
      .grid-container {
        display: grid; /* Required for container */
        grid-template-columns: 200px 200px 200px; /* Create columns */
        grid-template-rows: 200px 200px 200px; /* Same but for rows */
        gap: 1em; /* Gap between columns and rows */
      }
      .item {
        padding: 2em;
        background-color: var(--primary-color);
        color: white;
        text-align: center;
        border-radius: 8px;
        font-size: 2rem;
      }

    </style>
</head>
<body>
  <!-- From CSS grid tutorial  https://www.youtube.com/watch?v=JYfiaSKeYhE. A modern and responsive layout. -->
  <div class="grid-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 class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
  </div>

  <script src="scripttemplate.js"></script>
  <script>

  </script>
</body>
</html>
  1. More responsive: If we use grid-template-columns: 1fr 1fr 1fr; /* Create columns */ then each column is 1 fraction wide.
  2. To make column 3 twice the width use grid-template-columns: 1fr 1fr 2fr; /* Create columns */
  3. Use grids for a sidebar.

6.1.1 Implicit grids

If you get your content from a database, for example, then the number of search results can be different each time. Use grid-auto-rows: which controls the size of each row.

  1. Flexbox can work better for responsive websites.
  2. In each item element add attribute style="grid-area: box-1" and change "box-1" to make each item element name unique.

6.2 Using flexbox

This starts by having one parent container like .flex-parent, and multiple child boxes with a class .flex-child. And in the class .flex-parent set display: flex;.

  1. This is a good tutorial: https://www.youtube.com/watch?v=lVvPFJBtOzQ

7 CSS Tips

  1. Make circular button: Make a <button>, style it with: border-radius: 50%;.
  2. Make word definition popup. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media

8 Links

8.1 CSS Reference

  1. CSS Reference. This has a nice search function but this might be generaic CSS commands that work on all browsers. This has a lot more reference info as well like for: selectors, pseudo-classes, pseudo-elements, CSS entities. https://cssreference.io/
  2. MDN CSS Reference. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  3. W3C properties and reference. https://www.w3schools.com/cssref/index.php

8.2 Check browser features

  1. BrowserLeaks. This tests HTML5, CSS features and more. Tests for Javascript 5, JS6, JS7 called "EcmaScript" or ES5. This gives you a features hash and JSON dump of results. Each result here has a link to the specs and the code that produced the result. https://browserleaks.com/features
  2. Infyways. https://www.infyways.com/tools/browser-feature-detector/
  3. Toolv. Checks for clipboard, etc. This one also checks for hardware like amgient light, proxmity sensor, magnetometer, and much more. Copy report to clipboard or download a JSON file of results. https://toolv.com/en/app/browser-feature-detector

8.3 CSS HTML testing

Sites where you can use HTML, CSS and JavaScript to test ideas.

  1. Code Chef. Different tabs for HTML, CSS and JS. You cannot resize the panes. Make the zoom smaller in your browser to show compiled HTML in a right pane, otherwise it's in a bottom pane. https://www.codechef.com/html-online-compiler
  2. CSS Deck. This site has some buttons hidden and the "Accept" button cannot be clicked due to overlap. This might require a login. You can use your Github login. https://cssdeck.com/labs/
  3. Codepen. Login is allowed so you can save your work and share it. Make HTML, CSS and Javascript files and test them. They have a free option. Make sure to turn off ad blockers for this site or it will not work right. https://codepen.io/
  4. CSS Tricks. https://css-tricks.com
    1. Get CSS code to help align text here: https://css-tip.com/text-box/
  5. JS Bin. Panes for HTML, CSS, JavaScript, console, and results. Has sign in or use it without signing in. https://jsbin.com
  6. JS Fiddle. Has free account to save your snippets and CSS. Has subwindows for HTML, CSS and Javascript. Go to middle of left sidebar to click the sign in link. Scripting supported: JavaScript, CoffeeScript, Babel + JSX, TypeScript, CoffeeScript 2, vue, React, Preact. You can also add scripting attributes (I think for the <script> tag. CSS supported: CSS, SCSS, SASS, PostCSS (Stage 0+), Post CSS (Stage 3+), Tailwind CSS. https://jsfiddle.net/
  7. JSItor. Panes for JS, HTML, CSS. Has sign in or use it for free. Supports CSS, SCSS, SASS, PostCSS, LESS. https://jsitor.com
  8. Liveweave. https://liveweave.com
  9. Plunker. https://plnkr.co/
  10. W3Schools Tryit Editor. One pane for HTML and CSS. If you want to save your code you can create an account and login. https://www.w3schools.com/css/tryit.asp?filename=trycss_default

8.4 CSS tools

  1. Lorem Ipsum. Get test text. https://lipsum.com/
  2. CSS Browser Support Checker. Test CSS features. Not all browsers support all CSS. This has a table of CSS features that shows you when each of the major browsers started supporting it. https://modern-css.com/browser-support/
  3. CSS3 Test. https://css3test.com/ You get a percent of features that are supported by your browser.

8.5 Flags of many nations

Show a flag on your web page.

  1. Countryflags API. https://countryflagsapi.netlify.app/
  2. Flagcdn. Based on vector files so it will scale nicely. This supports PNG, Webp, SVG, or JPEG files (100% quality). https://flagcdn.com
  3. Flag Icons. https://flagicons.lipis.dev/
  4. Geo Plugin free flags. https://www.geoplugin.com/free-tools/free-flags

THE END