Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a computer-language that describes how XML and HTML documents should be visually presented. One of the best ways to learn CSS is through the MDN CSS Learning Arena.

CSS Best Practices

Use a CSS Reset or Normalizer: Establish consistent styles across browsers by using a CSS reset, such as normalize.css.
Avoid inline CSS: Use external CSS files for better flexibility, reusability, and maintainability.
Avoid overly specific selectors: Use classes and IDs instead of relying heavily on complex nested selectors.
Optimize and minify: Optimize and minify CSS prior to deployment to reduce file size and improve loading performance.
Keep it responsive: Use media queries to adjust styles based on different screen sizes and resolutions to ensure a functional user experience across devices.

Lesser known CSS selectors

Peer element selector

Use + as the peer element selector to select an adjacent peer element. For example, to select a <span> that immediately follows a <div>, use this CSS:

div + span {
	/* ... */
}

The code above will select the span in this HTML because the <span> appears immediately after the <div>:

<div>...</div>
<span>...</span>

Subsequent sibling selector

Use ~ as the subsequent sibling selector to select elements that appear after, not not necessarily adjacent to, another element. For example, to select a <span> that follows a <div> but has one or more elements in between the <div> and the <span>, use this CSS:

div ~ span {
	/* ... */
}

The code above will select the span in this HTML:

<div>...</div>
<p>...</p>
<span>...</span>

CSS Resources

Deeper Knowledge on Cascading Style Sheets (CSS)

Sassy Cascading Stylesheets (SCSS)

A superset of CSS that adds variables, mixins, functions, and more to CSS

CSS recipes

Quick and easy to copy recipes for CSS

Broader Topics Related to Cascading Style Sheets (CSS)

Web Development

Tools and techniques for building websites and web-applications

Computer Languages

Computer Languages: How humans tell computers what to do

James's Knowledge Graph