They help create clean, organized, and user-friendly interfaces. Many developers still reach for JavaScript to build accordions, which adds avoidable complexities to their projects.

The HTML <details> element solves this problem with its built-in disclosure widget that toggles content visibility using just a few lines of HTML and optional CSS.

In this article, we’ll look at an FAQ accordion built using <details>. You can see the final project here.

Table of Contents

• What is the HTML <details> Element?

• An FAQ Accordion Built with the <details> Element

• Browser Support and Accessibility Considerations

• Conclusion

What is the HTML <details> Element?

The HTML <details> element is a disclosure widget that allows you to hide and show content with a single click. Think of it as a native accordion that comes built into HTML.

The most common use case for accordions is the Frequently Asked Questions (FAQ) section on many sites. If you’ve seen or interacted with an FAQ, that’s an opportunity to use <details>.

It has two main components:

• <details> is the main container tag that opens and closes to display what’s in <summary>.

• <summary> is a container for the content that is displayed when <details> is clicked.

💡 In addition to the summary, you can include any HTML text element within the <details> container.

The image above shows a real-life use case of <details> on the Apple website. In a later section, we’ll learn about the browsers that support it.

When to Use <details> over JavaScript alternatives

Unlike JavaScript-based accordions that add weight to your project, <details> offers the same functionality with minimal load and better performance. It also offers built-in keyboard navigation and screen reader support.

Choose <details> over JavaScript-created accordions when:

• Building simple accordions or FAQ sections

• Accessibility, performance, and SEO are a priority

• You want to avoid JavaScript dependencies

An FAQ Accordion Built with the <details> Element

Here’s what our example project looks like:

This design is by Frontend Mentor (and you can check out the project on Codepen).

To follow along, you need basic knowledge of HTML and CSS. Since the focus of this article is <details>, we won't place a lot of emphasis on the starting HTML and CSS code (available on the Codepen above). Instead, we'll look at one FAQ question with its answer to learn how <details> works.

How to Use <details>

To create an accordion with the <details> element, you need both the <details> and <summary> elements, as shown in the starter code below.

<details>
  <summary>What is Frontend Mentor, and how will it help me?</summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

The GIF below will be the result after running the above code. With less than five lines of HTML code, we already have an accordion.

Styling <details>

Now, let's focus on transforming our basic accordion into something visually appealing (foundational styles can be found on the Codepen). First, we’ll add the icons as SVGs within <summary> with classes (closed-icon and open-icon) to make them easy to style.

<details>
  <summary>What is Frontend Mentor, and how will it help me?
  <svg class="closed-icon" xmlns="<http://www.w3.org/2000/svg>" class="closed-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1835 12.2689 25.8981 9.17131 23.6134 6.88659C21.3287 4.60186 18.2311 3.31653 15 3.3125ZM19.6875 16.4375H15.9375V20.1875C15.9375 20.4361 15.8387 20.6746 15.6629 20.8504C15.4871 21.0262 15.2486 21.125 15 21.125C14.7514 21.125 14.5129 21.0262 14.3371 20.8504C14.1613 20.6746 14.0625 20.4361 14.0625 20.1875V16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.375 15.7486 9.375 15.5C9.375 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H14.0625V10.8125C14.0625 10.5639 14.1613 10.3254 14.3371 10.1496C14.5129 9.97377 14.7514 9.875 15 9.875C15.2486 9.875 15.4871 9.97377 15.6629 10.1496C15.8387 10.3254 15.9375 10.5639 15.9375 10.8125V14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#AD28EB"/>
  </svg> 
  <svg class="open-icon" xmlns="<http://www.w3.org/2000/svg>" class="open-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1841 12.2687 25.899 9.17076 23.6141 6.8859C21.3292 4.60104 18.2313 3.31591 15 3.3125ZM19.6875 16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.37501 15.7486 9.37501 15.5C9.37501 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#301534"/>
  </svg>
  </summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

In the code below, we customize the disclosure marker by hiding the default arrow and adding a custom icon to the right using the ::marker pseudo-element on <summary>. We also set its content as empty, which removes the marker altogether.

/* Styles for the clickable summary element*/
summary {
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  margin-bottom: 1em;
  padding: 1.5em;
/* Remove the default marker */
  &::marker {
    content: '';
  }

  &:last-child { 
    margin-bottom: 0; 
  } 

  &:hover { 
    color: var(--text-accent);
    outline: none;
  }
}

p {
  padding-top: 1em;
  color: var(--text-light);
}
/* Styles for the collapsible <details> container */
details {
  margin-bottom: 1em;

  &:last-child { 
    margin-bottom: 0; 
  }

  .open-icon {
    display: none;
  }

  &[open] {
    .open-icon {
      display: inline;
    }

    .closed-icon {
      display: none;
    }
  }

  .open-icon,
  .closed-icon {
    width: 1.8em; 
    height: 1.8em;
    flex-shrink: 0;
  }
}

The GIF below shows the output of styling our accordion with the CSS code above.

To have an FAQ question expanded when the page loads, add the open attribute to <details>. This is particularly useful for highlighting important information where the most crucial FAQ starts expanded.

<details open>
    <summary>What is Frontend Mentor, and how will it help me?</summary>
</details>

Browser Support and Accessibility Considerations

According to MDN, <details> is a well established feature that works across many devices and the popular browsers (Chrome, Edge, Firefox, and Safari) since January 2020.

<details> includes built-in accessibility features that requires additional JavaScript in custom solutions such as keyboard navigation, screen reader support, and semantic structure. You can also add attributes like role, aria-expanded, and aria-labelledby to ensure even more accessibility.

Conclusion

<details> is a powerful yet under-utilized element for creating UI elements like accordions, FAQs, or navigation menus without JavaScript. It is easy to implement and lightweight, and yet improves user experience with interactive content.

So, the next time you need to create any collapsible content, with accessibility and performance in mind, consider reaching for <details> and it will surely make your development life easier.

Here are some helpful resources:

• MDN Documentation for <details>

• CSS-Tricks Guide to Styling Details

• Web.dev Learn HTML: Details

However, when developing mobile apps with React Native, integrating Tailwind CSS may be challenging. But guess what? Not anymore. With the development of tools such as NativeWind, React Native developers can leverage Tailwind CSS power to design stunning and responsive mobile UIs easily.

In this tutorial, you'll learn the process of integrating Tailwind CSS to your React Native Expo app using NativeWind. We'll also build a simple login screen with NativeWind.

Table of Contents:

• What's NativeWind?
• Prerequisites
• Getting Started
• How to Create A New Expo App
• How to Install NativeWind
• How to Set Up Tailwind CSS
• How to Configure NativeWind With Babel
• How to Style with NativeWind
• How to Build A Simple Login Screen
• Conclusion

What's NativeWind?

NativeWind acts as a bridge between Tailwind CSS and React Native Expo, allowing developers to take advantage of Tailwind's utility-first approach in their mobile app development workflow.

NativeWind provides various benefits to developers, some of these benefits include:

• Familiar Syntax: Developers that are familiar with Tailwind CSS can easily migrate to using NativeWind in their React Native projects, easing the learning curve.
• Consistent Styling: NativeWind ensures consistent styling across platforms by offering a single collection of components and services.
• Flexibility: NativeWind allows developers to easily adapt and extend styles to meet the app's design specifications.

Overall, It provides a collection of components and tools that are very similar to Tailwind CSS, allowing developers to create shorter, more concise code while preserving flexibility and consistency across platforms.

Tailwind makes writing code feel like I’m using a design tool - Didier Catz

Prerequisites

• Basic Understanding of React Native Expo and Tailwind CSS.
• Node.js and npm (or yarn) installed.
• Willingness to learn :)

Getting Started

Before you dive into integrating Tailwind CSS into your React Native Expo app, you'll need to ensure that you have the necessary tools set up.

If you haven't already installed Expo and expo-cli globally, you can do so using npm or yarn:

npm install -g expo-cli

or

yarn global add expo-cli

How to Create A New Expo App

With expo-cli installed, you can now create a new React Native Expo project.

Navigate to the directory where you wish to create your project and open the terminal. You can do this by pressing CTRL + ` on Visual Studio Code. Then execute this command in the terminal:

npx create-expo-app simpleproject

This command creates an expo project in your directory.

How to Install NativeWind

After creating your expo project, you can install NativeWind and its dependencies by running the following commands in your project's directory:

cd simpleproject
npm i nativewind
npm i --dev tailwindcss@3.3.2

or

cd simpleproject
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

Next, you'll need to create a tailwind.config.js file. To do this, run this command in your terminal:

npx tailwindcss init

This would result in a tailwind.config.js file in your project's root directory.

How to Set Up Tailwind CSS

To set up Tailwind CSS in your project, navigate to your tailwind.config.js file, and under content, enter the paths to your components. Your tailwind.config.js file would then look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./<custom directory>/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.conf.js file after adding paths to components

In the above example, you can replace <custom directory> with your directory's real name.

How to Configure NativeWind with Babel

You'll also need to configure NativeWind with Babel. To do this, include the NativeWind plugin in your project's babel.conf.js file:

plugins: ["nativewind/babel"],

The babel.conf.js file would look like this after adding the NativeWind plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

babel.conf.js file after adding nativewind plugin

By including the NativeWind plugin in the Babel configuration file you ensure that NativeWind's functionality is properly incorporated into your project's JavaScript codebase.

🎉With this, NativeWind has been successfully integrated into your Expo app. The next step is to begin styling the app with NativeWind.

How to Style with NativeWind

To begin styling with NativeWind, go to your project's App.js file or the component you would like to style, which would look like this by default:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

App.js boilerplate code

Next, modify your component to get rid of any instances of StyleSheet abstraction. In this example, we'll modify the App.js code. After adjustments, we should have something like this:

import { StatusBar } from "expo-status-bar";
// import { StyleSheet, Text, View } from "react-native";
import { Text, View } from "react-native";

export default function App() {
  return (
    // <View style={styles.container}>
    <View className='flex-1 justify-center items-center bg-white'>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     backgroundColor: "#fff",
//     alignItems: "center",
//     justifyContent: "center",
//   },
// });

App.js component after modification

In the modified codeblock, we remove all occurrences of StyleSheet abstractions, including the import statement for stylesheet and the StyleSheet.create function, and we replace style with className in the App.js return function.

Having cleared that up, all you need to do is write Tailwind CSS classes into your app className to begin implementing Tailwind CSS in your application. You'll see this in a bit as we build a simple login screen with NativeWind.

How to Build A Simple Login Screen

Now, let's dive into building a simple login screen using NativeWind. We'll continue with the initial setup in the App.js file and gradually add components to create the login UI.

First, let's replace the existing code in the App.js file with the following:

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      </Text>
      {/* Additional components goes here */}
    </View>
 );
}

Starter code for login screen UI

The code above imports the essential components from React Native and Expo. We then use a View component to define the structure of our login screen, which is styled with NativeWind's utility classes. Inside the View, we have a Text component that displays "Login" with styling applied using NativeWind classes.

Next, you can add your login form components, such as username and password input fields, a login button, and any other necessary elements. Here is an example of how you can extend the login screen:

import { StatusBar } from "expo-status-bar";
import { Text, View, TouchableOpacity, TextInput } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      </Text>
      {/* Additional components goes here */}
      <View className='mt-5 mx-5'>
        <View>
          <Text className='text-gray-400'>EMAIL:</Text>
          <TextInput
            placeholder='Enter Email...'
            className='border border-dotted p-2 text-gray-500 border-amber-400 mt-1'
          />
        </View>
        <View className='mt-3'>
          <Text className='text-gray-400'>PASSWORD:</Text>
          <TextInput
            secureTextEntry
            placeholder='Enter Password...'
            className='border text-gray-500 border-dotted p-2 border-amber-400 mt-1'
          />
        </View>

        <TouchableOpacity className='bg-orange-300 p-3 mt-4'>
          <Text className='text-center text-base text-white'>Login</Text>
        </TouchableOpacity>

        <Text className='text-center font-normal text-gray-500 text-base mt-3'>
          OR
        </Text>
        <View className='mt-4'>
          <TouchableOpacity className='flex flex-row items-center justify-center p-2 bg-orange-300'>
            <Text className='text-white mx-2 text-sm'>Sign In With Google</Text>
          </TouchableOpacity>
        </View>
        <View className='mt-6 flex-row justify-center'>
          <Text className=''>New to FreeCodeCamp? </Text>
          <TouchableOpacity>
            <Text className='text-amber-500'>Create an Account</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

Extended login screen UI with additional components

In this expanded version, we've included TextInput components for the username and password input fields, as well as a TouchableOpacity for the login button. Styling is done with NativeWind's utility classes to provide a clean and consistent appearance.

Furthermore, once you've finished creating your login screen using NativeWind in your React Native Expo project, you'll want to test it to check if everything works properly. You can do this by running this command on your terminal:

expo start

This command will launch the bundler and generate a QR code. To open the app, scan the QR code displayed in the terminal with your emulator's camera, or press "a" for Android or "i" for iOS.

Output of the code in an emulator

If you need to, you can access the complete project code on GitHub.

Conclusion

Integrating Tailwind CSS into a React Native Expo project with NativeWind has various benefits, including increased developer efficiency, code consistency, and performance. Developers can easily create amazing mobile applications by leveraging the power of Tailwind CSS's utility-first approach and React Native's native features.

NativeWind makes it easy to apply Tailwind CSS to your React Native Expo app. Using Tailwind CSS in your mobile app development workflow opens up new possibilities for UI design and customization.

Remember, if you have any questions or just want to say hi, feel free to reach me on X(Twitter) or my website. :)

How can Tailwind CSS help us to take control of our styles?

• What is Tailwind?
• So what makes Tailwind great?
• Part 1: Adding Tailwind CSS to a static HTML page
• Part 2: Adding Tailwind CSS to a React app

What is Tailwind?

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

So what makes Tailwind great?

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

Part 1: Adding Tailwind CSS to a static HTML page

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

Step 1: Creating a new page

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

New HTML page with content

If you want to simplify this step, you can just copy the file I created to get started.

Follow along with the commit!

Step 2: Adding Tailwind CSS via CDN

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

So let's add a link to the CDN file in the <head> of our document:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

HTML page with the Tailwind CSS base

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

Follow along with the commit!

Step 3: Using Tailwind CSS to add styles to your page

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

HTML page with basic paragraph styles

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

• text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
• font-bold: set the weight of the text (font-weight) to bold
• mt-8: Similar to my-5, this will set the margin top (t) to 8rem
• mb-5: And this will set the margin bottom (b) to 5rem

HTML page with styled H1

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

• h2: text-xl
• h3: text-lg

HTML page with all headers styled

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

• list-disc: set the list-style-stype to disc (the markers on each line item)
• list-inside: sets the position of the list markers using relative to the list items and the list itself with list-style-position to inside
• my-5: set the margin of the y axis to 5rem
• pl-2: set the left padding to 2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

HTML page with styled lists

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

And with that, we have our page!

HTML page with centered content

Follow along with the commit!

Step 4: Adding a button and other components

For the last part of our static example, let's add a button.

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

So that means, we're going to have to create our own using the utility classes!

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

<button>Party with Slurm!</button>

HTML page with unstyled button

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

Let's add the following classes:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

Here's a breakdown of what's happening:

• text-white: we're setting our text color to white
• font-bold: set the weight of the text to bold (font-weight)
• bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
• hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
• py-2: set the padding of the y-axis to 2rem
• px-4: set the padding of the x-axis to 4rem
• rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

And with all of that, we have our button!

HTML page with a styled button

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

Follow along with the commit!

Part 2: Adding Tailwind CSS to a React app

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

Step 1: Spinning up a new React app

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

To get started, you can follow along with the directions from the official React documentation:

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

Create React App starting page

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

Migrating code to React app

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

Fixing class attribute in content

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

Adding wrapper styles to the app

Once you save your changes and spin back up your server, it will look deceivingly okay.

React app with basic content

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

Follow along with the commit!

Step 2: Installing Tailwind in your React app

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

First, let's add our dependencies:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

• tailwindcss: the core Tailwind package
• postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
• autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

We're also going to add two dev dependencies that make it easier to work with our code:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

• concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
• chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

Inside the App.css file, replace the entire content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

And now the page should look exactly like it did in our static example!

React app with content styled

Follow along with the commit!

Step 3: Creating a new button component class with Tailwind

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

If you remember from our HTML, we're already including those same classes to our <button> element. Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

And now that we're creating that class, let's apply it to our button:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

.btn class in a React app with Tailwind

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

<button className="btn btn-purple">
  Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

Styled button in React with Tailwind

Follow along with the commit!

Applying these concepts to more components

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

What tips and tricks do you like to use with Tailwind?

Share with me on Twitter!

We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how.

##Adding a Basic Drop Shadow

Let's first set up some basic HTML elements to add our drop shadows to:

```html

Then add some basic CSS:

```css p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

The result is just three black boxes that will be easy for us to add drop shadows to by calling their unique id's:

HTML elements setup

To add a basic drop shadow, let's use the box-shadow property on the Box 1:

```css / offset-x | offset-y | color /

#box1 { box-shadow: 6px 12px yellow; }

Adding a basic drop shadow to Box 1

We have 3 parameters here. The first 2 are, respectively, the x-offset and y-offset. They set the location of the drop shadow.

The offset is relative to the origin, which in HTML is always the top left corner of an element. A positive x-offset will move the shadow to the right, and a positive y-offset will move the shadow downwards.

The third parameter is the color of your drop shadow.

Keep in mind that although we used <div> elements here, the box-shadow property can be applied to any other HTML element as well.

##Adding a Blur Radius

If we want the shadow to look a little more realistic, we will want to experiment with the blur-radius parameter.

This parameter controls how much to blur the shadow such that it becomes bigger and lighter. Let's apply it to Box 2:

```css / offset-x | offset-y | blur-radius | color /

#box2 { box-shadow: 6px 12px 4px red; }

Adding a blur radius to Box 2

The value of 4px sets the radius of the blur to apply to our drop shadow.

##Adding a Spread Radius

If we want to control the size of the shadow, we can use the spread-radius parameter which controls how much a shadow grows or shrinks.

Let's add a spread radius of 8px to Box 2:

```css / offset-x | offset-y | blur-radius | spread-radius | color /

#box2 { box-shadow: 6px 12px 4px 8px red; }

Adding a spread radius in addition to a blur to Box 2

Remember the order of these parameters!

##Combining Multiple Shadows in a Single Property

If we want to get fancy, we can add multiple drop shadows to an element using a single box-shadow property.

Let's do that with Box 3 by simultaneously adding a blue and green drop shadow:

```css / Any number of shadows, separated by commas /

#box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }

Adding multiple drop shadows to Box 3

##Bonus: Create an Inset Shadow

While it will not create a drop shadow, the inset parameter can also be used with the box-shadow property.

As the name suggests, this parameter creates an inset shadow (i.e. shadow inside a box).

The inset parameter can be placed either at the beginning or the end of the box-shadow property. Here we demonstrate its use with a blockquote element.

HTML:

```html

The key to success is to start before you're ready.

— Marie Forleo

CSS:

```css blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }

Create an inset shadow

Of course you can add some blur and spread to enhance the shadow, or even multiple shadows:

```css box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

Inset shadow combined with drop shadow

With the box-shadow property, we can easily make elements on a web page stand out to create a nice 3D lighting effect.

If you want to do some experimenting yourself, here's a code pen I created with the examples used in this tutorial.

Play around and see what you can come up with!

##Want to See More Web Development Tips and Knowledge?

• Subscribe to my weekly newsletter
• Visit my blog at 1000 Mile World
• Follow me on Twitter

Some of the social giants like Facebook even use this approach to give page loading a better experience. How can we do that with just some simple CSS?

• What are we going to build?
• Just want the snippet?
• Part 1: Creating our loading animation
• Part 2: Using our loading animation in a dynamic app

What are we going to build?

We're going to create a loading animation using a CSS class that you can apply to pretty much any element you want (within reason).

Loading animation preview

This gives you great flexibility to use it and makes the solution nice and simple with only CSS.

While the snippet is pretty small and you could just copy and paste it, I'll walk you through what's happening and an example of using it dynamically when loading data.

Just want the snippet?

You can grab it here!

Do I need to know how to animate before this tutorial?

No! We'll walk through in detail exactly what you need to do. In fact, the animation in this tutorial is relatively simple, so let's dig in!

Part 1: Creating our loading animation

This first part is going to focus on getting the loading animation together and seeing it on a static HTML website. The goal is to walk through actually creating the snippet. We'll only use HTML and CSS for this part.

Step 1: Creating some sample content

To get started, we'll want a little sample content. There's really no restrictions here, you can create this with basic HTML and CSS or you can add this to your Create React App!

For the walk through, I'm going to use HTML and CSS with a few examples of content that will allow us to see this in effect.

To get started, create a new HTML file. Inside that HTML file, fill it with some content that will give us the ability to play with our animation. I'm going to use fillerama which uses lines from my favorite TV show Futurama!

Static HTML & CSS webpage with content from fillerama.io

If you're going to follow along with me, here's what my project looks like:

my-css-loading-animation-static
- index.html
- main.css

Follow along with the commit!

Step 2: Starting with a foundation loading class

For our foundation, let's create a new CSS class. Inside our CSS file, let's add:

.loading {
  background: #eceff1;
}

With that class, let's add it to a few or all of our elements. I added it to a few paragraphs, headings, and lists.

<p class="loading">For example...

Static HTML & CSS webpage with a gray background for the content

That gives us a basic background, but we'd probably want to hide that text. When it's loading, we won't have that text yet, so most likely we would want to use filler text or a fixed height. Either way, we can set the color to transparent:

.loading {
  color: transparent;
  background: #eceff1;
}

Static HTML & CSS webpage with a gray background and transparent color for the content

If you notice with list elements, whether you apply the class to the top level list element (<ol> or <ul>) vs the list item itself (<li>), it looks like one big block. If we add a little margin to the bottom of all list elements, we can see a different in how they display:

li {
  margin-bottom: .5em;
}

Style difference between applying to the top level list or the list items

And now it's starting to come together, but it kind of just looks like placeholders. So let's animate this to look like it's actually loading.

Follow along with the commit!

Step 3: Styling and animating our loading class

Before actually animating our class, we need something to animate, so let's add a gradient to our .loading class:

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
}

This is saying that we want a linear gradient that's tilted at 100 degrees, where we start with #eceff1 and fade to #f6f7f8 at 30% and back to #eceff1 at 70%;

Subtle gradient background that might look like a glare

It's hard to see initially when it's still, it might just look like a glare on your computer! If you'd like to see it before moving on, feel free to play with the colors above to see the gradient.

Now that we have something to animate, we'll first need to create a keyframes rule:

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

This rule when applied will change the background position from starting at 100% of the x-axis to 0% of the x-axis.

With the rule, we can add our animation property to our .loading class:

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  animation: loading 1.2s ease-in-out infinite;
}

Our animation line is setting the keyframe to loading, telling it to last for 1.2 seconds, setting the timing function to ease-in-out to make it smooth, and tell it to loop forever with infinite.

No change – it's not animating

If you notice though after saving that, it's still not doing anything. The reason for this is we're setting our gradient from one end of the DOM element to the other, so there's nowhere to move!

So let's try also setting a background-size on our .loading class.

.loading {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

Now, since our background expands beyond our DOM element (you can't see that part), it has some space to animate with and we get our animation!

Our loading animation!

Follow along with the commit!

Part 2: Using our loading animation in a dynamic app

Now that we have our loading animation, let's put it into action with a basic example where we fake a loading state.

The trick with actually using this is typically we don't have the actual content available, so in most cases, we have to fake it.

To show you how we can do this, we're going to build a simple React app with Next.js.

Step 1: Creating an example React app with Next.js

Navigate to the directory you want to create your new project in and run:

yarn create next-app
# or
npm init next-app

It will prompt you with some options, particularly a name which will determine the directory the project is created in and the type of project. I'm using my-css-loading-animation-dynamic and the "Default Starter App".

Creating a new project with Next.js

Once installed, navigate into your new directory and start up your development server:

cd [directory]
yarn dev
# or 
npm run dev

Starting development server with Next.js

Next, let's replace the content in our pages/index.js file. I'm going to derive the content from the previous example, but we'll create it similar to how we might expect it to come from an API. First, let's add our content as an object above our return statement:

const content = {
  header: `So, how 'bout them Knicks?`,
  intro: `What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!`,
  list: [
    `Yes! In your face, Gandhi!`,
    `So I really am important? How I feel when I'm drunk is correct?`,
    `Who are those horrible orange men?`
  ]
}

To display that content, inside <main>, let's replace the content with:

<main>
  <h1>{ content.header }</h1>
  <p>{ content.intro }</p>
  <ul>
    { content.list.map((item, i) => {
      return (
        <li key={i}>{ item }</li>
      )
    })}
  </ul>
</main>

And for the styles, you can copy and paste everything from our Part 1 main.css file into the <style> tags at the bottom of our index page. That will leave us with:

Basic content with Next.js

With that, we should be back to a similar point we finished at in Part 1 except we're not actively using any of the loading animations yet.

Follow along with the commit!

Step 2: Faking loading data from an API

The example we're working with is pretty simple. You'd probably see this coming pre-generated statically, but this helps us create a realistic demo that we can test our loading animation with.

To fake our loading state, we're going to use React's useState, useEffect, and an old fashioned setTimeout to preload some "loading" content, and after the setTimeout finishes, update that content with our actual data. In the meantime, we'll know that we're in a loading state with a separate instance of useState.

First, we need to import our dependencies. At the top of our pages/index.js file, add:

import { useState, useEffect } from 'react';

Above our content object, let's add some state:

const [loadingState, updateLoadingState] = useState(true);
const [contentState, updateContentState] = useState({})

And in our content, we can update the instances to use that state:

<h1>{ contentState.header }</h1>
<p>{ contentState.intro }</p>
<ul>
  { contentState.list.map((item, i) => {
    return (
      <li key={i}>{ item }</li>
    )
  })}
</ul>

Once you save and load that, you'll first notice we get an error because our list property doesn't exist on our contentState, so we can first fix that:

{ Array.isArray(contentState.list) && contentState.list.map((item, i) => {
  return (
    <li key={i}>{ item }</li>
  )
})}

And after that's ready, let's add our setTimeout inside of a useEffect hook to simulate our data loading. Add this under our content object:

useEffect(() => {
  setTimeout(() => {
    updateContentState(content);
    updateLoadingState(false)
  }, 2000);
}, [])

Once you save and open up your browser, you'll notice that for 2 seconds you don't have any content and then it loads in, basically simulating loading that data asynchronously.

Follow along with the commit!

Step 3: Adding our loading animation

Now we can finally add our loading animation. So to do this, we're going to use our loading state we set up using useState and if the content is loading, add our .loading class to our elements.

Before we do that, instead of individually adding this class to each item in the DOM, it might make more sense to do so using CSS and adding the class to the parent, so let's do that first.

First, update the .loading class to target our elements:

.loading h1,
.loading p,
.loading li {
  color: transparent;
  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

Then we can dynamically add our class to our <main> tag:

<main className={loadingState ? 'loading' : ''}>

Note: if you use Sass, you can manage your loading styles by extending the .loading class in the instances you want to use it or create a placeholder and extend that!

And if you refresh the page, you'll notice it's still just a blank page for 2 seconds!

The issue, is when we load our content, nothing exists inside of our tags that can that would allow the line-height of the elements to give it a height.

No height when there's no content

But we can fix that! Because our .loading class sets our text to transparent, we can simply add the word Loading for each piece of content:

const [contentState, updateContentState] = useState({
  header: 'Loading',
  intro: 'Loading',
  list: [
    'Loading',
    'Loading',
    'Loading'
  ]
})

Note: We can't use an empty space here because that alone won't provide us with a height when rendered in the DOM.

And once you save and reload the page, our first 2 seconds will have a loading state that reflects our content!

HTML & CSS loading animation

Follow along with the commit!

Some additional thoughts

This technique can be used pretty broadly. Being a CSS class makes it nice and easy to add where every you want.

If you're not a fan of setting the Loading text for the loading state, another option is to set a fixed height. The only issue with that is it requires more maintenance for tweaking the CSS to match what the content loading in will look like.

Additionally, this won't be perfect. More often than not, you won't know exactly how much copy you have on a page. The goal is to simulate and hint that there will be content and that it's currently loading.

What's your favorite loading animation?

Let me know on Twitter!

Join in on the conversation!

  .rounded-corners {
    border-radius: 20px;
  }

  .circle {
    border-radius: 50%;
  }

Note: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

If just one value provided, the border-radius will be the same for all four corners, as in the examples above. But you also have the option to specify different values for each corner.

.new-shape {
  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
}

If only two values are provided, the first value applies to the top-left and bottom-right corner, and the second value applies to the top-right and bottom-left corner.

.leaf-shape {
  border-radius: 0 50%;
}

If three values are set, the first again applies to the top-left radius, the second value indicates top-right and bottom-left, leaving the third value to indicate the bottom-right corner.

.odd-shape {
  border-radius: 0 20px 50%;
}

The rounding of a corner does not have to be perfectly symmetrical. You may specify both the horizontal and vertical radiuses using a slash (”/”) to achieve a corner with an elliptical shape.

.elliptical-1 {
  border-radius: 50px/10px; /* horizontal radius / vertical radius */
}
.elliptical-2 {
  border-radius: 10px/50px; 
}

Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.

.elliptical-3 {
  border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */
}

Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.

.elliptical-4 {
  border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */
  border-top-right-radius: 20px 50px;
  border-bottom-right-radius: 50px 20px;
  border-bottom-left-radius: 20px 50px;
}

More info on CSS border radius property:

• Learn to use the CSS border radius property by building a calculator

With overflow, you can control whether to clip content or add scrollbars when an element’s content is too big to fit in a specified area.

Values

• visible: This is the default value of the property. No content is clipped when it's bigger than its set dimensions.
• hidden: Content that overflows is hidden.
• scroll: Content is hidden, but users can still scroll through and view the hidden content.
• auto: If content is bigger than its set dimensions, content will be hidden automatically and a scrollbar will appear.
• initial: Uses the default value for this property, visible.
• inherit: Uses the overflow value of the parent element.

Examples

Here is the HTML and CSS we'll use for all the following examples:

<div class="box-element">
  <p>
    Who's the baby cats are fats i like to pets them they like to meow back. Attack the dog then pretend like nothing happened kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff, see owner, run in terror. Rub face on everything cats are the world. Meow meow, i tell my human i rule on my back you rub my tummy i bite you hard the best thing in the universe is a cardboard box if it smells like fish eat as much as you wish and carefully drink from water glass and then spill it everywhere and proceed to lick the puddle. Paw at beetle and eat it before it gets away rub butt on table for chew foot, or love you, then bite you and pounce on unsuspecting person. What a cat-ass-trophy! cat slap dog in face let me in let me out let me in let me out let me in let me out who broke this door anyway for prance along on top of the garden fence, annoy the neighbor's dog and make it bark and chew iPad power cord purr.
  <p>
</div>

.box-element {
  width: 400px;
  height: 200px;
  border: dashed;
}

.box-element {
  /* overflow will be set here */
}

Visible:

.box-element {
  overflow: visible;
}

Hidden:

.box-element { 
  overflow: hidden; 
}

Scroll:

.box-element { 
  overflow: scroll; 
}

Auto:

.box-element { 
  overflow: auto; 
}

overflow-x and overflow-y

• overflow-x: Allows the user to scroll through the content that extends beyond the height of the box element.
• overflow-y: Allows the user to scroll through the content that extends beyond the width of the box.

.box-element {
  overflow-x: scroll;
  overflow-y: auto;
}

And the .box-element will look like this:

If the content overflows the Y-axis, then that content will be hidden, whilst a scrollbar should be visible for users to read the rest of the content.

A linear gradient with two color stops

Syntax

To create a linear gradient you must define at least two color stops. They are the colors the transitions are created among. It is declared on either the background or background-image properties.

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

If no direction is specified, the default transition is top to bottom.

Examples

Top to bottom:

background: linear-gradient(red, yellow);

Left To right:

To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word to which indicates the direction:

background: linear-gradient(to right, red , yellow);

Diagonal gradients:

You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right.

Here’s a sample for a gradient starting from the top-left:

 background: linear-gradient(to bottom right, red, yellow);

Using angles to specify the direction of the gradient

You can also use angles, to be more accurate in specifying the direction of the gradient:

background: linear-gradient(angle, colour-stop1, colour-stop2);

The angle is specified as an angle between a horizontal line and the gradient line.

background: linear-gradient(90deg, red, yellow);

Using more than two colors

You’re not limited to just two colors – you can use as many comma separated colors as you want.

background: linear-gradient(red, yellow, green);

You can also use other color syntaxes like RGB or hex codes to specify the colors.

Hard color stops

You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly:

background: linear-gradient(to right,red 15%, yellow 15%);

More information:

• The CSS Handbook: a handy guide to CSS for developers

Both single and multi-line comments in CSS begin with /* and end with */, and you can add as many comments to your stylesheet as you like. For example:

/* This is a single line comment*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
  This is
  a multi-line
  comment
*/

You can also make your comments more readable by stylizing them:

/*
***
* SECTION FOR H2 STYLE 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
*/

Organizing CSS with comments

In larger projects, CSS files can quickly grow in size and become difficult to maintain. It can be helpful to organize your CSS into distinct sections with a table of contents to make it easier to find certain rules in the future:

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Sliders
*    6.2 - Imagery
*  7.0 - Footer
*/

/*** 1.0 - Reset ***/

/*** 2.0 - Fonts ***/

/*** 3.0 - Globals ***/

/*** 4.0 - Color Palette ***/

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
h2 {
  font-size: 1.2em;
  font-family: "Ubuntu", serif;
  text-transform: uppercase;
}

/*** 5.1 - Sliders ***/

/*** 5.2 - Imagery ***/

/*** 7.0 - Footer ***/

A little bit more about CSS: CSS Syntax and Selectors

When we talk about the syntax of CSS, we’re talking about how things are laid out. There are rules about what goes where, both so you can write CSS consistently and a program (like a browser) can interpret it and apply it to the page correctly.

There are two main ways to write CSS.

Inline CSS

Specifics on CSS Specificity: CSS Tricks

Inline CSS applies styling to a single element and its children, until another style overriding the first is encountered.

To apply inline CSS, add the “style” attribute to an HTML element that you’d like to modify. Inside quotes, include a semicolon-delimited list of key/value pairs (each in turn separated by a colon) indicating styles to set.

Here’s an example of inline CSS. The words “One” and “Two” will have a background color of yellow and text color of red. The word “Three” has a new style that overrides the first, and will have a background color of green and text color of cyan. In the example, we’re applying styles to <div> tags, but you can apply a style to any HTML element.

<div style="color:red; background:yellow">
  One
  <div>
    Two
  </div>
  <div style="color:cyan; background:green">
    Three
  </div>
</div>

Internal CSS

While writing an inline style is a quick way to change a single element, there’s a more efficient way to apply the same style to many elements of the page at once.

The internal CSS has its styles specified in the <style> tag, and it is embedded in the <head> tag.

Here’s an example that has a similar effect as the “inline” example above, except the CSS has been extracted to its own area. The words “One” and “Two” will match the div selector and be red text on a yellow background. The words “Three” and “Four” will match the div selector too, but they also match the .nested_div selector which applies to any HTML element that references that class. This more specific selector overrides the first, and they end up appearing as cyan text on a green background.

<style type="text/css">
  div { color: red; background: yellow; }
  .nested_div { color: cyan; background: green; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div class="nested_div">
    Three
  </div>
  <div class="nested_div">
    Four
  </div>
</div>

The selectors shown above are extremely simple, but they can get quite complex. For example, it’s possible to apply styles only to nested elements; that is, an element that’s a child of another element.

Here’s an example where we’re specifying a style that should only be applied to div elements that are a direct child of other div elements. The result is that “Two” and “Three” will appear as red text on a yellow background, but “One” and “Four” will remain unaffected (and most likely black text on a white background).

<style type="text/css">
  div > div { color: red; background: yellow; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div>
    Three
  </div>
</div>
<div>
  Four
</div>

External CSS

All the styling has its own document which is linked in the <head> tag. The extension of the linked file is .css

CSS3 Text Shadow

The text-shadow property can take up to four values:

• the horizontal shadow
• the vertical shadow
• the blur effect
• the color

Examples:

Normal text shadow

h1 {
text-shadow: 2px 2px 5px crimson;
}

Glowing text effect

h1 {
text-shadow: 0 0 4px #00FF9C;
}

Multiple Shadows

To achieve this, you simply add a comma between two (or more) sets of values:

h1 {
    color: white;
    text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
}

CSS3 Box Shadow

The box-shadow property can take up to six values:

• (optional) the inset keyword (changes the shadow to one inside the frame)
• the horizontal shadow
• the vertical shadow
• the blur effect
• the spreading
• the color

Examples:

.first-div {
    box-shadow: 1px 1px 5px 3px grey;
}

.second-div {
    box-shadow: 0 0 5px 1px lightgrey;
}

.third-div {
    box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75);
}

More Information:

• MDN web docs
• Check for browser support
• CSS box-shadow generator (feel free to experiment with box-shadows)

CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.

CSS allows for developers to control how web pages look by “styling” the HTML structure of that page.

CSS specifications are maintained by the World Wide Web Consortium (W3C).

You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript).

A good start is the freeCodeCamp curriculum Introduction to Basic CSS.

Another suggestion for beginners is W3C’s Starting with HTML + CSS which teaches how to create a style sheet.

The site CSS Zen Garden is a great example how the same html can be styled to look totally unique.

For a demonstration of the power of CSS, check out Species In Pieces.

Tutorials for starting with CSS and CSS3

The best place to start learning CSS is with freeCodeCamp's 2-hour intro to CSS tutorial.

Then, if you're feeling more adventurous, we have an entire 12-hour course that covers HTML, HTML5, and CSS in detail.

Flexbox

Flexbox is a new way to structure content in CSS3. It provides a wonderful way to create responsive websites that work well across different screen sizes and order content.

There are 3 simple steps to use Flexbox:

1. Convert the parent container to a flex container by using display: flex;
2. Adjust the layout of different containers by using flex-direction
3. Adjust the layout of items within a container by using properties like justify-content, align-items, and so on

Flexbox allows you to efficiently lay out, align, and adjust the space among different page elements, even if you don't know their exact size. Instead, items and containers are dynamic, and will "flex" to best fill the available space.

• main-axis: The primary axis of a flex container along which flex items are laid out. Keep in mind that this can be horizontal or vertical depending on the flex-direction property.
• main-start | main-end: Flex items are placed in a container from main-start to main-end.
• main size: A flex item's main dimension, which can be its width or height, acts as the item's main size.
• cross axis: The axis that is perpendicular to the main axis. The direction of the cross axis depends on the main axis's direction.
• cross-start | cross-end: Flex lines and items are placed in a flex container starting from the cross-start to the cross-end side.
• cross size: The item's cross dimension (width or height) acts as the item's cross size.

Grid Layout

CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is supported by all major browsers and provides a way to position items on the page and move them around.

It can automatically assign items to areas, size and resize them, take care of creating columns and rows based on a pattern you define, and it does all the calculations using the newly introduced fr unit.

Why Grid?

• You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)
• Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - and not both at the same time - Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.
• With CSS Grid, you can change the order of HTML elements using only CSS. Move something from top to the right, move elements that were in the footer to the sidebar etc. Instead of moving the <div>from <footer> to <aside> in the HTML, you can just change its placement with grid-area in the CSS stylesheet.

Grid vs. Flex

• Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
• In Grid, we apply layout styles to the parent container and not the items. Flex, on the other hand, targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink
• Grid and Flex are not mutually exclusive. You can use both on the same project.

Checking browser compatibility with @supports

Ideally, when you build a site, you’d design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the @support CSS rule (aka feature query). Here’s an example:

.container {
  display: grid; /* display grid by default */
}

@supports not (display: grid) { /* if grid is not supported by the browser */
  .container {
    display: flex; /* display flex instead of grid */
  }
}

Getting Started

To make any element a grid, you need to assign its display property to grid, like so:

.conatiner {
  display: grid;
}

And that’s it. You just made your .container a grid. Every element inside the .container automatically becomes a grid item.

Defining templates

Rows and columns

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Areas

grid-template-areas: 
  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";

or

grid-template-areas:
  "header header header header"
  "nav main main sidebar";

Grid Areas

Here’s some sample code on how to define and assign grid areas:

.site {
  display: grid;
  grid-template-areas: /* applied to grid container */
    "head head" /* you're assigning cells to areas by giving the cells an area name */
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
    "nav  foot";
}

.site > header {
  grid-area: head;
}

.site > nav {
  grid-area: nav;
}

.site > main {
    grid-area: main;
}

.site > footer {
    grid-area: foot;
}

The fr unit

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly. Plus there will be no bleeding gaps at the end either.

Examples

Changing the order of elements based on screen size

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "main header"
    "main sidebar"
}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
  .site {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer"
  }
}

More Information:

• CSS Grid Palyground by Mozilla: Great starting point if you’re new to CSS Grids. It has visuals to help you understand the terminology easily
• YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): This presentation will convince you in less than an hour why CSS Grids are cool and why/how you should use them.
• Videos: Learn Grid Layout Video Series by Rachel Andrew: Rachel Andrew is an expert on the subject. The video titles may look strange and overwhelming, but the content is short and to the point
• Book: Get Ready for CSS Grid Layout by Rachel Andrew

Selectors

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

Selector Syntax

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

/* selects anchor tags */
a { 
    color: orange;
}

/* selects elements with hero class */
.hero {
    text-align: center;
}

Type of Selectors

• TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
• Universal Selectors apply to all elements.
• div * matches all elements within div elements.
• Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
• h1[title] selects h1 elements with title attribute.
• Class Selectors are Selectors that target elements using their class names.
• ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
• Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

• Official CSS3 Selectors specification
• Selectors page on Mozilla Developer Network
• CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

    p {
      color: blue;
    }
    p .red {
       color: red;
    }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

• Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
• Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
• Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

    .none             {display: none}
    .block            {display: block}
    .inline-block     {display: inline-block}
    .inline           {display: inline}
    .flex             {display: flex}
    .inline-flex      {display: inline-flex}
    .inline-table     {display: inline-table}
    .table            {display: table}
    .inherit          {display: inherit}
    .initial          {display: initial}

The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist.

This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.

These keyword values are grouped into six categories:

• <display-inside>
• <display-outside>
• <display-listitem>
• <display-box>
• <display-internal>
• <display-legacy>

The background property lets you use images and colors to create backgrounds for your web pages.

Background Color Example

The background color property allows you to choose the color of your element. This can be the background for the entire page or the background of one section of your page.

• An element is a piece of HTML such as a header or paragraph on a web page.

Here is an example of setting the background color for a web page to green.

  body {
    background-color: green;
  }

Here is an example of setting the colors for two elements. This will set the background of the header to purple and the rest of the page to blue.

  body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }

In CSS, color can be defined in three ways:

• A valid color name such as blue
• A HEX value such as #FFFFF (This is the hex value for white.)
• An RGB value such as rgb(76,175,80) (This is the RGB value for light green.)

Background Images

You can use the background image property to set an image as a background for an element. The image is repeated by default so that it covers the entire element.

body {
  background-image: url("barn.jpg");
}

You can also link pictures or gifs that you find online by using their link (for example, from a Google Images search).

body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}

Background Image - The Repeat Property

The background image is repeated both vertically (up and down) and horizontally (across the web page) by default. You can use the background-repeat property to repeat the image vertically or horizontally.

Here is an example that repeats the image vertically:

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-y;
}

You can repeat the image horizontally by setting the background-repeat property to “repeat-x”.

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-x;
}

You can also use the background-repeat property to set an image to not repeat.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
}

Background Image – The Position Property

You can use the position property to specify where your image will be located on a web page.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

Background Image – The Fixed Position

You can use the background-attachment property to set an image to a fixed position. A fixed position makes it so an image does not scroll with the rest of the page.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Background Gradients

A gradient is a transition between two or more colors and can be used via CSS similar to a background image.

The syntax of a gradient background can be quite complex and is often still used with vendor prefixes due to inconsistencies between supported browsers.

The Colorzilla Gradient Editor is a great online tool for generating custom gradients and the associated CSS markup.

Background – The Shorthand Property

You can write the background properties on a single line. This is called the shorthand property.

body {
  background: url("barn.jpg") no-repeat right top;
}

You can leave out properties you don’t need when using the shorthand property, but the properties must be used in a certain order. The order is:

• color
• image
• repeat
• attachment
• position

Multiple Background Images

You can specify multiple background images in a single background property.

body {
  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}

The first image (or gradient) specified is the uppermost, the second comes after, and so on. If one of the elements is not correct due to its URL or its syntax, the whole line will be ignored by the browser.

Some Basic Background Properties of CSS

The CSS background properties are used to define the background effects for elements.

CSS background properties: background-color, background-image, background-repeat, background-attachment, background-position

CSS Breakpoint Example

A CSS Breakpoint is a specific point in which a website’s layout changes, based on a Media Query becoming active.

Generally, you specify a breakpoint when you want to re-adapt the website’s layout to the browser viewport’s size; mostly, to the viewport’s width.

For example, if your website content looks great on a narrow viewport (like on a smart-phone browser), but it starts to look bad on bigger screens (e.g. maybe the fonts’ size are too small and difficult to read), then you might want to introduce a new breakpoint for bigger screens that makes the fonts bigger:

CSS Breakpoints can be considered to be the heart of responsive web design, because they define how the content behaves or is arranged at a different device width/scale. This allows you to show the best possible layout to the user.

Setting Break Points

Breakpoints are broadly set on the basis of either of the following:

• Breakpoints based on device width
• Breakpoints based on content

Breakpoints based on device width

It’s quite apparent that all of our devices don't have same screen widths/sizes. It is now a design decision to include a set of particular devices and code the CSS rules accordingly.

We already have enough devices to worry about, and when a new one comes out with a different width, going back to your CSS and adding a new breakpoint all over again is time-consuming.

Here’s an example:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Google Pixel ----------- */

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

With this approach, you will end up having a huge list of media queries.

Breakpoints based on Content

This is the preferred choice while making or writing the breakpoint rules. Because it is easier to adjust your content according a particular layout only when it requires a change.

@media only screen (min-width: 768px){
...
}

This breakpoint means the CSS will apply when the device width is 768px and above.

You can also set a range with breakpoints, so the CSS will only apply within those limits.

@media only screen and (min-width: 768px) and (max-width: 959px){

...

}

Note Always try to create breakpoints based on your own content, not devices. Break them to a logical width rather than a random width and keep them to a manageable number, so modifying remains simple and clear.

CSS breakpoints are useful when you want to update styles based on the screen size. For example, from a device measuring 1200px width and above, use the font-size: 20px;, or else use the font-size: 16px;.

What we have started with is from devices greater than 1200px, a common laptop screen’s width. You may also have noticed that we mentioned ‘greater than’, meaning that we are in a way using something like an ’if-then’ statement.

Let’s turn it into CSS code:

.text1 {
    font-size: 16px;
}
@media (min-width: 1200px) {
    .text1 {
        font-size: 20px;
    }
}

For our convenience, we write down the .text1 basic styling first… then afterwards we will specify the @media rules.

Tip: you may see on a common CSS Framework called ‘Bootstrap’, that they have adopted ‘min-width’ and up in their Bootstrap v4.0, as compared to their old Bootstrap v3.0 using ‘max-width’ and down. This is only a preference, and there is nothing wrong with saying ’this size and less than’ versus ’this size and greater than’.

It is perfectly fine to use @media (max-width) {} . Here is an example:

.text1 {
    font-size: 20px;
}
@media (max-width: 1199px) {
    font-size: 16px;
}

// Normal, basic styles
// that look great on small screens
// but not on bigger screens
body {
  font-size: 16px;
}

// Define a new breakpoint, with a media query.
// In this case, for when the viewport's width
// is at least 512px wide.
@media (min-width: 512px) {
    body {
        font-size: 20px;
    }
}

Breakpoints that are based on content as opposed to device are less complicated. Here’s a simple snippet that triggers when the device’s width is upward of code 700px, roughly smart-phone screen sized

@media only screen and (min-width: 700px) {
  something {
    something: something;
  }
}

You can also set a minimum and maximum width, which lets you experiment with different ranges. This one roughly triggers between smart-phone and larger desktop and monitor sizes:

@media only screen and (min-width: 700px) and (max-width: 1500px) {
  something {
    something: something;
  }
}

CSS Color Example

Colors

CSS Colors is a CSS module that deals with colors, color types, color blending, and opacity. Not all CSS properties that take a as a value are part of this module, but they do depend upon it.

In CSS, you can change the color of almost any element in your HTML page. Properties like background-color, color, and border-color set the color of those elements.

CSS supports color names, hexadecimal, and RGB colors. In addition to the introduction of the opacity declaration, colors in CSS3 can now be specified using color names, or RGB, HEX, HSL, RGBA, HSLA values.

HTML supports 140 standard color names.

RGB(A)

RGB stands for “Red, Green, Blue”. An RGB value is a combination of intensity values for red, green, and blue. Each is between 0 (black) and 255 (full intensity). RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

An RGB color value is specified with: rgb(red, green, blue). An RGBA color value is similar, with the alpha value in last position: rgba(red, green, blue, alpha).

HSL(A)

HSL stands for “Hue, Saturation and Lightness”. Hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value: 100% is the full color. Lightness is also a percentage; 0% is dark (black) and 100% is white.

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

An HSL color value is specified with: hsl(hue, saturation, lightness). An HSLA color value is similar, with the alpha value in last position: hsla(hue, saturation, lightness, alpha).

CMYK

CMYK colors are a combination of CYAN, MAGENTA, YELLOW , and BLACK. Computer screens display colors using RGB color values. Printers often present colors using CMYK color values. CMYK is not supported in HTML, but it is suggested as a new standard in CSS4.

Example colors: CMYK Red: cmyk(0%, 100%, 100%, 0%), CMYK Green: cmyk(100%, 0%, 100%, 0%), or CMYK Blue: cmyk(100%, 100%, 0%, 0%).

Hexcodes

Hexcode, short for hexadecimal code, is a way to express a color value to your computer. It is named this way because 16 unique symbols can be used as values. In this case, the numbers 0 to 9 and letters a to f are used.

Hex codes are expressed in this format: #000000, which would be the color black in this instance. Six characters are used in each hexcode, using any of the 16 characters mentioned previously. These six characters are divided into three pairs of two.

These three pairs each express a value for the amount of red, green and blue in a particular color. Taking the hexcode color #AA11BB, AA is the amount of red, 11 the amount of green, and BB the amount of blue. 0 is the lowest value of a color while f is the highest value.

Hex codes are case insensitive, meaning that #FFFFFF and #ffffff would be the same color: white.

Additionally, there are 16,777,216 possible color combinations using hexcode.

Opacity

The CSS3 opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). Unlike alpha values specified with rgba and hsla, opacity is inherited by child elements.

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Examples

<html>
  <body>
    <p>Hello Moto</p>
  </body>
</html>

body {
  background-color: green;
  color: white;
}

In the above example, the background-color: green turns the <body> element green. This turns the whole web page green. The <p> elements are all white after color: white too. You can use named colors, like green, blue, yellow, red, purple, and many others. But for custom colors, you can use hex codes (#147ACC), RGB values (rgb(20, 122, 204)), and even HSL values (hsl(145, 59%, 30%)).

p {
  color: rgba(244, 145, 14, 0.80); // bright orange
}

h2 {
 color: #FA8072; //salmon 
}

You can also add an alpha value, or transparency to colors. Transparency allows text to be overlaid on an image and still have the image partially viewable through the text, or can be used to change the shade of the colour if no other elements are in front or behind the text. Use rgba() or hsla() and fill in your color values. The alpha value goes last and is a percent converted to a decimal. (For example, 20% is 0.2, 75% is 0.75, etc.)

body {
  background-color: hsl(184, 87%, 94%); // bright blue
}

Above shows paragraphs styled bright orange and 20% transparent, h2 elements a salmon pink, and the body’s background bright blue.

To get custom colors to use in CSS, you might find a color picker helpful. Some text editors have built-in color pickers, like Visual Studio Code. If you search “color picker” on Google or DuckDuckGo, you will get a color picker that you can use. Google Chrome and Firefox also have color picker add-ons that you can install. Adobe Color CC not only helps you pick a color, but will also help you pick out a color scheme for your web page!

It’s a good idea to check that you have enough contrast between your text and background colors by using a tool like WebAIM’s Color Contrast Checker.

Colors in CSS Example

Colors in CSS are used to colorize elements in our web-pages. There are many ways to assign colors to elements. You can use the actual names for the colors, their RGB values or the Hexadecimal values. In CSS3 the hsl (hue-saturation-lightness) has been added to the specification.

Color Names

Currently there are 140 color names supported in HTML, which can be assigned in CSS rules by just typing their name. For example:

Syntax

p {
  color: green;
}

This rule changes all the font color for all

elements to green.
For the full 140 color list see here: https://www.w3schools.com/colors/colors_names.asp

RGB values

RGB stands for “Red”, “Green” and “Blue” and we can also assign colors by typing their RGB values in our rules. An RGB value would look like this: rgb(255,0,0), where each number defines how much of each color will be in the final mix.

The values range from 0 to 255, and in our example we see that only the first value is 255 while the other two are set to 0. That means that there is only red in our value and the respective element will be colored red. An RGB value of (0, 0, 0) would give black and a value of (255, 255, 255) would give white.

It is impossible to try to memorize each color code, and for that reason there are numerous tools online for picking the colors you want for your projects. For example: https://www.w3schools.com/colors/colors_picker.asp or http://htmlcolorcodes.com/color-picker/.

p {
  color: rgb(0, 255, 0);
}

This rule changes the font color of all p elements to green, just like above.

Hexadecimal Values

Hexadecimal values are yet another way to define colors in CSS and they work quite similarly to RGB values.

A random hex code would like this: #29432b, where the first two characters after the hash stand for the amount of RED in the mix, the second two stand for the amount of Green, and the last two stand for the amount of Blue.

The values of #000000 and #ffffff stand for black and white respectively.
You can find the specific Hexadecimal colors you require by using the same tools mentioned for the RGB values.

Syntax

p {
  color: #00fe00;
}

This rule again changes the font color of all p elements to green.

HSL

HSL has three values. The first one is Hue, which is measured in degrees. So 0 (or 360) represents the color red, at 120 it is green, and 240 is blue.

The second one is Saturation which has a percentage value with a range from 0 to 100%.

And the third one is Lightness which also has a percentage value with a range from 0 to 100%. 0% is dark black, 50% average, 100% is white.

Syntax

p {
  color: hsl(0, 100%, 50%);
}

Output

JSfiddle

Why use RGB or HEX values?

Color names take only 140 values, while RGB and HEX values have 16,777,216 possible combinations. So if you want your projects to look exactly how you have envisioned them, you should use the two latter options and keep the color names' values for mock-ups and testing purposes.

The currentColor Keyword

The currentColor keyword, as the name suggests, is a valid color value in CSS. This represents the value of the specific element’s color property. This lets you use the color property’s value for properties that do not receive it by default.

For example, if we declare each div to have a 3px border of color currentColor, which means that each div’s border will be colored with the same value of its color property:

div{
  /* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
  border: 3px solid currentColor;
}

/* This div will have green borders, because its color value is green. */
#div1{
  color: green;
}

/* This div will have blue borders, because its color value is blue. */
#div2{
  color: blue;
}

Practical Application with an SVG

Here’s a very common example on the web – a button with an SVG icon and text in it. The color of the border, text and icons change on hovering over the button. The below image depicts the initial and the hovered states of the button in order.

Icon fonts could also be used for this purpose, but there are various advantages of inline SVG over icon fonts, and this may make SVGs the choice for many developers. Quoting CSS-Tricks,

It can be frustrating to position a font icon. The icons are inserted via pseudo element, and it depends on line-height, vertical-align, letter-spacing, word-spacing, how the font glyph is designed (does it naturally have space around it? does it have kerning information?). Then the pseudo elements display type affects if those properties have an effect or not. SVG just is the size that it is.

To sum it up, it can at times be frustrating to use font icons with text.

We could use this code of ours to achieve the desired behavior:

button {
  color: #016898;
}

.emailIcon {
  fill: #016898;
}

button:hover {
  color: #19B5FE;
}

button:hover .emailIcon {
  fill: #19B5FE;
}

Now, instead of changing the SVG’s fill color on hover explicitly, we can set the fill to currentColor. This automatically changes the color of the SVG to the value of the color property of the button. We now just need to change the color property of the button. This makes the CSS code shorter and smarter:

.emailIcon {
  fill: currentColor;
}

button {
  color: #016898;
}

button:hover {
  color: #19B5FE;
}

Check out the live example at https://repl.it/NNt9/2.

CSS3 Media Queries Example

Media Queries allow you to have different styles for different devices/screen sizes. Their introduction in CSS3 has greatly eased the building of responsive webpages.

The best approach when designing a responsive website is to think mobile first; meaning that you create your page starting with the design and content of the mobile version.

You may think that with some scalable sizes ( %, vw or vh ), your page will adapt perfectly to any device. But it will not. Maybe for some very basic design, but certainly not for more common or complex pages!

When designing your page for smaller devices, you will focus on the main content. On a bigger screen, you will have to readapt some font-sizes, margins, paddings and so on in order to keep your site comfortable and readable. But you will also want/need to add more content, the bits you did not judge fundamental, and fill in the space created by the screen size.

The thought process should be:

1. Which content to show?
2. How to layout?
3. Size?

The basic syntax

    @media only screen and (min-width: 768px) {
      p {padding: 30px;}
    }

The p tag will have a padding of 30px as soon as the screen reaches min 768px width.

The AND syntax

  @media only screen and (min-height: 768px) and (orientation: landscape) {
    p {padding: 30px;}
  }

The p tag will have a padding of 30px as soon as the screen reaches min 768px height and its orientation is landscape.

The OR syntax

    @media only screen and (min-width: 768px), (min-resolution: 150dpi) {
      p {padding: 30px;}
    }

The p tag will have a padding of 30px as soon as the screen reaches min 768px width or its resolution reaches min 150dpi.

CSS Fonts Example

The different CSS font properties define the size, weight, style, line height, and font family / typeface of text on the page.

Font family

The font family or typeface of text is set by using the font-family property.

This property works will a fallback system – if your browser doesn't support the first font, it will try each of the following fonts until it finds one that it supports. If the name of the font is longer than one word, it must be surrounded by quotes. For example:

p {
    font-family: "Times New Roman", Times, serif;   
}

Times New Roman is made up of three words and must be surrounded by quotes. Meanwhile, serif is just one word, so it doesn't need quotation marks.

The last item in the list should always be a generic font family name such as serif, sans-serif, monospace, cursive, fantasy, system-ui.

Font style

The font-style property can be used to make text italic or oblique.

There are three possible values for this property:

• normal - Text is shown normally
• italic - Text is shown in italic
• oblique - Text is shown leaning

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

Font size

Use the font-size property to adjust the size of the text. The default size of text is 16px in most browsers.

Here are the most commonly used font size values:

• px (pixels)
• em - 1em – the font size of the parent
• rem – the font size of the root element
• % - percentages

.with-pixels {
    font-size: 14px;
}

.with-ems {
    font-size: 0.875em;
}

.with-absolute {
    font-size: large;
}

.with-percentage {
    font-size: 80%;
}

Font weight

The font-weight property adjusts the weight of text. This property accepts keyword values like bold or normal, and numeric keyword values such as 400 and 700.

Here are some common keyword and numeric keyword values:

The default font weight is 400 or normal.

p {
   font-weight: bold
}

Note: Not all keyword or numeric keyword values are available for every font family. For example, if you are loading a font family from Google Fonts, you need to select all the font weights you want to use.

CSS Text Align Example

This CSS property describes the horizontal alignment of inline content in its parent block element. text-align does not control the alignment of block elements, it affects only their inline content.

Values:

The text-align property is specified as a single keyword chosen from the list of values below:

text-align: left; aligns the text to the left

text-align: right; aligns the text to the right

text-align: center; aligns the text to the center

text-align: justify; makes the lines the same width

text-align: justify-all; makes the lines the same width, including the last one

text-align: start; aligns the last line at the beginning of the line

text-align: end; aligns the last line at the end of the line

text-align: match-parent; calculates the value's start and end to the parent’s direction and replaced by the appropriate left or right value.

Block Alignment Values (non-standard syntax):

text-align: -moz-center;

text-align: -webkit-center;

Global Values:

text-align: inherit; inherits from its parent element

text-align: initial; default value

text-align: unset; applies either the inherit or the initial value, depending on the default properties of the element

CSS Box Model Example

Understanding the CSS Box Model is crucial to being able to correctly layout a web page.

When a browser renders (draws) a web page each element, for example, a piece of text or an image is drawn as a rectangular box following the rules of the CSS Box Model.

At the center of the box is the content itself, which takes up a certain height and width. This region is known as the Content Area. The size of the content area can be automatically determined, or you can explicitly set the size of height and width (see note below regarding box-sizing).

Around the Content Area, this is a region known as Padding Area. The size of the padding can be the same all around (set with padding), or you can set individually for the top, right, bottom and left paddings (with padding-top, padding-right, padding-bottom and padding-left).

Next, there is a Border Area. This creates a border around the element and its padding. You can set thickness (border-width), color (border-color), and style (border-style) of the border. Style options include none (no border), solid, dashed, dotted and several others.

Additionally, you can set the borders on the 4 sides individually; for example, the top border with border-top-width, border-top-color and border-top-style for its thickness, color and style. (See note below regarding box-sizing.)

Finally, there is the Margin Area. This creates clear space around the element, padding, and border. Again you can individually set the top, right, bottom and left margins (with margin-top, margin-right, margin-bottom and margin-left). Under certain circumstances, margin collapsing occurs and the margins between adjacent elements may be shared.

box-sizing Property: The default for this property is content-box. If you use the default, then the box model will allow the author to specify the size of the content area. However, it is possible to use these to instead specify the size of the border area. This is done by changing box-sizing property to border-box. This can sometimes make layouts easier. You can set the box-sizing property per element as desired.

CSS Cursors

The cursor property specifies the type of cursor to be displayed when you hover over an element. It has 36 possible values:

    .auto            { cursor: auto; }
    .default         { cursor: default; }
    .none            { cursor: none; }
    .context-menu    { cursor: context-menu; }
    .help            { cursor: help; }
    .pointer         { cursor: pointer; }
    .progress        { cursor: progress; }
    .wait            { cursor: wait; }
    .cell            { cursor: cell; }
    .crosshair       { cursor: crosshair; }
    .text            { cursor: text; }
    .vertical-text   { cursor: vertical-text; }
    .alias           { cursor: alias; }
    .copy            { cursor: copy; }
    .move            { cursor: move; }
    .no-drop         { cursor: no-drop; }
    .not-allowed     { cursor: not-allowed; }
    .all-scroll      { cursor: all-scroll; }
    .col-resize      { cursor: col-resize; }
    .row-resize      { cursor: row-resize; }
    .n-resize        { cursor: n-resize; }
    .e-resize        { cursor: e-resize; }
    .s-resize        { cursor: s-resize; }
    .w-resize        { cursor: w-resize; }
    .ns-resize       { cursor: ns-resize; }
    .ew-resize       { cursor: ew-resize; }
    .ne-resize       { cursor: ne-resize; }
    .nw-resize       { cursor: nw-resize; }
    .se-resize       { cursor: se-resize; }
    .sw-resize       { cursor: sw-resize; }
    .nesw-resize     { cursor: nesw-resize; }
    .nwse-resize     { cursor: nwse-resize; }

You can also set an image as the cursor.

.custom-cursor {
  cursor: url(cursor-image.png);
}

This free video course covers CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.

Here are some of the things you'll learn in this course:

• how to color text and elements,
• how to format sections on a website,
• how to change the style and size of text,
• how to use CSS to layout elements on a page,
• how to use CSS Grid,
• how to use CSS Flexbox,
• how to animate elements on a page,
• how to add transitions to animations,
• and more!

Watch the full 6-hour course below or on the freeCodeCamp.org YouTube channel.

In this information age, one obstacle in learning something new is not where to find the resources. It’s from where to start and make sense of all the resources available online these days. This holds especially true in web development when new tools are popping up overnight.

Back in 2015, since I first decided to learn web development, I have faced challenges of self-doubt and lack of motivation. But the one challenge which drained my energies was not knowing what path to follow.

Considering the initial challenges in this path I have written this piece for technology enthusiasts who want to get their hands dirty in web development. Especially WordPress development. All in the hope you are going to spend your time building something cool than getting into this never-ending vicious cycle of learning one tool to another.

Caution! A lot of learning in this path

I am a WordPress developer (although my impostor syndrome tells me otherwise). I can share my experience only related to WordPress. But before diving into details, let’s examine a Q/A session first.

Now, is the answer mean? Maybe. Is it true? Absolutely! WordPress and Web Development, in general, are as serious and demanding as any profession. So be ready for…

• Lifetime of Learning
• Pulling all-nighters occasionally

All right, have you read and understood the above points? Great. Now relax as it is not to discourage you or anything. It’s just how the life of a developer is as the ever-changing nature of this field requires.

The good news is there are not many web technologies you have to learn to master the craft of WordPress Development. That being said, give your time to this amazing piece of software, and WordPress will adore you in return.

WordPress will change your life if you let it — Chris Lema

It’s all inspiring and cute, right? It is one of the reasons Topher DeRosia (huge props) has provided the HeroPress platform for WordPressers (yes, this is what we proudly call ourselves). Here WordPressers share regularly their WordPress origin stories with the community. Rest assured while reading through the stories you are going to feel adrenaline rush through your body as many of you are going to find yourself related to those stories.

WordPress for Everyone!

WordPress is super easy to use. In fact, anyone without any technical knowledge, can set up and start using WordPress in no time. However, WordPress has a vast ecosystem. I, for one, would categorize WordPress development being carried out in two different domains. I’ll first list those domains below and then I will discuss each one separately.

• WordPress Site Customization
• WordPress Themes/Plugins Development

WordPress Site Customization

WordPress Site Customization is where all the buzz is about, as it amounts for most of the work done with respect to WordPress usage. Site Customization is that domain where no prior coding knowledge is required.

That is to say, a WordPress power user can easily perform tasks like Theme/Plugin setup and customization using page builders, site debugging, and site maintenance, etc. Moreover, Theme customization is all about customizing or modifying a pre-made theme as per the requirements of your client.

Considering that, and to give you a perspective about the process, you can watch the following short tutorial by Tyler Moore. In his tutorial, he builds a new website by customizing a pre-made theme using the Elementor page builder.

WordPress Themes/Plugins Development

It is where all the fun is for WordPress geeks. We can call it the actual WordPress development, as this domain is all about knowing and getting into the nitty-gritty technical details of programming. It can be as simple as using a few WordPress hooks to modify responses or as complex as building a full-fledge product on WordPress.

So, in case you want to start into this domain, you have to invest more time learning about web technologies involved in WordPress development. Considering that, the rest of this article will discuss all the technologies and a few tips and tricks to get you started in actual WordPress development.

Learning Path

To get started in your WordPress Development journey, these tools and technologies are what you are going to be working with.

1. Say hello and embrace g̵o̵o̵d̵ ̵o̵̵̵l̵̵̵’ HTML5 modules with Semantics and Accessibility concepts. HTML is what gives structure to the site contents.

2. This quote says it all:

You are the CSS to my HTML — Some Genius

CSS is how HTML is presented in the web browser. Make sure to learn SASS preprocessor as your savior in writing modular CSS once you get a grasp of the basics.

3. The organization behind WordPress has big plans for making JavaScript part of the WordPress Front-end. This officially came from the original author of WordPress.

Learn JavaScript, Deeply — Matt Mullenweg

Yes, I know that might be far-fetched for a newbie who is starting out to follow this advice, but keep an eye out for development in this area. Now, this doesn’t mean you have to master JavaScript to work with WordPress. Start with the basics including its hugely popular library jQuery.

4. Wouldn’t it be nice if you could get a 1000-step head-start with these three technologies to speed up your development process? Well, that is where front-end frameworks like Twitter Bootstrap come into play. Explore it and get amazed. Don’t confuse front-end frameworks with JavaScript frameworks. Front-end is used interchangeably with JavaScript libraries and frameworks, which is a whole different path.

5. PHP is the scripting language that powers WordPress. If you want to dive deep in WordPress, learn PHP head-first with its OOP concepts including MySQL as its back-end database.

6. In general, when people talk about WordPress Development, it usually means only two segments of WordPress.

7. WordPress Theme Development, which is developing a presentation (layout) of sites (hence the name “Theme”).

8. WordPress Plugin Development, which is to add functionality to WordPress sites

For a developer, it is of utmost importance to understand and be comfortable working with both these segments. And to add a tad bit more in your learning journey, get familiar with Internationalization and Localization. You also need to know WordPress Hooks and APIs to name a few.

While developing sites, most of your time is going to be spent in a local development environment and in a code editor. For the sake of complete information in this article, let me point you to an easy-to-setup yet powerful local development environment (Local by Flywheel) and lightning-fast code editor (Visual Studio Code by Microsoft). Yes, they are both free of cost like WordPress.

Workflow

As your workflow becomes more advanced and complex, it’s important for you to stay sane and keep enjoying life. In that case, you are going to need to streamline your workflow. Try task automation tools like Grunt/Gulp and use a version control system like git to keep you from making blunders.

Illustration of Learning Path Guide Published on GitHub

To make things more clear for you, I have published an illustration of the Learning Path as a step-by-step guide on GitHub which I have provided below.

Learn from it, give feedback, improve it to make it better for newbies, and by that means feel free to send PR requests.

Resources

In case you are still worried that you are going to need more than a bunch of motivational words to actually start doing meaningful work, maybe you need like a step by step guide — well, worry no more. Follow the WordPress WordPress Developer Handbook and WordPress Developer Codex like religion and consider yourself in safe hands.

Moreover, you can receive great help from the WordPress Support forum as well as digging your answers from the Q&A site Stack Overflow, which is immensely popular among the developer community.

Apart, from the official WordPress resources, support forum, and developer-centric Q&A sites. There are a plethora of sites like WPBeginner, made possible by the awesome WordPress community, offering WordPress centric free tutorials and guides.

CodexSpot is one such attempt by a bunch of WordPress geeks including yours truly to give back to the community. CodexSpot is an online platform, focused solely on providing web solutions. Our aim is to provide quality tutorials, DIY guides, and keep you up-to-date with web industry news and trend reports.

We are a huge supporter of free and open-source software initiative and don’t miss any opportunity to evangelize FOSS practices to promote this movement. Besides that, we also offer free web development generators and tools to speed up your development time.

Now, there is one other type of learning resource, which is premium courses. By comparison with free resources, the main benefit of premium ones is the timely support offered by the course instructors for their students. That is to say, the ability to get your queries answered by the very instructors from whom you are learning, hugely benefits you during your learning journey. Furthermore, they stay on top of the latest industry trends.

I have personally learned a great deal from the Lynda.com (now LinkedIn Learning) courses, highly recommended. I have also found Learn WordPress course by Chris Castiglione, a nice beginner-friendly course to start with. So, if you are looking for a premium course on WordPress, you will find any of these courses worth your buck.

At this point, you have the dedication and tons of resources readily available for you to learn everything about WordPress. However, it is equally important that you understand the job market and what the companies seek in candidates applying for the WordPress developer position.

Toptal, an exclusive network of the top freelancers in the world, has published a guide for hiring a “Great WordPress Developer” which you can read to better align yourself with the most in-demand WordPress skills.

Conclusion

Don’t try to learn everything at once. Start with the basics. Implement what you’ve learned and then build from there. Take note of these following two not hard-and-fast rules for guidance, as these rules will come in handy in your journey.

• Just in Time (JIT) learning is you learn the tool when you need it.
• 80/20 rule of learning is you give 20% of your time to learning and 80% of your time implementing what you have learned already.

Now repeat after me:

I learn.
I code!
I code again!!
I code some more!!!
I keep coding!!!!!

…and that is how you start in WordPress. Good Luck WordPresser and welcome to the WordPress family!