CSS

Cascading Style Sheets (CSS)
The "adjectives" of the web
Takes the basic HTML structure and styles it according to our preferences

Key Points about CSS

What is CSS?: CSS stands for Cascading Style Sheets. It's a language used to describe how a document, typically written in HTML, should look.
Role in Web Development: Consider CSS as the "adjectives" of the web. While HTML provides the structure, CSS adds the styling to make it visually appealing.
Predefined Styles: CSS allows developers to establish predefined styles, ensuring consistency across web pages. You can either manually create these styles or import them from libraries like Bootstrap, TailwindCSS, etc.
Capabilities: Using CSS, developers can control various visual aspects such as colors, positions, dimensions, and even complex animations.

Skills Every CSS Developer Should Have

Basic Styling: Understanding how to adjust properties like colors, borders, and fonts.
Layout & Positioning: Crafting layouts using techniques like Flexbox, Grid, and positioning properties. Making designs responsive for different devices is paramount.
Selectors: Knowing when and how to use different CSS selectors efficiently.
References: Regularly using resources like the Mozilla Developer Network (MDN) for documentation and best practices.
Building Components: Ability to recreate and customize design components using pure CSS.

Integrating CSS with HTML

You can add CSS to your HTML documents in three primary ways:

Inline Styles: This method involves adding CSS directly within the HTML tags. However, it's not recommended for larger styles or for maintaining consistency across pages.

<element style="property: value;">

Internal (or Embedded) Styles: You can define styles for a particular page within the <style> tags in the <head> section. This is suitable for page-specific styles.

<head>
    <style>
	selector { property: value; }
    </style>
</head>

External Styles: This is the most commonly used method for large websites. Styles are defined in a separate .css file and then linked to the HTML document. This way, one stylesheet can be used across multiple pages, ensuring consistency and ease of maintenance.

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

Understanding Selectors

CSS Selectors play a pivotal role in defining which HTML elements should receive specific styles. By combining different types of selectors and properties, web developers can create intricate designs and layouts.

Selectors and Properties

In CSS, a basic rule-set consists of a selector and a declaration block. The declaration block contains properties and their values.

selector {
    property_1: value_1;
    property_2: value_2;
    /* ... and so on */
}

Selectors: They specify which HTML elements will be affected by the style rules.
Properties and Values: Within the declaration block, properties define what aspect of the element should be styled, and values determine how they should be styled.

Different Types of CSS Selectors

There's a plethora of selectors in CSS, each serving a distinct purpose. Here are some of the fundamental selectors:

Universal Selector: It targets every element on the page. Often used with caution due to its broad reach.

* {
    font-family: Arial, sans-serif;
}

Element (or Type) Selector: Targets all instances of a specific element type.

h1 {
    color: green;
}

ID Selector: Targets a specific element based on its id attribute. Each ID should be unique within a page.

#header_1 {
    color: red;
}
#header_2 {
    color: blue;
}

Class Selector: Targets elements based on their class attribute. Useful for grouping elements with similar styles.

.highlight {
    color: yellow;
}

Child Selector: Targets direct children of a specified element. It doesn't affect nested or inner elements.

#gallery > p {
    font-weight: bold;
}

Descendant Selector: Targets all nested elements (or descendants) that match the specified selector, not just direct children.

#container div {
border: 1px solid black;
}

Additionally, CSS offers combinations of selectors, pseudo-classes, pseudo-elements, and more, giving developers a wide array of tools for precise styling.

Introduction to Pseudo-selectors

Pseudo-selectors, also known as pseudo-classes, allow us to style elements based on their state or position, rather than just their type or attribute.

Consider the following HTML and CSS:

<div id="gallery">
    <p><a href="https://www.google.com">Google</a></p>
    <p><a href="https://www.yahoo.com">Yahoo</a></p>
</div>

css

#gallery {
    color: red;
}

#gallery p {
    color: blue;
}

#gallery a:hover {
    color: green;
}

In the example above, the color of text in the #gallery is red. However, paragraphs inside it are blue. Additionally, links turn green when hovered.

Common Pseudo-selectors

Pseudo-selectors, often termed pseudo-classes, allow developers to target and style HTML elements based on specific conditions, states, or positions rather than solely on their tags or attributes.

Below is a list of commonly-used pseudo-selectors, each paired with a brief description and a link to its documentation on MDN for deeper insights:

:active: Targets elements that are currently being activated by the user (like when clicking on a link or button). MDN Docs
:focus: Highlights the currently focused element, commonly used with form fields. MDN Docs
:hover: Styles an element when a user hovers over it with their cursor. MDN Docs
:link: Targets hyperlinks that haven't been visited by the user. MDN Docs
:visited: Selects links that have been visited by the user. MDN Docs
:checked: Targets checked elements like radio buttons or checkboxes. MDN Docs
:first-child: Targets the first child element inside a parent element. MDN Docs
:last-child: Selects the last child element within a parent. MDN Docs
:nth-child(n): Allows for the styling of elements based on their position in a group. MDN Docs
:disabled and :enabled: Respectively target disabled and enabled form controls. MDN Docs for :disabled, MDN Docs for :enabled
:not(selector): Targets elements that do not match a specific selector. MDN Docs

Inheritance and Specificity in CSS

In the world of CSS, it's crucial to understand how rules cascade and how specificity works. Specificity determines which CSS rule is applied to an element when there are multiple conflicting rules.

Specificity Hierarchy

When two or more CSS rules target the same element but have conflicting styles, the specificity hierarchy determines which rule is applied:

IDs
Classes, attributes, and pseudo-classes
Elements and pseudo-elements

Visualized:

ids > classes, attributes, pseudo-classes > elements, pseudo-elements

Useful tools like Specificity Calculator can help understand and calculate the specificity of your selectors.

Pseudo-elements in CSS

Pseudo-elements are a powerful feature in CSS, allowing you to style certain parts of a document, or to virtually insert content into the document, without altering the actual HTML structure.

Concept

Pseudo-elements are different from pseudo-classes. While pseudo-classes select elements based on their state or position in relation to others (like :hover or :nth-child), pseudo-elements target specific parts of an element, like the first line or first letter, or they can virtually insert content before or after an element's content.

Example

Consider this sample:

<div id="gallery">
    <p>
        <a href="https://www.google.com">Google</a>
    </p>
    <p>
        <a href="https://www.yahoo.com">Yahoo</a>
    </p>
</div>

And the accompanying styles:

#gallery {
    color: black;
}

#gallery p::first-letter {
    font-size: 20px;
    color: red;
}

#gallery a:hover::before {
    content: "→ ";
    color: green;
}

In this illustration, the ::first-letter pseudo-element targets and enlarges the initial letter of each paragraph, coloring it red. The ::before pseudo-element introduces an arrow symbol (→) preceding the anchor text, appearing when hovered.

Common Pseudo-elements

Pseudo-elements target specific parts of elements or create virtual content around them. They're instrumental in achieving certain design patterns and effects without altering the actual HTML content.

::before: Inserts virtual content before an element's actual content. Typically used with the content property to display strings, icons, or images. MDN Docs
::after: Similarly, it inserts virtual content but after an element's content. Just like ::before, it's commonly paired with the content property. MDN Docs
::first-letter: Targets the initial letter of block-level elements. This pseudo-element can be handy for design patterns like drop caps. MDN Docs
::first-line: Captures the first line of text within block-level elements, allowing you to apply specific styles to the initial line of a paragraph or a container. MDN Docs

Noteworthy Points

Content Requirement: For ::before and ::after to manifest any visual change, the content property is essential. It dictates what content (if any) these pseudo-elements should display.
Non-alteration of the DOM: Pseudo-elements are a styling aspect only. They won't alter the DOM, meaning they're invisible in the source HTML and can't be accessed directly through JavaScript.
CSS Only: Being CSS constructs, pseudo-elements are inaccessible from JavaScript, which is essential to remember when considering site interactivity and functionality.

These pseudo-elements, while subtle, empower developers with additional control over design and presentation, enriching the user experience without the need for additional HTML elements.

Box Model

The CSS Box Model is a fundamental concept in web design that describes the rectangular boxes which are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area and optional surrounding padding, border, and margin areas.

Box
.......................
.  Margin             . 
.  -----------------  .
.  | Padding       |  .
.  |  ###########  |  .
.  |  # Element #  |  .
.  |  ###########  |  .
.  |               |  .
.  -----------------  .
.                     .
.......................

Example

Let's take a look at a complete example:

<div id="box">
	<p>Content</p>
</div>

#box {
	width: 100px;
	height: 100px;
	padding: 10px;
	margin: 10px;
	border: 1px solid black;
}

The above example defines a box with a content area of 100x100px, a padding of 10px, a margin of 10px, and a black border with a width of 1px.

Margins

Margins create space around an element, separating it from other elements.

Top Margin:
- margin-top: Defines the space above the element.
  - Values: auto | length | percentage
Right Margin:
- margin-right: Defines the space to the right of the element.
  - Values: auto | length | percentage
Bottom Margin:
- margin-bottom: Defines the space below the element.
  - Values: auto | length | percentage
Left Margin:
- margin-left: Defines the space to the left of the element.
  - Values: auto | length | percentage

Padding

Padding creates space within an element, between the content and its border.

Top Padding:
- padding-top: Defines the space between the content and the top border of the element.
  - Values: length | percentage
Right Padding:
- padding-right: Defines the space between the content and the right border of the element.
  - Values: length | percentage
Bottom Padding:
- padding-bottom: Defines the space between the content and the bottom border of the element.
  - Values: length | percentage
Left Padding:
- padding-left: Defines the space between the content and the left border of the element.
  - Values: length | percentage

Border

Borders surround an element, giving it structure and sometimes helping it stand out. You can define the width, style, color, and even use images as borders.

Width:
- border-width: Defines the thickness of the border.
  - Values: auto | length
Style:
- border-style: Determines the pattern or design of the border.
  - Values: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Color:
- border-color: Sets the color of the border.
  - Values: color name, hex, rgba, etc.
Radius:
- border-radius: Allows you to create rounded borders.
  - Values: length (can set each corner individually)
Image:
- border-image: Uses an image as the border.
  - Values: none | image source | slice | width | outset | repeat

Outline

Outlines are similar to borders but don't take up space. They're often used for focus styles and other UI states.

Width:
- outline-width: Defines the thickness of the outline.
  - Values: auto | length
Style:
- outline-style: Determines the pattern or design of the outline.
  - Values: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Color:
- outline-color: Sets the color of the outline.
  - Values: color name, hex, rgba, etc.

Advanced Tips

When setting the dimensions of an element, be cautious of extremes. An element that is either too small or too large can disrupt the layout and aesthetics of a page. In these cases, special values such as max-content, min-content, and fit-content are valuable:

min-content: Shrinks the element to its smallest size.
max-content: Expands the element to its largest size based on its content.
fit-content: Scales the element based on available space and its content size.

Flexbox

Flexbox, short for "Flexible Box Layout", is a design model in CSS that allows you to design complex layout structures with a more efficient and predictable way than traditional models, especially when dealing with different screen sizes and dynamic content.

Flex Container vs. Flex Items

When an element is defined as a flex container (using display: flex or display: inline-flex), its children automatically become flex items. Flexbox involves two sets of properties:

Container Properties: These are set on the flex container.
- display: Initiates the flex context (flex or inline-flex).
- flex-direction: Defines the main axis direction (row, row-reverse, column, column-reverse).
- flex-wrap: Determines if items should wrap (nowrap, wrap, wrap-reverse).
- ... and others like justify-content, align-items, align-content.
Item Properties: These are set on the flex items.
- flex: A shorthand for setting flex-grow, flex-shrink, and flex-basis.
- align-self: Allows an item to override the container's align-items property.
- ... and others like order, flex-basis, flex-grow, flex-shrink.

Understanding the Axes

Flexbox layout revolves around two axes: the main axis and the cross axis.

Main Axis: The primary axis along which flex items are laid out. Its direction is determined by the flex-direction property.
Cross Axis: Perpendicular to the main axis.

If flex-direction is set to row or row-reverse, flex items are laid out horizontally:

<---------------------- axis ---------------------->
##########    ##########    ##########    ##########
# Elem 1 #    # Elem 2 #    # Elem 3 #    # Elem 4 #
##########    ##########    ##########    ##########

The cross axis, in this case, runs vertically.

When flex-direction is column or column-reverse, flex items are arranged vertically:

˄     ##########
|     # Elem 1 #
|     ##########
|
|     ##########
a     # Elem 2 #
x     ##########
i
s     ##########
|     # Elem 3 #
|     ##########
|
|     ##########
|     # Elem 4 #
|     ##########
˅

The cross axis, in this setup, runs horizontally.

Example

HTML:

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<div class="box">
				<h1>Box 1</h1>
			</div>
		</div>
		<div class="col-md-4">
			<div class="box">
				<h1>Box 2</h1>
			</div>
		</div>
		<div class="col-md-4">
			<div class="box">
				<h1>Box 3</h1>
			</div>
		</div>
	</div>
</div>

CSS:

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

.row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.col-md-4 {
   margin: 10px;
}

.box {
   background-color: #f5f5f5;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0px 0px 5px #ccc;
}

In the above example, we have a container with a row of three boxes. The boxes are all the same size, but the container is set to flex-direction: row. This means that the boxes will be laid out horizontally. The boxes are also centered in the container.

Links:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/#section-display

Flexbox Properties

Flexbox introduces a set of properties that provide a more efficient and predictable way to layout, align, and distribute space among items in a container, even when their sizes are unknown or dynamic.

Flex Containers

To create a flex container, use the display property:

display: Determines the element's inner and outer display type.
- Values: flex (block-level flex container) | inline-flex (inline-level flex container)

Ordering and Orientation

Control the order in which items appear and their directional flow:

order: Specifies the order of the flex item relative to its siblings.
- Values: <number> (default: 0)
flex-direction: Defines the direction of the main axis, determining the orientation of flex items.
- Values: row | row-reverse | column | column-reverse
flex-wrap: Specifies whether flex items wrap onto multiple lines or columns.
- Values: nowrap | wrap | wrap-reverse
flex-flow: A shorthand property for setting both flex-direction and flex-wrap.
- Values: <flex-direction> || <flex-wrap>

Alignment and Justification

Determine how items are aligned and spaced within the flex container:

align-items: Describes how flex items are aligned along the cross axis of the flex container.
- Values: flex-start | flex-end | center | baseline | stretch
align-content: Aligns flex lines within the flex container when there's extra space in the cross-axis.
- Values: flex-start | flex-end | center | space-between | space-around | stretch
justify-content: Defines how flex items are spaced along the main axis.
- Values: flex-start | flex-end | center | space-between | space-around | space-evenly

Flexibility of Items

Define how flex items grow and shrink:

flex: A shorthand to set the flex-grow, flex-shrink, and flex-basis properties.
- Values: <flex-grow> <flex-shrink> <flex-basis>
flex-grow: Specifies the flex item's ability to grow relative to other items.
- Values: <number> (default: 0)
flex-shrink: Defines the flex item's ability to shrink relative to other items.
- Values: <number> (default: 1)
flex-basis: Defines the default size of a flex item before the available space is distributed.
- Values: auto | <length> | <percentage>

Leveraging these properties allows for sophisticated layout designs that adapt gracefully across different screen sizes and resolutions.

Noteworthy Points

Flexbox layouts adapt to the size of the container and the size of the content. This makes it great for creating responsive designs without depending heavily on media queries.
Flex items will, by default, try to fit onto one line. Use the flex-wrap property if you want items to wrap onto multiple lines.
Flexbox also provides tools for alignment, distribution, and spacing of items, using properties like align-items, justify-content, and gap.

Special Styling Elements

Certain elements in CSS come with a unique set of styling options. One such element is the list, with its associated markers.

Lists & Markers

In web design, lists are ubiquitous. CSS provides granular control over the appearance and positioning of list items and their markers.

Key Properties

list-style: Defines an element's list style. - none: No style is applied. - Composite value: A combination of list-style-type, list-style-position, and list-style-image.
list-style-type: Specifies the type of list marker. - Common values: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman. - More unique values: lower-greek, lower-latin, upper-latin, armenian, georgian, none.
list-style-position: Determines the position of the marker relative to the list item content. - inside: The marker is placed inside the list item box. - outside: The marker is outside the list item box, creating an indent.
list-style-image: Allows you to use an image as the list item marker. - url("path_to_image"): Specifies the URL path to the image to be used as the marker.
marker-offset: (Deprecated) Specifies the distance between a marker and the principal block box's nearest border edges. - auto: The browser determines the offset. - Length values (e.g., 5px, 1em): Defines a specific distance.
marker-start: (Deprecated in favor of SVG's marker attribute) Specifies a marker to be used at the start of lines.

Understanding these properties allows developers to create more visually appealing lists and enhances the user experience by making content more digestible and organized.

Example

HTML:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

CSS:

ul {
   list-style-type: none;
}

li {
   display: inline-block;
   margin: 10px;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-shadow: 0px 0px 5px #ccc;
}

In the above example, we have a list with three items. The list is set to display: inline-block. This means that the items will be displayed horizontally as opposed to the default vertical. The items are distinguished by a border and a box-shadow.

Table

Tables in CSS are designed to structure tabular data. They come with a rich set of properties that offer detailed styling options to enhance their appearance and usability.

Key Styling Properties

table-layout: Determines the algorithm used to layout the table cells, rows, and columns. - auto: Uses the content's width to adjust the column widths. This might cause slower rendering for large tables. - fixed: The horizontal layout only depends on the table's width and the width of columns, not the contents of its cells. It provides faster rendering.
border-collapse: Specifies whether cell borders are collapsed into a single border or detached as in standard HTML. - collapse: Borders are merged into a single border where possible. - separate: Borders are split; each cell displays its own border.
border-spacing: Determines the spacing between the borders of adjacent cells when border-collapse is set to separate. - Length values (e.g., 2px 4px): The first value defines horizontal spacing and the second defines vertical spacing.
caption-side: Specifies the position of the table's caption. - top: The caption is displayed above the table. - bottom: The caption is displayed below the table.
empty-cells: Determines the visibility of borders and backgrounds of empty cells. - show: Show the borders and background, even if the cell is empty. - hide: No borders or background are shown if the cell is empty.

Example

HTML:

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
	</tr>
</table>

CSS:

table {
   border-collapse: collapse;
   border-spacing: 0;
}

th, td {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-shadow: 0px 0px 5px #ccc;
}

Text

Text is a fundamental aspect of web design, and CSS offers an extensive suite of properties to style text with precision. From basic color settings to intricate shadow effects, text styling can be as simple or as detailed as the design requires.

Key Text Styling Properties

color: Specifies the color of the text. - Can be defined using HEX, RGB, RGBA, HSL, or named colors.
direction: Sets the direction in which text is written. - ltr: Left to Right (default for most languages). - rtl: Right to Left (common for Arabic, Hebrew).
letter-spacing: Adjusts the space between characters. - Can be defined using units like px, em, rem, etc.
line-height: Determines the height of a line box. - normal: Default line height. - Number values (e.g., 1.5), or units like px, em.
text-align: Aligns the inline content like text. - Values: start, end, left, right, center, justify.
text-decoration: Adds decorative lines to text. - Values: none, underline, overline, line-through. (Note: blink is deprecated.)
text-indent: Indents the first line of a text block. - Can be defined using units like px, em, rem, etc.
text-transform: Controls the capitalization of text. - Values: capitalize, uppercase, lowercase, none.
vertical-align: Sets the vertical positioning of an element relative to its parent or the line height. - Values include: baseline, sub, super, top, text-top, middle, bottom, text-bottom, and units like px, em.
white-space: Specifies how whitespace inside an element is handled. - Values: normal, pre, nowrap, pre-wrap, pre-line.
word-spacing: Adjusts the space between words. - Can be defined using units like px, em, rem, etc.
text-outline (Note: not standard): Defines an outline for the text. - Values: none, color, width, style, or combined as [ color, width, style ].
text-overflow: Specifies how overflowed content is signaled to the user. - Values: clip, ellipsis.
text-shadow: Adds shadow effects to the text. - Values can include color, offset-x, offset-y, and blur-radius.
text-wrap (Note: not standard): Specifies line breaking rules. - Values: normal, none, break-word.
word-break: Controls how lines should break in case of long words or overflow. - Values: normal, break-all, keep-all.
word-wrap: Specifies whether to break words when they overflow the content box. - Values: normal, break-word.

Example

HTML:

<p>This is a paragraph.</p>

CSS:

p {
   font-family: sans-serif;
   font-size: 1.5em;
   font-weight: bold;
   color: #333;
   text-align: center;
   text-shadow: 0px 0px 5px #ccc;
}

In the above example, we have a paragraph. The text in the paragraph is set to be bold, centered and surrounded by a shadow. The font-family is selected to be sans-serif and the font-size is set to 1.5em.

Style

CSS provides a suite of generic styling properties that can be applied universally across elements. Two commonly used properties are font and color. While font dictates the appearance and style of text, color sets the foreground color for text and other graphical elements.

Font

Fonts play a pivotal role in establishing the visual identity of a website. With the advent of web fonts, designers are no longer restricted to a few standard system fonts. Today, a vast collection of fonts can be easily integrated into web projects to achieve the desired typography.

There are numerous platforms that offer free and premium web fonts:

CSS Font Stack
Google Fonts

Steps to Incorporate Custom Fonts:

Navigate to a web fonts platform and select a desired font.
Obtain the link or @font-face code snippet for the chosen font.
Insert the link or code snippet into the <head> section of your HTML file.
Reference the font in your CSS using the font-family property.

Key Font Properties:

font-style: Dictates the style of a font. - Options: normal, italic, oblique.
font-weight: Determines the thickness of characters in a font. - Options: normal, bold, bolder, lighter, ranging from 100 (thinnest) to 900 (thickest).
font-size: Specifies the size of a font. - Can be defined using units like px, em, rem, %, etc.
font-family: Defines which font should be used. - Typically defined using the font name in quotes (e.g., "Helvetica, sans-serif").
font-variant: Controls font variants, mainly for capitalized text. - Options: normal, small-caps.

Example

p { 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

In the example above, the font-family is set to "Helvetica Neue", which is a font that is available on most web browsers. The font-size is set to 20px, the font-weight is bold, and the font-style is italic. The text is underlined with a wavy style, and the underline color is red.

Aditional explanations

Web fonts have reshaped the landscape of web typography. Platforms like Google Fonts and Adobe Fonts host a myriad of fonts, ensuring websites can have unique and tailored typography. When using custom fonts, it's vital to ensure they're web-optimized for performance and that fallback fonts are specified to cater to users with limited font access or slow internet connections.

Colors

In web design, colors have a profound influence on user experience and branding. CSS provides diverse methods to assign colors to HTML elements. Besides color, you can also control an element's transparency or opacity, impacting how underlying content might be visible through it.

Fundamental Color Properties:

color: Specifies the foreground color of an element. - Accepts a variety of color formats.
opacity: Determines the transparency level of an element. - Range: 0.0 (fully transparent) to 1.0 (fully opaque).

Common Methods to Define Colors:

Color Names: Human-friendly names for colors. Examples include red, blue, and goldenrod.
RGB: Specifies colors using Red, Green, and Blue values. Example: rgb(255, 0, 0) yields red.
RGBA: Like RGB, but with an added Alpha channel to indicate transparency. Example: rgba(255, 0, 0, 0.5) gives a semi-transparent red.
HEX: Uses hexadecimal values to define colors. Example: #ff0000 represents red.
HSL: Represents colors using Hue, Saturation, and Lightness. Useful for creating color variations.
HSLA: Combines HSL with an Alpha channel for transparency control.

Example

HTML:

<div id="container">
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

CSS:

#container {
  background-color: rgb(0, 25, 21);
  opacity: 0.5;
}

#container p {
  color: rgb(233, 218, 218);
}

The background color of the container is set to a dark greenish color in the example above, but it will appear lighter since the opacity is set to 50%. The font color is set to a light grayish color to provide contrast against the background.

Additional explanations

The color you choose in design can evoke emotions, deliver messages, and even influence decision-making. Being adept at using various color definitions in CSS can empower designers to create visually striking and user-friendly interfaces.

While HEX and RGB are ubiquitous methods for setting colors, HSL can be more intuitive when making adjustments or creating color schemes. Furthermore, the inclusion of an alpha channel in RGBA and HSLA allows designers to introduce varying levels of transparency, perfect for layered designs and overlays.

Background

Backgrounds serve as a foundation for web elements. Whether it's a vivid color, a subtle gradient, or an evocative image, the background can enhance or soften content, guiding users' attention and enriching the visual experience.

Core Background Properties

background-color: Defines the solid background color of an element. - Accepts any valid color value.
background-image: Sets an image or gradient as the element's background. - Value: none or url(path_to_image).
background-position: Specifies the starting position of the background image. - Examples: top left, center center, 10px 20px.
background-repeat: Determines if/how the background image will repeat. - Options: repeat, repeat-x, repeat-y, no-repeat.
background-attachment: Specifies if the background image scrolls with the content or remains fixed. - Values: scroll, fixed, local.
background-size: Indicates the size of the background images. - Examples: cover, contain, 50% 50%.

Example

Let's take a look at the following example:

<div>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

div {
  background-color: #006400;
}

p {
  background-color: #f0f0f0;
}

In the example above, the background color of the div is set to dark green, and the background color of the paragraphs is set to light gray.

Additional explanations

CSS offers impressive flexibility with backgrounds. Beyond mere solid colors:

Gradients: These enable smooth transitions between multiple colors. With CSS, you can craft both linear gradients (where colors transition side-by-side) and radial gradients (where colors transition in a circular pattern).
Images: They can serve as decorative patterns, textures, or even immersive full-screen backdrops. By manipulating properties like background-size, background-position, and background-repeat, designers can tailor images to fit various aesthetic and functional needs.

Positioning

Positioning elements on a web page is a fundamental task in web design. CSS provides multiple methods to achieve desired layouts and presentations.

Core Positioning Properties

position: Determines the positioning method used for an element.
- Values: static, relative, absolute, fixed, sticky.
float: Specifies how an element should float.
- Options: none, left, right.
clear: Sets which sides of an element will not be adjacent to earlier floating elements.
- Values: none, left, right, both.
display: Dictates the display box type of an element.
- Options: inline, block, inline-block, table, table-row, table-cell, none.
visibility: Defines if an element is visible.
- Choices: visible, hidden, collapse.
overflow: Controls what happens to content that overflows its box.
- Values: visible, hidden, scroll, auto.

Example

HTML:

<div class="parent">
  <p>I'm the parent.</p>
  <div id="first" class="child"><p>A</p></div>
      <div id="second" class="child"><p>B</p></div>
      <div id="third" class="child"><p>C</p></div>
      <div id="fourth" class="child"><p>D</p></div>
    </div>
</div>

CSS:

.parent {
  width: 50%;
  margin: 10%;
  border: 1px solid black;
}

.child {
  width: 20%;
  height: 0;
  margin: 5%;
  padding-bottom: 20%;
  border-radius: 20%;
  text-align: center;
}

#first {
  position: absolute;
  top: 10%;
  right: 0;
  background-color: #3D9970;
}

#second {
  position: relative;
  left: 10%;
  background-color: #001f3f;
}

#third {
  background-color: #85144b;
}

#fourth {
  background-color: #DDDDDD;
}

In the example above, the parent element has a narrow rectangular border. The first child element is positioned absolutely, whereas the second is positioned relatively. The other elements have default (static) positioning.

Additional explanations

Position Property:

Static: The default position. Elements are ordered as they appear in the HTML document.
Relative: Elements are positioned relative to their normal position, but don't affect the position of adjacent elements.
Absolute: Elements are positioned relative to their closest positioned ancestor. If none exists, it's relative to the initial container.
Fixed: Positioned relative to the viewport. The element stays fixed even during scrolling.
Sticky: A hybrid of relative and fixed. The element is treated as relative until a given scroll point, after which it acts as fixed.

Display Property:

Inline: Elements are in line with adjacent elements. Respects left/right margins and padding, but not top/bottom. Width and height cannot be set.
Block: Elements form a block, breaking onto a new line. They respect all margins and padding and occupy the full width by default.
Inline-block: Elements are inline, but can have properties like block elements. Useful for buttons or items in a horizontal navigation.

Lastly, always remember that with the evolving nature of CSS and web design, utilizing developer tools in browsers and referencing platforms like MDN can help keep your understanding current and your designs sharp.

Animations and Dynamic Effects

In the digital era, motion design plays a pivotal role in enhancing user experience. CSS3, the third level of Cascading Style Sheets, offers a wide variety of animation capabilities to bring life to web elements and improve user interaction.

Animations

CSS animations allow elements to transition between styles over a set duration and through specified keyframes. This means an element can smoothly shift from one style to another over a given time period.

Core Animation Properties

animation: A shorthand property to set multiple animation properties at once.
- Values: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
animation-name: Names the animation for reference.
- Value type: string (name of the keyframes)
animation-duration: Specifies how long the animation takes for a single cycle.
- Value type: time (e.g., 2s or 200ms)
animation-timing-function: Describes the pacing of the animation.
- Common values: linear, ease, ease-in, ease-out, ease-in-out.
animation-delay: Sets a delay before the animation starts.
- Value type: time.
animation-iteration-count: Dictates how many times the animation plays.
- Value type: number or infinite.
animation-direction: Determines the direction of the animation.
- Values: normal, reverse, alternate, alternate-reverse.
animation-fill-mode: Defines what values are applied before/after the animation.
- Values: none, forwards, backwards, both.
animation-play-state: Determines whether the animation is running or paused.
- Values: running, paused.

Example

HTML:

<div id="box">
  <p>I'm the box.</p>
</div>

CSS:

@keyframes change_background {
  0% {
	background-color: #3D9970;
  }
  50% {
	background-color: #85144b;
  }
  100% {
	background-color: #3D9970;
  }
}

#box {
  background-color: #3D9970;
  width: 100px;
  height: 100px;
  text-align: center;
  animation: change_background 3s infinite;
}

The animation changes the background color of the box from #3D9970 to #85144b and back again. It repeats every 3 seconds and runs forever.

Additional Insights

To create CSS animations, you'll define @keyframes that set the styling for different stages or "frames" of the animation. These @keyframes can be referenced using the animation-name property.

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

In the example above, an animation named slideIn moves an element from off the screen (-100%) to its natural position (0). Using the animation property, you can then apply this animation to an element:

element {
  animation: slideIn 2s ease-in-out;
}

This CSS rule applies the slideIn animation to the element over a 2-second duration with an ease-in-out timing function. The possibilities are vast—allowing for rich, interactive, and engaging web designs.

2D/3D Transform

In modern web design, the ability to animate and transform elements has become a staple. CSS offers a powerful suite of properties to apply 2D and 3D transformations to elements, granting designers and developers the capacity to change an element's position, size, and orientation in creative ways.

Quick Overview

transform: Applies a 2D or 3D transformation to an element.
- Values: none, matrix, translate, translateX, translateY, translateZ, scale, scaleX, scaleY, scaleZ, rotate, rotateX, rotateY, rotateZ, skew, skewX, skewY, matrix3d, translate3d, translateX3d, translateY3d, translateZ3d, scale3d, scaleX3d, scaleY3d, scaleZ3d, rotate3d, rotateX3d, rotateY3d, rotateZ3d, perspective.
transform-origin: Defines the point around which a transformation is applied.
- Values: origin-x origin-y origin-z (e.g., 50% 50% or center center).
transform-style: Specifies how nested elements are rendered in 3D space.
- Values: flat, preserve-3d.
perspective: Determines the distance between the viewer and the z=0 plane, affecting the 3D transformation.
- Value type: length (e.g., 1000px).
perspective-origin: Establishes the origin for the perspective property.
- Value type: length or percentage (e.g., 50% 50%).
backface-visibility: Defines whether the back face of an element is visible when it's turned towards the viewer.
- Values: visible, hidden.

Example

HTML:

<div id="box">
  <p>I'm the box.</p>
</div>

CSS:

#box {
  background-color: #3D9970;
  width: 100px;
  height: 100px;
  text-align: center;
  transform: rotate(45deg) translate(100px, 0);
}

The box element is rotated by 45 degrees first, then translated to the right by 100 pixels.

Additional Insights

Transformations: These operations include moving (translate), scaling (scale), rotating (rotate), and skewing (skew). These can be applied in both 2D and 3D space. For instance, rotateX will revolve the element around its X-axis in 3D space.
Origin of Transformation: By default, transformations occur around the center of an element. However, with transform-origin, you can change this pivot point. This is especially useful when you want an element to rotate around its corner or any other specific point.
3D Space: When dealing with 3D transformations, transform-style and perspective come into play. The former allows child elements to be positioned in 3D space, and the latter gives a sense of depth.
Visibility: With backface-visibility, you can control the visibility of the reverse side of an element in 3D space. This can be helpful when you don't want the back of a flipped card, for example, to be shown.

Transition

Transitions in CSS provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect instantly, you can cause the changes to take place over a period of time. This makes for a smoother visual experience and can add a touch of dynamism to web designs.

Quick Overview

transition: A shorthand property for setting transition-property, transition-duration, transition-timing-function, and transition-delay.
- Values: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
transition-property: Specifies the name of the CSS property to which the transition is applied.
- Values: none, all, or specific property names (e.g., opacity, transform).
transition-duration: Defines the duration over which transitions should occur.
- Value type: time (e.g., 0.5s or 300ms).
transition-timing-function: Describes how the intermediate values used during a transition will be calculated.
- Values: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier values.
transition-delay: Specifies when the transition will start.
- Value type: time (e.g., 0.2s).

Example

HTML:

<div id="box">
  <p>I'm the box.</p>
</div>

CSS:

#box {
  background-color: #3D9970;
  width: 100px;
  height: 100px;
  text-align: center;
  transition: width 5s, height 5s, background-color 10s;
}

#box:hover {
  width: 200px;
  height: 200px;
  background-color: #FF4136;
}

Additional Insights

Transition Properties: By default, transitions apply to all properties (all). However, in most cases, you'll want to specify which property to animate, like opacity or background-color.
Duration: This determines how long the transition will take. Longer durations can make transitions more noticeable, while shorter ones can give a snappy feeling to user interactions.
Timing Function: This function describes the acceleration curve of the transition, allowing for the effect to speed up, slow down, or smoothly glide into place. The cubic-bezier value can be used to create custom timing functions.
Delay: If you want to start a transition after a certain period, use the transition-delay property. This can be useful in sequences where multiple elements animate one after the other.

Responsive Design

Responsive design ensures that websites adapt and render optimally across a variety of devices. It aims to offer a consistent user experience from the smallest mobile device to the largest desktop monitor.

Responsive Grid vs. Fluid Grid

Responsive Grid: This approach utilizes a fixed grid system, usually based on a 12-column structure, with specific breakpoints defined in pixels to cater to different screen sizes. Once the viewport reaches a predefined size, the design might switch to a different column arrangement or even hide/show certain elements.
Fluid Grid: Fluid grids are more flexible than responsive grids. They use percentages to define widths, thereby allowing elements to continually adjust in size relative to their parent container. As the viewport size changes, elements stretch and shrink fluidly.

Recommended Number of Columns:

Desktop: 12 columns
Tablet: 8 columns
Mobile: 4 columns

Mobile First Design

Adopting a Mobile First design strategy means building the initial design for the smallest screens (mobile devices) and then progressively enhancing the design for larger screens. This methodology ensures that mobile users receive only the essential features and content, helping improve performance and user experience on slower networks.

Media Queries

Media queries are the backbone of responsive design. They allow developers to apply styles based on the device characteristics. For instance, different styles can be applied depending on the device's screen width, height, orientation, and more.

Example

Let's say we want to create a button that changes its color depending on the screen size.

HTML:

<button id="button">Click me!</button>

CSS:

#button {
  background-color: #3D9970;
  width: 100px;
  height: 100px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  #button {
	background-color: #FF4136;
  }
}

Key Points:

@media: The heart of media queries in CSS.
- Examples of common usages: screen, print, all, min-width, max-width, orientation: portrait, orientation: landscape.

Additional Insights:

Overlapping Styles: It's crucial to be mindful of the cascading nature of CSS. When using the same selector in multiple places within a stylesheet, any styles defined later will override those defined earlier. This can be particularly relevant when using media queries, as styles can unintentionally override one another based on their order in the CSS file.
Viewport Meta Tag: To ensure that responsive designs are displayed correctly, especially on mobile devices, it's essential to include the viewport meta tag in the HTML head. For instance: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Flexbox & Grid: Modern CSS techniques like Flexbox and Grid layout provide powerful tools to create responsive layouts with more control and less reliance on traditional grid systems.
Testing: Regularly testing the design on various devices and screen sizes is vital. Tools like browser developer tools and specialized software can simulate different devices and help in identifying any issues in the design.

Units

Units in CSS provide a way to express measurements. Understanding when and how to use different units is crucial for designing responsive and accessible websites.

Absolute Units

These are fixed-size units and do not scale with changes in other properties or viewer's settings.

px: Pixels – A dot on the computer screen. It's a relative measurement in the sense that it's not a consistent size across devices, but within a device, it is absolute.
pt: Points – Traditionally used in print media (1pt = 1/72 of an inch).
pc: Picas – Another print measure where 1pc = 12 points.
cm: Centimeters.
mm: Millimeters.
in: Inches – 1 inch is equal to 2.54 centimeters.
%: Percentage – Relative to the parent element or another reference point.

Relative Units

Relative units are responsive and adapt based on the context in which they're used.

em: Font size of the current element. If the font size is 16px, then "2em" is 32px.
rem: Font size of the root element (usually the <html> element). A consistent unit regardless of the nesting level.
ch: Width of the '0' character of the current font.
ex: x-height of the current font. Roughly the height of lowercase letters in most fonts.
vh: 1% of the height of the viewport window.
vw: 1% of the width of the viewport window.
vmin: 1% of the viewport's smaller dimension (height or width).
vmax: 1% of the viewport's larger dimension (height or width).

Further Insights

Using em and rem: These units are especially helpful for building scalable and accessible websites. They allow the design to respond to user preferences, like increasing the default font size in a browser.
Viewport Units: vh, vw, vmin, and vmax are great for creating fully responsive designs that adjust based on the size of the user's screen.
Legacy Units: Units like pt and pc are derived from the print industry and are less commonly used in modern web design but can still be found in designs intended for print.
Choosing Units: When designing, it's crucial to pick the right unit for the job. For typography, relative units like em or rem are often recommended. For layout dimensions, px, %, and viewport units are commonly used.

Best Practices

General

Use external CSS files and place them within the <head> tag.
Organize your CSS into logical sections and use comments to explain complex or important parts.
Follow a consistent naming convention for class and ID names.
Use shorthand properties when possible to reduce code length.

Formatting

Don't leave out the last semicolon in a CSS block.
Maintain consistent casing, preferably lowercase, for selector names.
Use a single space after the colon in property-value pairs.
Use a new line for each declaration in a rule set.
Remove trailing white spaces and keep indentation consistent.

Layout and Positioning

Use the box model consistently throughout the document.
Avoid breaking the flow by using absolute positioning sparingly.
Utilize Flexbox and Grid for modern, responsive layouts.
Avoid using fixed pixel values for layout and spacing; use relative units like rem, em, and percentages.

Selectors and Specificity

Prefer classes over selectors that are tightly coupled to the DOM.
Reduce the usage of IDs to avoid high specificity conflicts.
Minimize the use of overly complex or deeply nested selectors.
Keep selector specificity low to make styles easier to override and maintain.

Inheritance and Efficiency

Don't duplicate style declarations that can be inherited from parent elements.
Use unitless values when possible, or rem for relative units.
Use the hexadecimal format for colors, or use CSS variables for consistent theming.
Minimize the use of vendor prefixes by leveraging tools like Autoprefixer.

Responsiveness and Accessibility

Design your CSS with responsiveness in mind, using media queries to adapt to various screen sizes and devices.
Prioritize readability and usability in your designs.
Use appropriate color contrasts to ensure legibility for all users.
Include alternative text and labels for interactive elements to improve accessibility.

Performance and Optimization

Minify your CSS files to reduce file size and improve load times.
Use CSS properties like transform and opacity for animations and transitions that leverage hardware acceleration.
Optimize images and other assets used as background images or within your styles.
Utilize browser caching to improve page load times for returning visitors.

Links

Official Website
Isobar Front-end Code Standards
HTML Best Practices
Writing Your Best Code
Web Accessibility Best Practices
CleanCSS Formatter

Files

02_css.md

Latest commit

History

02_css.md

File metadata and controls

CSS

Key Points about CSS

Skills Every CSS Developer Should Have

Integrating CSS with HTML

Understanding Selectors

Selectors and Properties

Different Types of CSS Selectors

Introduction to Pseudo-selectors

Common Pseudo-selectors

Inheritance and Specificity in CSS

Specificity Hierarchy

Pseudo-elements in CSS

Concept

Example

Common Pseudo-elements

Noteworthy Points

Box Model

Example

Margins

Padding

Border

Outline

Advanced Tips

Flexbox

Flex Container vs. Flex Items

Understanding the Axes

Example

Flexbox Properties

Flex Containers

Ordering and Orientation

Alignment and Justification

Flexibility of Items

Noteworthy Points

Special Styling Elements

Lists & Markers

Key Properties

Example

Table

Key Styling Properties

Example

Text

Key Text Styling Properties

Example

Style

Font

Key Font Properties:

Example

Aditional explanations

Colors

Fundamental Color Properties:

Common Methods to Define Colors:

Example

Additional explanations

Background

Core Background Properties

Example

Additional explanations

Positioning

Core Positioning Properties

Example

Additional explanations

Animations and Dynamic Effects

Animations

Core Animation Properties

Example

Additional Insights

2D/3D Transform

Quick Overview

Example

Additional Insights

Transition

Quick Overview

Example

Additional Insights