CSS Notes 2026

Updated 2026.06.18.a

1 Introduction

  1. Margins are large so if this is printed, it will look nicer.

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 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.3 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>

3 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).

4 CSS selectors

Selectors are used to select HTML elements. 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.
  12. div.class1 {} = Compound selector. Select div with a class of "class1".
  13. .class1.class2 {} = Select where the tag has both classes. .button.primary {} =

4.1 Attribute selectors

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

4.2 State-based pseudo classes

  1. a:hover {} = change color or background of a link when the mouse moves over it.
  2. input:focus {} if input box has focus
  3. button:active {}

There are many more.

4.3 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.5 Logical pseodu-classes

  1. :is(.a, .b) { } = group multiple selectors in one rule. Math class a or class b. Equivalient 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(.a) { }
  3. :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.6 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 sentense regardless of what the HTML looks like.
  4. p::first-line {} = make first line all small upper case?

4.7 Scope selectors

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

4.8 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;
    }

4.9 CSS tips

  1. Make circular button: Make a <button>, style it with: border-radius: 50%;

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:

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:

Same syntax and values as for color:.

5.3 width:

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

5.4 max-width

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

5.5 height:

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

5.6 max-height:

Same as max-width for this applies to height.

5.7 content:

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.8 font-family:

  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.9 font-size:

  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.10 font-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.11 border:

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

5.12 border-color:

5.13 border-style:

5.14 border-width:

5.15 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.16 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.17 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.18 top, bottom, left, right

These act differently depending on the value of position:.

5.18.1 top:

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

5.18.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.18.3 left:

5.19 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.20 transition: MILLISECONDS

This controls how long a transition takes, like button:hover.

  1. Syntax: transition: MS; Affects all properties.
  2. Syntax 2: transition: opacity 300ms; Affects only opacity transitions.
  3. Ex: transition: 200ms; for 200 milliseconds. Transitions normally are 200-400ms.
  4. Properties affected by transition: many like color, backgroud-color, padding, transform, etc.
  5. Link: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

5.21 Animation

5.21.1 @keyframes {}

Defines an animation at 0% to 100% at a minimum.

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

5.21.2 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.21.3 animation KEYFRAMENAME TIME

  1. 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.
  4. TIMING_FUNCTION = same values as for 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;
  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-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.21.4 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.22 CSS Functions.

Functions can be used to calculate the length and put in values. There are many built-in functions like calc(), cos(), etc.

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

5.22.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.22.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.22.3 clamp()

  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.

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.22.4 conic-gradient()

You must define at least 2 steps.

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

5.22.5 counter()

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: upper-roman
<style>
body {
  counter-reset: section;
}

h2::before {
  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>

5.22.6 grayscale()

Converts an image to grayscale. This could be useful, on hover the image could turn to color.

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

5.22.7 invert()

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.23 CSS @ rules

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

5.23.1 @import

Import another style sheet into yours.

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

5.23.2 @page

Customize the printed version of the page.

5.23.3 @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.23.4 @supports

Test whether a browser supports a CSS feature or not.

/* 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;
  }
}

6 Links

6.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. W3C properties. https://www.w3schools.com/cssref/index.php

6.2 CSS HTML testing

  1. CSS Desk. Separate windows for HTML and CSS, and a results window. I get this error: "net::ERR_CERT_COMMON_NAME_INVALID" http://www.cssdesk.com/
  2. 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/
  3. CSS Tricks. https://css-tricks.com
    1. Get CSS code to help align text here: https://css-tip.com/text-box/
  4. 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/

6.3 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.

6.4 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