Michael J. Larocca

Posted on Sep 29, 2023 • Originally published at htmlallthethings.com

Mastering CSS Fundamentals: Knowing When To Transition from Basics to Frameworks

#css #frontend #tutorial #beginners

Posted on Sep 29 • Originally published at htmlallthethings.com

To become a hirable web developer, you must master CSS frameworks and preprocessors. But how can you determine when you've mastered enough vanilla CSS to be ready to move on to learning them? In this article, tech industry experts Matt Lawrence and Mike Karan will cover the CSS fundamentals needed before learning frameworks, essential concepts to understand, and additional learning resources, preparing you to become a highly sought-after developer!

Topics covered in this article include:

Introduction to CSS
Adding CSS to Your Projects
Fundamental CSS Concepts
CSS frameworks and preprocessors
Where to learn CSS fundamentals
Where to have some fun

Introduction to CSS

Okay, so what exactly is CSS? Cascading Style Sheets (CSS) is a stylesheet language used to control the appearance and layout of HTML elements on a web page. CSS is part of what Mike and Matt call the pillars of web development: HTML, CSS, and JavaScript.

CSS is used to control the layout of a webpage and allows you to apply styles such as colors, fonts, and spacing to HTML elements, providing a consistent look and feel across your site. You can even dynamically rearrange your HTML element layout depending on the user's device or screen size by using media queries! But more on that later in this article.

So, in what order should you tackle the challenge of learning the pillars of web development? First, learn HTML, then CSS, and finally JavaScript in their plain vanilla forms (meaning without frameworks or libraries).

First, we will look at the various ways to add CSS to your projects, and then we will dive into fundamental CSS Concepts that are recommended for you to learn before moving on to learning frameworks and preprocessors.

Adding CSS to Your Projects

There are three primary methods to add CSS to your projects: inline styles, internal stylesheets, and external stylesheets.

Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. You can include CSS properties and values within the style attribute to style the specific element. However, inline styles are not recommended for larger projects, as they can lead to code duplication and make maintenance more difficult.

<p style="color: red; font-size: 18px;">This paragraph has inline styles applied.</p>

Internal Stylesheets

Internal stylesheets are created by adding a <style> tag within the <head> section of your HTML file. You can write CSS rules inside the <style> tag to style elements throughout the entire HTML file. While this method is more maintainable than inline styles, it is still not ideal for larger projects, as it can make your HTML file lengthy and harder to manage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal Stylesheet Example</title>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This paragraph is styled using an internal stylesheet.</p>
</body>
</html>

External Stylesheets

External stylesheets are the most recommended method for adding CSS to your projects. To create an external stylesheet, write your CSS code in a separate file, typically with a .css extension. Then, link the stylesheet to your HTML file using a <link> tag within the <head> section. This method allows for better code organization, easier maintenance, and improved performance.

In this example, we create an external stylesheet named styles.css and link it to our index.html file. The paragraph element in the HTML file is styled using the CSS rules defined in the external stylesheet.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External Stylesheet Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This paragraph is styled using an external stylesheet.</p>
</body>
</html>

<!-- styles.css -->
p {
  color: green;
  font-size: 14px;
}

Fundamental CSS Concepts

Before moving on from vanilla CSS to CSS frameworks and preprocessors, it's best to learn the following fundamental CSS Concepts, which we will cover in this article:

Basic Syntax and Selectors
Colors and Backgrounds
Fonts and Text Styling
The Box Model and Layout

* a. Margin, Padding, and Border

* b. Display and Positioning

Responsive Design

* a. Media Queries

* b. Flexbox

* c. Grid

Pseudo-classes and Pseudo-elements
CSS Transitions and Animations

Basic Syntax and Selectors

CSS syntax

In CSS, a rule is made up of three parts: the selector, which targets specific HTML elements; the property, which defines the style attribute you want to change; and the value, which specifies the new appearance for that attribute.

Basic Syntax also includes selector combinators that enable you to target elements, specificity that determines which rules take precedence, and the top-to-bottom file code, which affects how the CSS code functions.

CSS selectors

CSS selectors allow you to target specific HTML elements and apply styles to them. There are several types of selectors:

Element selectors: These target HTML elements directly, such as p, h1, or div. For example, p { color: red; } would apply the color red to all paragraph elements.
Class selectors: These target elements with specific classes, using the . prefix, like .example-class. For example, .highlight { background-color: yellow; } would apply a yellow background to all elements with the highlight class.
ID selectors: These target elements with specific IDs, using the # prefix, like #example-id. For example, #main-header { font-size: 24px; } would apply a font size of 24px to the element with the ID main-header.
Attribute selectors: These target elements with specific attributes, like [data-attribute]. For example, [data-toggle="dropdown"] { cursor: pointer; } would apply a pointer cursor to elements with a data-toggle attribute set to "dropdown".
Pseudo-classes: These target elements based on their state or position, like :hover or :nth-child(). For example, a:hover { text-decoration: underline; } would apply an underline to anchor elements when the user hovers over them.

Selector combinators

Selector combinators allow you to target elements based on their relationships with other elements. There are four types of selector combinators:

Descendant combinator: This combinator, represented by a space, selects elements that are descendants of another element. For example, div p targets all paragraph elements within a div element, no matter how deeply nested they are.
Child combinator: Represented by the > symbol, this combinator selects direct child elements of a parent element. For example, div > p targets only paragraph elements that are immediate children of a div element, ignoring any nested within other elements inside the div.
Adjacent sibling combinator: Using the + symbol, this combinator selects elements that are immediately after another element and share the same parent. For example, h1 + p targets the first paragraph element that comes right after an h1 element, provided they are siblings.
General sibling combinator: Represented by the ~ symbol, this combinator selects all elements that follow another element and share the same parent. For example, h1 ~ p targets all paragraph elements that are siblings of an h1 element, regardless of their position relative to the h1.

Specificity

Specificity in CSS determines which rules take precedence when multiple rules apply to the same element. The hierarchy of selectors, in decreasing order of specificity, is as follows:

Inline styles: Styles applied directly to an element using the style attribute have the highest specificity.
ID selectors: Selectors targeting an element's ID have the next highest specificity.
Class, attribute, and pseudo-class selectors: These selectors have a lower specificity compared to ID selectors but are more specific than element selectors.
Element selectors: These selectors have the lowest specificity and target HTML elements directly, like p, h1, or div.

⚠ In CSS, the sequence of your code plays a crucial role. When two rules share the same level of specificity, the one written later in the stylesheet will be prioritized and overwrite the previous rule. This helps ensure that the most recent styles are applied to your HTML elements.

Don't get overwhelmed by specificity. As you gain hands-on experience with CSS, you will learn how to write your code in a way that achieves the desired results. Understanding specificity will give you a great advantage when learning CSS, as it will enable you to troubleshoot your code more effectively. 👍🏻

💡 Tip: While you are learning how to code, you can use the !important tag that gives a specific style rule higher priority, ensuring it takes precedence over other rules that might conflict with it. This trick will usually get your code to work and potentially help you solve the specificity issue, but you should not use the !important tag in projects you deploy.

Colors and Backgrounds

In CSS, colors can be assigned using various formats, such as hexadecimal values, RGB, RGBA, HSL, and HSLA.

To set a background color, use the background-color property, and to set the text color, use the color property.

body {
  background-color: #f0f0f0;
  color: #333;
}

CSS also allows you to add background images using the background-image property and control their size, position, and repeat behavior with background-size, background-position, and background-repeat.

This code block sets the background image of the body element to "image.jpg", scales the image to cover the entire body area, positions the image at the center, and prevents the image from repeating.

body {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Additionally, you can use gradients to create smooth transitions between multiple colors, either linear or radial, with the linear-gradient() and radial-gradient() functions.

/* Setting background and text colors */
body {
  background-color: #f5f5f5; /* Hexadecimal format */
  color: rgba(0, 0, 0, 0.9); /* RGB with alpha format */
}

/* Linear Gradient */
div.linear-gradient {
  background-image: linear-gradient(45deg, red, yellow, blue);
}

/* Radial Gradient */
div.radial-gradient {
  background-image: radial-gradient(circle, red, yellow, blue);
}

A great website for learning CSS colors and backgrounds is css-tricks.com. This website includes detailed code explanations and snippets and is handy for tricky CSS layouts ( pun intended! 😉).

Fonts and Text Styling

To style fonts and text in CSS, you can use properties like font-family, font-size, font-weight, font-style, text-decoration, text-align, text-transform, line-height, and letter-spacing.

Font family

To set the font family, use the font-family property and provide a list of font names, separated by commas, in the order of preference. If a font is not available on the user's device, the browser will fall back to the next font in the list.

Font weight

To adjust the weight (boldness) of the text, use the font-weight property and provide a value such as normal, bold, or a numeric value between 100 and 900.

Font style

To apply italics or oblique styles to the text, use the font-style property and set its value to italic or oblique.

Text decoration

To add or remove underlines, overlines, or line-throughs, use the text-decoration property and provide values like underline, overline, or line-through.

Text align

To align text within a container, use the text-align property and set its value to left, right, center, or justify.

Text transform

To change the capitalization of the text, use the text-transform property and set its value to uppercase, lowercase, or capitalize.

Line height

To adjust the spacing between lines of text, use the line-height property and provide a value in units like pixels (px), em, rem, or unitless numbers.

Letter spacing

To control the spacing between individual characters, use the letter-spacing property and provide a value in units like pixels (px), em, or rem.

This example demonstrates how to apply all of the above font and text styling properties to a paragraph element.

p {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: 1px;
}

A great resource for adding fonts to your projects (license FREE) is Google Fonts. Google Fonts is a free, web-based service allowing you to incorporate various fonts into your projects easily.

To use Google Fonts, visit the website, browse through the available fonts, and select the ones you want to use. You can then generate a link to include in your HTML file and apply the selected font using CSS.

This example includes the "Roboto" font from Google Fonts in an HTML file and applies it to the body element using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Fonts Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <p>This text uses the Roboto font from Google Fonts.</p>
</body>
</html>

The Box Model and Layout

The CSS Box Model is a fundamental concept that describes the rectangular boxes generated for elements in a web page. Each box has four parts: content, padding, border, and margin.

Content: The actual content of the element, such as text or images.
Padding: The space between the content and the border can be adjusted using the padding property.
Border: The line surrounding the content and padding, controlled by the border property.
Margin: The space outside the border, used to separate the element from other elements, adjusted using the margin property.

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

To create layouts with CSS, you can use various properties that control the display and positioning of elements:

Display: The display property defines how an element is displayed on the page. Common values include block, inline, and inline-block. Block elements take up the full width available and create a new line, while inline elements only take up the space they need and do not create new lines.

p {
  display: block;
}
span {
  display: inline;
}

Position: The position property allows you to control the positioning of elements on the page. Common values include static (default), relative, absolute, fixed, and sticky. The top, right, bottom, and left properties can be used to adjust the position of an element based on its position property value.

.relative-element {
  position: relative;
  top: 20px;
  left: 10px;
}
.absolute-element {
  position: absolute;
  top: 50px;
  right: 20px;
}

Understanding the box model and layout properties is crucial for creating responsive and visually appealing web pages. As you become more comfortable with these concepts, you can easily create complex layouts.

Responsive design

Responsive design is an approach to web development that ensures your website looks and functions well on various devices and screen sizes. This is achieved by using fluid layouts, flexible images, and CSS media queries.

Fluid layouts: Instead of using fixed widths for your design elements, use relative units like percentages or viewport units (vw, vh) to make them adapt to different screen sizes.

.container {
  width: 80%;
  margin: 0 auto;
}

Flexible images: Ensure images scale proportionally and do not overflow their containers by setting their max-width property to 100%.

img {
  max-width: 100%;
  height: auto;
}

CSS media queries: Media queries allow you to apply different styles based on the user's device or screen size. You can define breakpoints to target specific screen widths and apply styles accordingly.

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

Flexbox

Flexbox is a powerful CSS layout module that makes it easy to create flexible, responsive, and dynamic layouts with minimal code. It works by turning an HTML container into a flex container and its children into flex items, which can then be arranged and aligned using various properties.

To create a flex container, set the display property of an element to flex or inline-flex. This will enable flex layout for the container and its direct children.

.container {
  display: flex;
}

Once you have a flex container, you can control the layout of its children using the following properties:

flex-direction: Determines the main axis of the flex container, either row (default), row-reverse, column, or column-reverse.

.container {
  flex-direction: row;
}

flex-wrap: Controls whether flex items wrap onto multiple lines or not, either nowrap (default), wrap, or wrap-reverse.

.container {
  flex-wrap: wrap;
}

justify-content: Aligns flex items along the main axis, with values like flex-start (default), flex-end, center, space-between, space-around, or space-evenly.

.container {
  justify-content: center;
}

align-items: Aligns flex items along the cross-axis, with values like stretch (default), flex-start, flex-end, center, or baseline.

.container {
  align-items: center;
}

align-content: Aligns multiple lines of flex items along the cross axis, with values like stretch (default), flex-start, flex-end, center, space-between, space-around, or space-evenly.

.container {
  align-content: space-between;
}

To control the layout of individual flex items, you can use the flex, align-self, and order properties.

flex: A shorthand property for flex-grow, flex-shrink, and flex-basis, which controls how flex items grow and shrink to fill the available space in the container.

.item {
  flex: 1 1 auto;
}

align-self: Overrides the align-items value for a specific flex item, with values like auto (default), flex-start, flex-end, center, baseline, or stretch.

.item {
  align-self: flex-end;
}

order: Sets the order in which flex items appear within the container using integer values. Items with lower order values appear before items with higher order values.

.item {
  order: 1;
}

You can easily create complex and responsive layouts using Flexbox, making it a valuable tool to add to your tech toolbelt! 🔧

If you would like to see CSS Flexbox in action, check out Kyle Cook's (Web Dev Simplified) helpful YouTube video "Learn Flexbox in 15 Minutes."

Grid

CSS Grid is a versatile layout system that allows you to create complex, responsive, and two-dimensional layouts using rows and columns. It works by turning an HTML container into a grid container and its children into grid items, which can then be positioned and sized using various properties.

To create a grid container, set the display property of an element to grid or inline-grid. This will enable grid layout for the container and its direct children.

.container {
  display: grid;
}

Once you have a grid container, you can define the structure of the grid using the grid-template-columns and grid-template-rows properties. These properties allow you to specify the number and size of columns and rows in the grid.

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

You can also define gaps between the grid items using the grid-gap, grid-row-gap, and grid-column-gap properties.

.container {
  grid-gap: 10px;
}

To control the placement and size of individual grid items, you can use the grid-column, grid-row, grid-area, and grid-template-areas properties.

grid-column: Specifies the starting and ending columns for a grid item, using integer values or the keyword span.

.item {
  grid-column: 1 / 3;
}

grid-row: Specifies the starting and ending rows for a grid item, using integer values or the keyword span.

.item {
  grid-row: 1 / 2;
}

grid-area: Defines the position and size of a grid item by specifying the starting and ending rows and columns simultaneously.

.item {
  grid-area: 1 / 1 / 2 / 3;
}

grid-template-areas: Allows you to create a visual representation of the grid layout and assign grid items to specific areas using named areas.

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Mastering CSS Grid allows you to create intricate, responsive layouts that adapt to various screen sizes and devices.

To get started with CSS Grid, check out Kevin Powell's aptly titled YouTube video, "Get started with grid WITHOUT being overwhelmed."

💻 Responsive design is a dense topic and, realistically, will take a lot of practice and research to get comfortable and confident with it. So don't be hard on yourself when tackling this CSS concept. Just understand what it is for now, and "stay calm and code on!" 😀

Pseudo-classes and elements

Pseudo-classes and pseudo-elements are special keywords in CSS that allow you to style elements based on their state, position, or structure without having to add extra classes or IDs to the HTML markup.

Pseudo-classes: Pseudo-classes target elements based on their state or position, like :hover, :focus, or :nth-child(). They are added to selectors using a colon (:) followed by the pseudo-class keyword.

In this code block, the background color changes to blue when the user hovers over a button element.

button:hover {
  background-color: blue;
}

Pseudo-elements: Pseudo-elements are used to style specific parts of an element, such as ::before or ::after. They are added to selectors using two colons (::) followed by the pseudo-element keyword.

This code block targets the first letter of every paragraph element and styles it with a font size of 24px and bold font weight.

p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

Understanding and using pseudo-classes and pseudo-elements allows you to create more dynamic and interactive styles for your web pages without relying on JavaScript or modifying the HTML structure.

CSS Transitions and Animations

CSS transitions allow you to smoothly change the values of CSS properties over a specified duration, creating visual effects when elements change their state. To create a transition, you need to specify the CSS property you want to animate, the duration of the animation, and the timing function that controls the animation's speed.

This code block makes the background color of a button change smoothly from red to blue when the user hovers over it, with a transition duration of 0.5 seconds and an ease-in-out timing function.

button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: blue;
}

CSS animations enable you to create more complex and customizable animations by defining keyframes with different CSS property values. To create an animation, you need to use the @keyframes rule to define the keyframes and then apply the animation to an element using the animation property.

This code block defines a CSS animation called "fadeIn" that gradually changes an element's opacity from 0 (completely transparent) to 1 (completely opaque) over a duration of 2 seconds. The animation is applied to all div elements with a linear timing function.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div {
  animation: fadeIn 2s linear;
}

Taking the time to learn, experiment, and incorporate transitions and animations in your projects is a fun way to create engaging and interactive user experiences without relying on JavaScript!

CSS frameworks and preprocessors

CSS frameworks and preprocessors are tools that help you write more efficient and organized CSS code. They can speed up your workflow, making creating and maintaining complex projects easier.

CSS Frameworks

CSS frameworks are pre-written libraries that provide a set of ready-to-use styles and components for common web design tasks. Some popular CSS frameworks include Bootstrap, Tailwind CSS, and Bulma. These frameworks help you quickly create responsive and visually appealing websites by providing a consistent look and feel and pre-built components like buttons, forms, and navigation menus.

CSS Preprocessors

CSS preprocessors, such as Sass, Less, and Stylus, extend the capabilities of CSS by adding features like variables, nested rules, and mixins. They allow you to write more maintainable and modular CSS code, which is then compiled into standard CSS that browsers can understand. Preprocessors can help you keep your code organized, make it easier to update styles across your project, and even optimize your CSS for better performance.

So, which frameworks and preprocessors are right for you? As Mike and Matt always wisely suggest, check your local job listings to see what companies use in your area. If you are creating personal projects, choose one based on your goals and project requirements.

And as Matt says, don't sweat it! There is no reason to make a "mountain out of a molehill!" Have some fun and experiment with each one. Build out a few projects with each technology, and see which one is best for you.

What is most important is that you become so comfortable with vanilla CSS that you can then easily pick up learn frameworks and preprocessors when desired or needed! 😉

Where to learn CSS fundamentals

freeCodeCamp

So, now that we covered what CSS fundamentals to learn before tackling frameworks and preprocessors, where can you practice and further learn the fundamentals?

I always like to recommend freeCodeCamp. They are an invaluable FREE resource consisting of hands-on coding practice, articles, books, and a wonderful staff and community willing to help you. You can take their "Responsive Web Design" course, which includes the CSS fundamentals, and upon completion, you will earn a verified certification!

Scrimba

Scrimba is another invaluable resource with a wonderful community, and you can learn the topics covered in the article with these FREE selected courses:

Where to learn Responsive web design

As I mentioned earlier, responsive web design is a dense topic and will take plenty of hands-on practice and research to get comfortable with.

Kevin Powell is a great person to learn responsive web design from for FREE. Be sure to check out his YouTube channel, which includes extensive coverage of responsive web design.

Where to learn UI/UX design

Since you are learning CSS, you would greatly benefit from learning UI/UX design. UI/UX design creates visually appealing and user-friendly interfaces for websites and applications. UI (User Interface) design focuses on the visual elements, such as colors, fonts, and layout, while UX (User Experience) design focuses on the overall usability and functionality, ensuring a smooth and enjoyable experience for users.

In my opinion, Gary Simon is the best person to teach you UI/UX design! Be sure to check out his YouTube DesignCourse channel, which includes extensive UI/UX design coverage.

You can also take Gary Simon's FREE Scrimba course, Learn UI Design Fundamentals.

CSS animation

To take your website and coding skills to the next level, Mike brings a popular CSS animation platform called GSAP to our attention. GSAP, or GreenSock (greensock.com), is a JavaScript library that makes creating smooth and complex animations for web elements easy. It provides powerful tools to control animations' timing, easing, and sequencing, making it popular for building engaging and interactive web experiences.

To learn more about this animation platform, you can watch Kyle Cook's (Web Dev Simplified) helpful YouTube video "Learn GSAP In 23 Minutes."

Where to have some fun

Learning CSS doesn't have to be all about hard work and studying! It can also be fun and games! Be sure to check out the following created website list for CSS educational fun!

CSS online games

Flexbox Froggy: https://flexboxfroggy.com/
Grid Garden: https://cssgridgarden.com/
Flexbox Defense: https://www.flexboxdefense.com/
CSS Diner: https://flukeout.github.io/
Unfold: https://rupl.github.io/unfold/
CSS Battle: https://cssbattle.dev/
CSS Grid Playground: https://www.cssgridplayground.com/

Be sure to listen to the episode!

Episode 238 You’ve Learned Enough CSS, Here’s What’s Next

Be sure to check out HTML All The Things on socials!

Scrimba Discount!

Learn to code using Scrimba with their interactive follow-along code editor
Join their exclusive discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: tinyurl.com/ScrimbaHATT

This article contains affiliate links, which means we may receive a commission on any purchases made through these links at no additional cost to you. This helps support our work and allows us to continue providing valuable content. Thank you for your support!

My other HTML All The Things articles

Conclusion

Learning the CSS fundamentals is crucial before moving on to frameworks and preprocessors. Although you now know the fundamentals needed before learning frameworks and essential concepts to understand, mastering them will take time and plenty of hands-on training. You can utilize FREE resources like freeCodeCamp, Scrimba, and YouTube channels to learn and practice these concepts.

Once you are ready to move on to learning frameworks and preprocessors, Mike and Matt advise the following for personal projects and for job placement. For personal projects, choose one based on your goals and project requirements, and for job placement, review local job listings to see which technologies are in demand, which will help you make an informed decision.

Don't wait any longer! Embrace the challenge of learning CSS fundamentals and set yourself on the path to becoming an in-demand web developer to advance your career!

Let's connect! I'm active on LinkedIn and Twitter.