CSS

Syntax

from: w3schools

• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

What happens in css if you define eg. h1 twice?

If you define h1 twice in CSS, both rules apply, but when they conflict, the later rule wins (assuming same specificity and importance).

Example

h1 {
  color: blue;
  font-size: 40px;
}

h1 {
  color: red;
}

Result

The h1 will be:

• color: red; ✅ (second rule overrides first)
• font-size: 40px; ✅ (first rule still applies because second rule didn't replace it)

Why?

CSS uses the cascade:

1. Importance (!important)
2. Specificity
3. Source order (later wins if tied)

So this:

h1 { color: blue; }
h1 { color: red; }

Means:

➡ Final color = red

Useful Pattern

Many developers intentionally define headings multiple times:

h1, h2, h3 {
  font-family: Inter;
}

h1 {
  font-size: 3rem;
}

Shared styles first, specific styles later.

If Specificity Changes

h1 { color: blue; }
.container h1 { color: green; }

Then .container h1 wins because it's more specific, even if earlier.

Short Answer

Defining h1 twice is normal. CSS merges rules, and conflicting properties use the later / stronger rule.

Selectors

MDN: Class Selectors

from: w3schools

• CSS selectors are used to "find" (or select) the HTML elements you want to style.
• We can divide CSS selectors into five categories:
  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

All CSS Simple Selectors

Selector	Example	Example description
#id	#firstname	Selects the element with id="firstname"
.class	.intro	Selects all elements with class="intro"
element.class	p.intro	Selects only <p> elements with class="intro"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,..	div, p	Selects all <div> elements and all <p> elements

Example: The CSS class Selector

First, in Product.css define the product class:

.product span {
    font-size: 100px;
}

Then, you can use this class in Product.js:

<div className="product">
</div>

Selecting Elements that have Multiple Classes

Selecting a descendant of an element vs selecting an element with both classes:

stackoverflow

.element .symbol

means .symbol inside .element

.element.symbol

means .element that has the class symbol as well.

Nesting

• warning: this CSS feature might not be supported by older browsers
  • CSS nesting is a Baseline 2023 feature
• always check caniuse.com before using newer CSS features
• mdn: & nesting selector
• related:
  • web.dev: Baseline
  • mdn: Baseline

Properties

property	example	description
background-color	background-color: coral;	the background of an element is the total size of the element, including padding and border (but not the margin)

Three Ways to Insert CSS

from: w3schools

• There are three ways of inserting a style sheet:
  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

• include a reference to the external style sheet file inside the <link> element, inside the head section

<head>
  <link rel="stylesheet" href="mystyle.css">
</head>

Internal CSS

• if one single HTML page has a unique style

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

Inline CSS

• to apply a unique style for a single element

<p style="color:red;">This is a paragraph.</p>

Comments

from: w3schools

 /* This is a single-line comment */
p {
  color: red;
} 

p {
  color: red;  /* Set text color to red */
}

p {
  color: /*red*/blue; 
}

/* This is
a multi-line
comment */

p {
  color: red;
}

At-rules

@media media-query

"Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).", w3schools

"The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.", mdn

media query syntax: @media media-query { /* ... */ }, where media-query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators

• media types (optional):
  • all (default)
    • Suitable for all devices.
  • print
    • stackoverflow
      • "It causes the CSS to only apply when the document is rendered to a printer … for putting on paper."
  • screen
    • intended primarily for screens
• media features:
  • hover (can be used eg. to create tooltips, see example below)
    • detects whether the user's primary input mechanism can hover over elements
  • prefers-reduced-motion (eg. used in the create-react-app template)
    • important for users with vestibular motion disorders
    • For Firefox under GTK/GNOME: detects if "Settings" → "Accessibility" → "Seeing" → "Reduced animation" is turned on

media query with both a media type and a media feature

@media print and (orientation: portrait) {
  /* … */
}

media query with a media feature only

/* default hover effect */
/* eg. long tap on mobile phone, tablet */
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /* when hover is supported */
  a:hover {
    color: white;
    background: black;
  }
}

From: mdn: @media

abbr {
  color: chocolate;
}

@media (hover: hover) {
  /* when hover is supported */
  abbr:hover {
    color: limegreen;
    transition-duration: 1s;
  }
}

@media not all and (hover: hover) {
  /* eg. long tap on mobile phone, tablet */
  abbr::after {
    content: ' (' attr(title) ')';
  }
}

• Media Query W3C Recommendation:
  • Media Queries Level 4: "hover"
  • Media Queries Level 3
  • Media Types: Idea

Pseudo-elements

::after

"::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property."

Example:

• create tooltips
  • use ::after, in conjunction with the attr() CSS expression and a data-descr custom data attribute, to create tooltips.
    • note: There are two tooltips, one with a yellow background and one with a black background. The tooltip with the yellow background is the one the code refers to. The tooltip with the black background is the tooltip of the sample-code-frame box in which the "Result" of the given html and css code is shown.

W3C Specifications