Description and Basic Syntax

CSS - Cascading Style Sheets

• give content style

• fonts, color, backgrounds

• describes the presentation of the HTML document

CSS Terminology

• Selectors - CSS selectors are patterns used to select an HTML element or a set of elements that you want to style (type or element selectors, class selectors, ID selectors, attribute selectors, pseudo-class selectors)

• Properties - CSS properties are the attributes that you use to style HTML elements. They can be used to control the appearance of elements, such as their color, font, size, and spacing. CSS properties can also be used to control the behavior of elements, such as their position on the page and how they interact with other elements.

• Values - CSS values are the data that you use to set the values of CSS properties. CSS values can be simple, such as the color red, or they can be more complex, such as a linear gradient or a shadow.

/* Example of a CSS rule */

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

Cascading effect

Styles cascade from top to bottom as they are overridden while the CSS file progresses

a {
  font-size: 16px;
  color: blue;
}

a {
  font-size: 20px;
}

CSS Selectors

Type selectors

Use the element type.

p { color: red; }

Class selectors

Use the class attribute on the element.

.my-class { font-size: 20px; }

ID selectors

Use the element's ID attribute which should have a unique value.

#my-id { background-color: red; }

Calculating Specificity

CSS specificity is a property of CSS selectors that determines which selector has the highest priority and is therefore applied to an element. The higher the specificity, the higher the priority.

• every selector has a specificity weight

• the higher the specificity weight the more superiority the selector is given when styling a conflict appears

• id selector > class selector > type selector

Combining selectors

Descendant combinator: a space character between 2 selectors. It matches all the elements indicated by the second selector that have an ancestor matching the first selector.

Child combinator: a > character between 2 selectors. It is more strict than the descendant combinator, meaning it only selects the direct children of the first selector matching the criteria from the second selector.

HTML

<div class="parent">
  <p>1st paragraph</p>
  <p>2nd paragraph</p>
  <div>
    <p>3rd paragraph, but in a div</p>
  </div>
  <div>
    <p>4h paragraph, but in a div</p>
  </div>
  <p>5th paragraph</p>
  <p class="child">Another paragraph</p>
</div>

CSS

.parent p { /* Descendant combinator */
    background: grey;
}
.parent p.child {
    background: yellow;
}
.parent > p:nth-child(odd) { /* Child combinator */
    color: white;
}

CSS Selector Reference

A more comprehensive list of selectors and selectors combinations can be found at the following source:

CSS Selectors Reference

Common property values

Display: block / inline / inline-block / none

Width/Height: length (px, pt, cm, etc) % / auto

Margin/Padding: length (px, pt, cm, etc) / % / auto

Background-color: (keywords, hexadecimal notation, RGB)

The Box Model

Every element on the page is a rectangular box that may have properties set for: height, width, borders, margins.

Width - depends on the display property

• set using the width property

• block elements - 100%

• inline elements - expand and contract horizontally to accommodate their content

Height - depends on the element’s content

• set using the height property (only for non-inline elements)

  Margin

• the amount of space that surrounds the element

• outside the element's border

Padding

• the amount of space between an element’s content and its border

Border

• outline around the element

• solid, double, dash, dotted

• border corners can be rounded using the border-radius property

div { border: 6px solid #949599; }
div { border-bottom: 6px solid #949599;}
div { border-top-width: 2px;}

Inline elements treat margins and paddings differently:

• Margins only work horizontally - left and right

• Padding works on all sides but the top and bottom paddings can bleed into the lines above and below an element.

Box sizing: The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not and has the following possible values: content-box, padding-box, and border-box

Positioning Content

The float Property:

• allows us to remove an element from the normal page flow

• can take left or right value

• originally used to wrap text around images

• all other elements will flow around the floated element

• heavily used in multiple columns layouts

• can impact styles of surrounding elements

• zero-height container problem for floated elements

The inline-block method:

• done by setting the display property to inline-block value

• space between inline-block elements needs to be removed

section {
    display: inline-block;
    margin: 0 1.5%;
    width: 30%;
}

The position property

static - the normal position in the documents flow

fixed - positioned relative to the browser’s window (viewport)

relative - relative to itself and also adding the possibility to use z-index on that element

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

absolute - positions the elements relative to the first parent element that is non-statically positioned

Media Queries

Media queries in CSS allow you to apply different styles to a web page depending on the characteristics of the device or environment in which the page is being viewed. For example, you can use media queries to create different styles for desktop computers, laptops, tablets, and smartphones. You can also use media queries to create different styles for printers, screen readers, and other devices.

Media queries are defined using the @media rule. The @media rule takes a media type expression as its argument. The media type expression specifies the characteristics of the device or environment in which the page is being viewed.

You can also use media queries to combine multiple media type expressions. For example, the following media query will apply the specified styles to the web page when it is being viewed on a screen that is at least 480 pixels wide and in portrait mode:

@media (min-width: 480px) and (orientation: portrait) {
  body {
    font-size: 16px;
  }
}

Rems

A rem (root em) is a relative unit of measurement in CSS that is equal to the font size of the root element. The root element is the <html> element, so 1 rem is equal to the font size set in the browser's settings.

Rems are useful for creating responsive web pages because they allow you to scale font sizes and other CSS values based on the root element's font size. This means that your web pages will look good on all devices, regardless of the user's browser settings or device type.

For example, the following CSS rule will set the font size of all <p> elements to 1 rem:

p {
  font-size: 1rem;
}

Here are some tips for using rems effectively:

• Use rems to set font sizes and other CSS values that need to be scalable.

• Use rems to create responsive web pages that look good on all devices.

• Avoid using rems to set fixed values, such as the width of a container. If you need to set a fixed value, use pixels or another absolute unit of measurement.