Mastering Advanced CSS

What You Will Learn

In this course, you will conceptually explore:

• More complex CSS selectors for precise targeting.
• The intricacies of CSS specificity and the cascade.
• Advanced aspects of the CSS box model.
• Powerful layout techniques with CSS Flexbox and Grid.
• Manipulating elements in 2D and 3D space with CSS Transforms.
• Creating smooth visual changes with CSS Transitions.
• Bringing your web pages to life with CSS Animations.
• Core principles of Responsive Web Design.
• Using advanced Media Queries for targeted styling across devices.
• Leveraging advanced Pseudo-classes and Pseudo-elements.
• Strategies for optimizing CSS performance.

Advanced CSS selectors allow you to target specific elements based on their relationships, attributes, or state.

Attribute Selectors:

Target elements based on the presence or value of their HTML attributes.

/* Selects all <a> elements with a title attribute */
a[title] {
  color: green;
}

/* Selects all <input> elements with type="text" */
input[type="text"] {
  border: 1px solid blue;
}

/* Selects all <a> elements whose href attribute starts with "https" */
a[href^="https"] {
  font-weight: bold;
}

/* Selects all <img> elements whose src attribute ends with ".jpg" */
img[src$=".jpg"] {
  border-radius: 5px;
}

/* Selects all <div> elements whose class attribute contains "button" */
div[class*="button"] {
  background-color: lightgray;
}

Structural Pseudo-classes:

Target elements based on their position within the document tree.

/* Selects the first <li> element within its parent */
li:first-child {
  font-weight: bold;
}

/* Selects the last <li> element within its parent */
li:last-child {
  color: red;
}

/* Selects every third <li> element */
li:nth-child(3n) {
  text-decoration: underline;
}

/* Selects the first <p> element of its type within its parent */
p:first-of-type {
  font-style: italic;
}

/* Selects the only <span> element within its parent */
span:only-child {
  background-color: yellow;
}

Mastering these selectors allows for more efficient and targeted styling.

The Cascade and Specificity are fundamental concepts in CSS that govern how styles are applied to HTML elements.

The Cascade:

The cascade refers to the order in which CSS rules are applied. Stylesheets are applied in the following order (with later styles overriding earlier ones):

1. 1. Browser default styles
2. 2. User stylesheet styles
3. 3. Author stylesheet styles (your website's CSS)
4. 4. Author stylesheet !important styles
5. 5. User stylesheet !important styles
6. 6. Browser default !important styles

Specificity:

Specificity is the algorithm the browser uses to determine which CSS declaration takes precedence when multiple declarations have equal importance and apply to the same element. Specificity is based on the types of selectors used:

1. 1. Inline styles (directly in the HTML element) have the highest specificity.
2. 2. IDs have the next highest specificity (e.g., #my-element).
3. 3. Classes, pseudo-classes, and attribute selectors have medium specificity (e.g., .button, :hover, [type="text"]).
4. 4. Elements and pseudo-elements have the lowest specificity (e.g., div, ::before).
5. 5. The universal selector (*) and combinators (+, >, ~) have no specificity value themselves but can affect matching.

Understanding specificity helps you avoid unexpected styling issues and write more maintainable CSS.

Flexbox is a one-dimensional layout system that makes it easier to design flexible and responsive UI layouts.

Key Flex Container Properties:

.container {
  display: flex; /* Creates a flex container */
  flex-direction: row; /* Items are placed in a row (default) */
  justify-content: center; /* Distributes items along the main axis */
  align-items: center; /* Aligns items along the cross axis */
  flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
}

Key Flex Item Properties:

.item {
  flex-grow: 1; /* Item will grow to fill available space */
  flex-shrink: 0; /* Item will not shrink below its content size */
  flex-basis: auto; /* Initial size of the item */
  order: 2; /* Controls the order in which items appear */
  align-self: flex-start; /* Overrides the align-items property for this item */
}

Flexbox is ideal for aligning elements within a single row or column and distributing space among them.

CSS Grid is a two-dimensional layout system that allows you to arrange elements in rows and columns.

Key Grid Container Properties:

.container {
  display: grid; /* Creates a grid container */
  grid-template-columns: 1fr 2fr 1fr; /* Defines the number and size of columns */
  grid-template-rows: auto 100px auto; /* Defines the number and size of rows */
  gap: 10px; /* Sets the gap between rows and columns */
  grid-template-areas:
    "header header header"
    "sidebar content main"
    "footer footer footer"; /* Defines named grid areas */
}

Key Grid Item Properties:

.item {
  grid-column-start: 1; /* Item starts at the first column line */
  grid-column-end: 3; /* Item spans up to the third column line */
  grid-row: 2; /* Item is placed in the second row */
  grid-area: header; /* Item is placed in the named "header" area */
}

CSS Grid is excellent for creating complex page layouts with clear row and column structures.

Difference Between Flexbox and Grid (Conceptual):

Flexbox is primarily for one-dimensional layouts (arranging items in a single row or column), while Grid is for two-dimensional layouts (arranging items in a grid of rows and columns). They can often be used together to create sophisticated designs.

2D Transforms:

Modify the appearance of elements in a two-dimensional plane.

.element {
  transform: translateX(50px); /* Moves the element 50px to the right */
  transform: translateY(-20px); /* Moves the element 20px up */
  transform: scale(1.2); /* Increases the size by 20% */
  transform: scaleX(0.8); /* Decreases the width by 20% */
  transform: rotate(45deg); /* Rotates the element by 45 degrees clockwise */
  transform: skewX(10deg); /* Skews the element along the x-axis */
  transform: skewY(-5deg); /* Skews the element along the y-axis */
}

3D Transforms:

Manipulate elements in a three-dimensional space, adding depth and perspective.

.cube {
  transform-style: preserve-3d; /* Allows child elements to exist in 3D space */
  transform: rotateX(60deg) rotateY(-30deg);
}

.face {
  transform: translateZ(50px); /* Moves the face along the z-axis */
}

Transforms can be combined to create complex visual effects.

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: width, background-color; /* Properties to transition */
  transition-duration: 0.5s, 1s; /* Duration of the transitions */
  transition-timing-function: ease-in-out; /* Speed curve of the transition */
  transition-delay: 0.1s; /* Delay before the transition starts */
}

.element:hover {
  width: 150px;
  background-color: green;
}

/* Shorthand property */
.another-element {
  transition: all 0.3s ease-out; /* Transition all properties over 0.3s with an ease-out curve */
}

Transitions are triggered when a CSS property value changes (e.g., on hover, focus, or through JavaScript manipulation).

/* Define the animation keyframes */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation-name: fadeIn; /* Name of the keyframes to use */
  animation-duration: 2s; /* Duration of the animation */
  animation-timing-function: ease-in-out; /* Speed curve */
  animation-delay: 0s; /* Delay before the animation starts */
  animation-iteration-count: infinite; /* Number of times to repeat */
  animation-direction: alternate; /* Direction of the animation on each iteration */
  animation-fill-mode: forwards; /* Style to apply when the animation is finished */
}

Animations are defined using @keyframes rules, which specify the styles at different points in the animation sequence.

• Fluid Layouts: Using relative units (percentages) instead of fixed units (pixels) for widths and heights to allow content to scale.
• Flexible Images: Ensuring images scale down without breaking the layout, often using max-width: 100%;.
• Media Queries: Applying different styles based on the characteristics of the device (e.g., screen width, height, orientation).
• Mobile-First Approach: Designing the mobile version of the site first and then progressively enhancing it for larger screens.

/* Apply styles when the screen width is 768px or less (typical for tablets) */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none; /* Hide the sidebar on smaller screens */
  }
  .main-content {
    width: 100%; /* Make the main content take full width */
  }
}

/* Apply styles for screens with a minimum width of 992px (typical for desktops) */
@media screen and (min-width: 992px) {
  .navbar {
    padding: 1rem 2rem; /* Increase navbar padding on larger screens */
  }
}

/* Apply styles for print stylesheets */
@media print {
  body {
    font-size: 12pt;
  }
  .navigation {
    display: none; /* Hide navigation when printing */
  }
}

/* Combining media features */
@media screen and (min-width: 576px) and (orientation: landscape) {
  /* Apply styles for tablets and larger in landscape orientation */
  .container {
    flex-direction: row;
  }
}

Media queries allow you to apply CSS rules based on various device characteristics, ensuring a consistent and user-friendly experience across different contexts.

Advanced Pseudo-classes:

/* Style the currently active link */
a:active {
  color: purple;
}

/* Style the focused input field */
input:focus {
  border-color: orange;
  outline: none; /* Remove default focus outline */
}

/* Style the first element that is not a paragraph */
*:not(p):first-child {
  font-size: 1.2em;
}

/* Style an element that has no children */
div:empty {
  border: 1px dashed gray;
  padding: 10px;
  text-align: center;
}

Advanced Pseudo-elements:

/* Insert content before an element */
h2::before {
  content: ">> ";
  color: blue;
}

/* Insert content after an element */
h2::after {
  content: " <<";
  color: red;
}

/* Style the first line of a paragraph */
p::first-line {
  font-weight: bold;
}

/* Style the selected portion of an element */
::selection {
  background-color: yellow;
  color: black;
}

These advanced pseudo-classes and pseudo-elements provide powerful ways to style and interact with your HTML content based on various conditions and states.

along the cross axis */ flex-wrap: wrap; /* Allows items to wrap onto multiple lines */ }

Key Flex Item Properties:

.item {
  flex-grow: 1; /* Item will grow to fill available space */
  flex-shrink: 0; /* Item will not shrink below its content size */
  flex-basis: auto; /* Initial size of the item */
  order: 2; /* Controls the order in which items appear */
  align-self: flex-start; /* Overrides the align-items property for this item */
}

Flexbox is ideal for aligning elements within a single row or column and distributing space among them.

Conceptual example of a layout created with CSS Flexbox.

CSS Grid is a two-dimensional layout system that allows you to arrange elements in rows and columns.

Key Grid Container Properties:

.container {
  display: grid; /* Creates a grid container */
  grid-template-columns: 1fr 2fr 1fr; /* Defines the number and size of columns */
  grid-template-rows: auto 100px auto; /* Defines the number and size of rows */
  gap: 10px; /* Sets the gap between rows and columns */
  grid-template-areas:
    "header header header"
    "sidebar content main"
    "footer footer footer"; /* Defines named grid areas */
}

Key Grid Item Properties:

.item {
  grid-column-start: 1; /* Item starts at the first column line */
  grid-column-end: 3; /* Item spans up to the third column line */
  grid-row: 2; /* Item is placed in the second row */
  grid-area: header; /* Item is placed in the named "header" area */
}

CSS Grid is excellent for creating complex page layouts with clear row and column structures.

Difference Between Flexbox and Grid (Conceptual):

Flexbox is primarily for one-dimensional layouts (arranging items in a single row or column), while Grid is for two-dimensional layouts (arranging items in a grid of rows and columns). They can often be used together to create sophisticated designs.

2D Transforms:

Modify the appearance of elements in a two-dimensional plane.

.element {
  transform: translateX(50px); /* Moves the element 50px to the right */
  transform: translateY(-20px); /* Moves the element 20px up */
  transform: scale(1.2); /* Increases the size by 20% */
  transform: scaleX(0.8); /* Decreases the width by 20% */
  transform: rotate(45deg); /* Rotates the element by 45 degrees clockwise */
  transform: skewX(10deg); /* Skews the element along the x-axis */
  transform: skewY(-5deg); /* Skews the element along the y-axis */
}

3D Transforms:

Manipulate elements in a three-dimensional space, adding depth and perspective.

.cube {
  transform-style: preserve-3d; /* Allows child elements to exist in 3D space */
  transform: rotateX(60deg) rotateY(-30deg);
}

.face {
  transform: translateZ(50px); /* Moves the face along the z-axis */
}

Transforms can be combined to create complex visual effects.

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: width, background-color; /* Properties to transition */
  transition-duration: 0.5s, 1s; /* Duration of the transitions */
  transition-timing-function: ease-in-out; /* Speed curve of the transition */
  transition-delay: 0.1s; /* Delay before the transition starts */
}

.element:hover {
  width: 150px;
  background-color: green;
}

/* Shorthand property */
.another-element {
  transition: all 0.3s ease-out; /* Transition all properties over 0.3s with an ease-out curve */
}

Transitions are triggered when a CSS property value changes (e.g., on hover, focus, or through JavaScript manipulation).

/* Define the animation keyframes */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation-name: fadeIn; /* Name of the keyframes to use */
  animation-duration: 2s; /* Duration of the animation */
  animation-timing-function: ease-in-out; /* Speed curve */
  animation-delay: 0s; /* Delay before the animation starts */
  animation-iteration-count: infinite; /* Number of times to repeat */
  animation-direction: alternate; /* Direction of the animation on each iteration */
  animation-fill-mode: forwards; /* Style to apply when the animation is finished */
}

Animations are defined using @keyframes rules, which specify the styles at different points in the animation sequence.

• Fluid Layouts: Using relative units (percentages) instead of fixed units (pixels) for widths and heights to allow content to scale.
• Flexible Images: Ensuring images scale down without breaking the layout, often using max-width: 100%;.
• Media Queries: Applying different styles based on the characteristics of the device (e.g., screen width, height, orientation).
• Mobile-First Approach: Designing the mobile version of the site first and then progressively enhancing it for larger screens.

/* Apply styles when the screen width is 768px or less (typical for tablets) */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none; /* Hide the sidebar on smaller screens */
  }
  .main-content {
    width: 100%; /* Make the main content take full width */
  }
}

/* Apply styles for screens with a minimum width of 992px (typical for desktops) */
@media screen and (min-width: 992px) {
  .navbar {
    padding: 1rem 2rem; /* Increase navbar padding on larger screens */
  }
}

/* Apply styles for print stylesheets */
@media print {
  body {
    font-size: 12pt;
  }
  .navigation {
    display: none; /* Hide navigation when printing */
  }
}

/* Combining media features */
@media screen and (min-width: 576px) and (orientation: landscape) {
  /* Apply styles for tablets and larger in landscape orientation */
  .container {
    flex-direction: row;
  }
}

Media queries allow you to apply CSS rules based on various device characteristics, ensuring a consistent and user-friendly experience across different contexts.

Advanced Pseudo-classes:

/* Style the currently active link */
a:active {
  color: purple;
}

/* Style the focused input field */
input:focus {
  border-color: orange;
  outline: none; /* Remove default focus outline */
}

/* Style the first element that is not a paragraph */
*:not(p):first-child {
  font-size: 1.2em;
}

/* Style an element that has no children */
div:empty {
  border: 1px dashed gray;
  padding: 10px;
  text-align: center;
}

Advanced Pseudo-elements:

/* Insert content before an element */
h2::before {
  content: ">> ";
  color: blue;
}

/* Insert content after an element */
h2::after {
  content: " <<";
  color: red;
}

/* Style the first line of a paragraph */
p::first-line {
  font-weight: bold;
}

/* Style the selected portion of an element */
::selection {
  background-color: yellow;
  color: black;
}

These advanced pseudo-classes and pseudo-elements provide powerful ways to style and interact with your HTML content based on various conditions and states.

• Specificity Management: Keep CSS selectors as specific as necessary but avoid overly long or complex selectors that can slow down browser rendering.
• Avoid Complex Layouts: Overly nested or intricate layouts can be computationally expensive for the browser. Simplify where possible.
• Optimize Images: Ensure images are properly sized and compressed to reduce file sizes and improve loading times. While not directly CSS, it impacts perceived performance.
• Minify CSS: Remove unnecessary characters (whitespace, comments) from your CSS files to reduce their size.
• Avoid `!important` (Generally): Overuse of `!important` can make debugging and maintaining your CSS more difficult and can indicate specificity issues.
• Limit Expensive Properties: Some CSS properties (e.g., `filter`, `box-shadow`, `opacity`) can be more performance-intensive to render, especially when animated. Use them judiciously.
• Consider Content Delivery Networks (CDNs): For larger projects, hosting your CSS files on a CDN can improve loading times for users across different geographical locations.