🔥Advanced CSS for Beginners

Hello and welcome! 🤩🤩

It's day two of our CSS journey and we're already feeling like pros! Last week we tackled the basics and now we're ready to take things up a notch.
Today's lesson promises to be even more exciting as we explore the endless possibilities of CSS styling. Are you ready to dive in? While we can't cover everything CSS has to offer in this article, we'll equip you with the tools you need to confidently continue your exploration of CSS on your own. Let's go!

1. Table of Contents
2. CSS Layout

2.1. CSS Position property

a. Static

b. Relative

c. Fixed

d. Absolute

f. Sticky

2.2. CSS Flex box

2.3. CSS Grid
3. Media Queries
4. Transitions and Animations
5. CSS Blend Modes
6. CSS Variables
7. Conclusion
8. References

CSS Layout

Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on their attributes.

CSS Position property

The CSS position property specifies the type of positioning method used for an element. There are five different position values: static, relative, fixed, absolute, and sticky.

Static

HTML elements are positioned static by default. static position elements are not affected by the top, bottom, left, and right CSS properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

Relative

An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

Notice in the codepen above how we have been able to move the position of the green container, out/away from its normal position.

Fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

In the example above, we notice that the h2 element is shown on our screen even when we scroll down past it.

Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However, if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: absolute positioned elements are removed from the normal flow and can overlap elements.

In the example above, we see that the second container's position is being modified based on the position of the element preceding it.

Sticky

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

In the example above, we see that the green container has maintained a fixed position, regardless of our scrolling through the page.

CSS Flex box

Flexbox is a powerful layout model that simplifies the creation of flexible and responsive layouts. It allows you to align and distribute elements within a container, making it easier to build complex designs. With properties like flex-direction, justify-content, and align-items, you can achieve versatile and dynamic layouts.

We can see how, in the example above, we were able to position our paragraphs next to each other, with ample space between them with just two lines of CSS. This is the power of the CSS flexbox. There is a lot more that can be done with the CSS flexbox.

CSS Grid

CSS Grid provides a two-dimensional layout system that enables precise control over rows and columns. It allows you to create complex grid structures and define the placement and sizing of elements. With features like grid templates, grid areas, and grid alignment, you can design sophisticated and visually appealing layouts.

This is an example of using display: flex and display: grid on HTML elements.

Media Queries

Responsive web design is crucial in today's mobile-driven world. Media queries allow you to create responsive layouts that adapt to different screen sizes. By defining different CSS rules based on media query breakpoints, you can adjust the design, font sizes, and layouts to provide optimal user experiences across various devices. In my article about whether a developer should go with Mobile first or Desktop first website design, I talked a bit more about what responsive design is.



/* Example of a media query for responsive design */
@media screen and (max-width: 768px) {
  /* CSS rules for smaller screens */
  /* Adjust the layout, font sizes, etc. */
}

In the code block above, there is a sample syntax for writing a media query for a device whose maximum width is 768px. After defining your media breakpoint, you write your CSS code in between the curly braces as you would normal CSS. The properties you specify here will only take effect when the device width is at the specified value.

Transitions and Animations

With CSS, there are lots of cool and flashy stylings we can add to our website to make it more visually appealing. A cool way we can do this is by using CSS transitions and animations. You can go the extra mile by learning how to personally create these animations and transitions and even coming up with a few of your own. However, there are these packages called CSS transition libraries, which are other people's CSS transition or animation effects already written and ready for use. Here are a few:

There are a lot more transition and animation libraries available. You can even create your own! 😏😏
Here's a simple example:

CSS Blend Modes

CSS blend modes offer creative possibilities by controlling how elements blend with the background or other elements. By applying blend modes to elements, you can create stunning overlays, image effects, and blending compositions. Some common blend mode values include multiply, screen, overlay, and soft-light.

In the codepen above, we can see the effect the different blend modes are having on the containers. Each container has a background color of red on a black body.

CSS Variables

CSS variables, also known as custom properties, introduce the concept of reusable values throughout your CSS codebase. By defining variables, you can easily change and update common values across your stylesheets, providing consistency and flexibility. CSS variables also allow you to create dynamic themes and styles by modifying variable values with JavaScript.



/* Example of defining and using a CSS variable */

:root {

  --primary-color: #007bff;

}

.my-element {

  color: var(--primary-color);

}

Conclusion

Are you ready to explore your creativity with CSS? This incredible language serves as an infinite playground for website design, offering endless possibilities to create stunning and innovative designs that are sure to leave a lasting impression.
When you combine CSS with JavaScript, the potential for creativity is truly limitless. By building a strong foundation of knowledge, you'll be well-equipped to take your CSS skills to the next level and create truly remarkable designs. So why not start now? Get ready to embark on an exciting journey of discovery and unleash your full creative potential with CSS!