CSS Styles / Full Stack Development

CSS Styles
by Tomas Trescak· React Fundamentals

0 / 3280 XP

Theme wsu

American

Presentation Transcript
If you prefer text to video, check out the transcript of the presentation above

Slide 1 ----------- Part 1: Let's explore how can we add styles to React components. Slide 2 ----------- Part 1: In React, you have multiple options for how to style your components using CSS. In this section, we explore CSS files, Inline styles, CSS modules and Tailwind.js. Part 2: We will not talk about CSS in JS, as your approach will depend on selection of the CSS library, such as Emotion or Styled Components. Slide 3 ----------- Part 1: Let's first define a simple CSS file and store it in the "styles (dot) css" file. Part 2: You have two options how to include this file in your React project. Part 3: If you store your file in the web accessible location, you can include this file in your HTML file. Part 4: But, in javascript frameworks such as NextJS, you will most probably import it in your main application file. In simple applications you can use the HTML import, but try to use the javascript import for further optimisations. Slide 4 ----------- Part 1: Using CSS files in your application creates global classes that are shared in your application. But how do we use them? Part 2: In html we specify CSS classes using a class prop. Would you know what the problem is with that in JSX? Well, class is a reserved word in JavaScript, so we cannot use it. Part 3: Instead, we use prop named className to specify the CSS class. Part 4: When we execute this code, we see the formatted header. Slide 5 ----------- Part 1: The issue with global class names is that it can create naming conflicts with multiple classes sharing the same name. This is particularly dangerous if you use 3rd party ui libraries that introduce their classes in a global namespace. Alternatively, you can use inline styles to specify the look of your elements. Part 2: In HTML, you would specify styles in this way. Unfortunately, React does not know how to parse the style string. Part 3: Instead, in React, for increased type safety and control, we use the object notation with CSS style names in the Pascal case. Part 4: You can also easily create reusable styles and share it with multiple components Part 5: Running this code styles both the header and the paragraph. However, the issue with inline styles is that they are limited in their use, as they cannot specify advanced behaviours such as mouse over events or media queries for responsive styling. Slide 6 ----------- Part 1: CSS Modules combine the convenience and expressivity of CSS classes with creation of isolated class names. To enable CSS modules, you have to use compatible bundler or framework, such as NextJS. Part 2: To create a CSS module you rename the styles.css to styles.module.css and import it in your component. Part 3: You can then access individual class names using the dot notation. Part 4: Under the hood, the framework creates unique class names per each CSS module. For example, in the browser, you would see something similar to this. Consequently, you can use the same CSS class name across multiple CSS modules without worrying about creating conflicts. Slide 7 ----------- Part 1: Let's now talk about the new kid on the block TailwindJS, which quickly gained traction among developers. Part 2: Tailwind is a utility-first CSS framework that lets you style components directly in JSX using predefined classes. Part 3: It simplifies styling, speeds up development, and helps maintain consistency. It also produces static HTML when building your application, with no need for Javascript. Part 4: Compare these two examples and think which one you prefer. As with any other library it comes down to preference! Slide 8 ----------- Part 1: Installation with tailwind 4.0 is seamless Part 2: First, create your project and install the necessary packages. Part 3: Then, configure the postcss package to use the tailwind library. PostCSS extracts and compiles all your CSS files into static CSS, resulting in superior performance. Part 4: Lastly, import the tailwind from your global.css file. And just like that, you are ready to write some concise and intuitive CSS! Slide 9 ----------- Part 1: Let's check out how Tailwind utility classes work Part 2: Each tailwind utility class starts with zero or more prefixes, followed by the class identifier and parameters separated by hyphens. Part 3: Consider this utility class with identifier text and two parameters, red and 200. This class sets the colour of the text to red with a shade of 200. Part 4: This class uses the prefix named hover, identifier text and two parameters, red and 500. In this case, the color of the text when mouse if over the text will be set to red, with a shade of 500. Part 5: Utility classes can have a variable number of parameters and prefixes, such as this one with one parameter ... Part 6: ... this one with no parameters at all. Part 7: ... or this one with multiple prefixes Part 8: We strongly recommend you check the official documentation of Tailwind to discover its full potential. But, for now, let's explore a few utility classes that we will use in this class. Slide 10 ----------- Part 1: The first utility class is text, which sets the color of the text. It takes two parameters: the name of the colour and its shade. All colours can be customised on the CSS to adapt to the company palette. You can even define your custom colours. Part 2: Then, there is the utility class bg, setting the background of the element ... Part 3: ... and the p class, setting the padding of the element. The p class has multiple variations, such as px for setting horizontal padding, or py for setting vertical padding. Similarly, there is the m class setting the margin of the element. Slide 11 ----------- Part 1: Please pause the presentation and practice your tailwind skills! Slide 12 ----------- Part 1: For typography, there are multiple utility classes. The variation of utility class text with one parameter sets the size. The sizes, such as sm, md, lg or xl can be customised in the tailwind configuration. Other utility classes, such as font modify further properties of text. Slide 13 ----------- Part 1: Please pause the presentation and practice your tailwind skills! Slide 14 ----------- Part 1: Tailwind also has full support for flexbox and grid layouts, making layout creation a breeze. In the following slides we'll show you how to create responsive layouts easily. Slide 15 ----------- Part 1: Please pause the presentation and practice your tailwind skills! Slide 16 ----------- Part 1: Tailwind excels when making responsive designs. For such purposes, Tailwind uses breakpoints such as md, or lg that specify styles based on the current window size. Slide 17 ----------- Part 1: Please pause the presentation and practice your tailwind skills! Slide 18 ----------- Part 1: As an exercise, try this coding challenge. Your task is to create a responsive card component using Tailwind. The button should change color when hovering and the card width should be adjusted based on screen size. Please pause the presentation and do it! Once you are done, click the Share button next to the Tailwind Play and paste your link in the comments below!

Description
All the extra information about this section

In React, you have multiple options for how to style your components using CSS: 1. CSS Classes and CSS files 2. Inline Styles 3. CSS Modules 4. CSS in JS In this section, we explore the first three as the latter depends on your selection of the CSS library you want to use, such as Emotion [https://emotion.sh/docs/introduction] or Styled Components [https://styled-components.com/]. CSS CLASSES Similar to vanilla javascript, you first need to define and include your CSS file in the project. Consider the following CSS file: .header { font-weight: bold; color: salmon; } .header:hover { color: blue; } .code { font-family: monospace; color: #333; } Consider the file name to be styles.css, you can include this file in the main index.html file: <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> But, more often with web frameworks such as Next.js you would import this file in your entry level file such as app.tsx: // file: app.tsx import "./styles.css" Using CSS files in your application creates global classes shared in your application. But how do we use this? In html we specify CSS classes using class such as <h1 class="header">. Would you know what the problem is with that in JSX? Well, class is a reserved word in javascript, so we cannot use it. Therefore, we use className instead. For example: function Greeting() { return <h1 className="header">Hello</h1> } The issue with global class names is that it can create conflicts. Particularly if you use 3rd party libraries that introcuce their own classes and class names. INLINE STYLES Alternatively, you can use inline styles to specify the look of your elements. In HTML, you specify styles in the following way: <h1 style="font-weight: bold;font-size: 1em">Hello</h1> In React, for increased type safety and control, we use object notation of CSS classes specified inside the styles prop. The example above would look in React as following: <h1 style={{ fontWeight: 'bold', fontSize: "1em" }}>Hello</h1> So, style prop expects an object with values of CSS styles as react does not know how to parse style strings. You can easily create reusable inline styles similar to this: const header = { fontWeight: 'bold', fontSize: "1em" } <h1 style={header}>Header 1</h1> <h1 style={header}>Header 2</h1> The issue with inline styles is that they are limited in their use, as they cannot specify advanced behaviours such as mouse over events, or media queries for responsive styling. CSS MODULES CSS Modules combine the convenience and expressivity of CSS classes with creation of isolated class names. To enable CSS modules, you have to use compaible bundler or framework, such as Next.js. To create a CSS module you rename the styles.css to styles.module.css and import it in your component. You can then access individual class names using the .dot notation such as the following: import styles from "./styles.module.css" function Greeting() { return <h1 className={styles.header}>Hello<h1> } Under the hood, the framework creates unique class names per each css module. For example, in browser, you would see something similar to this (note the name of the class): <h1 className="App_header_JQ3e45">Hello</h1> Consequently, you can use the same name of the CSS class across multiple CSS modules, without worry to create conflicts. In Skillpies editor we do not support CSS modules, only global CSS files and inline styles. But, some of our external exercises will use CSS modules, so be on the lookout! TAILWIND.JS Imagine you're building a React app and need to style components. You could write CSS files, use CSS-in-JS, or rely on frameworks like Bootstrap. But what if you had a way to style components quickly, consistently, and without writing custom CSS? This is where Tailwind CSS shines! Tailwind CSS is a utility-first CSS framework that provides predefined classes to style elements directly in JSX. It’s fast, scalable, and helps maintain consistent UI designs in React apps. REAL-WORLD PROBLEM You’re developing a dashboard with buttons, cards, and forms. Instead of writing CSS rules for every element, Tailwind lets you apply predefined styles directly in JSX: <button className="bg-blue-500 text-white px-4 py-2 rounded">Click Me</button> This makes styling easier and keeps everything in one place—no separate CSS files needed! -------------------------------------------------------------------------------- LECTURE: USING TAILWIND CSS IN REACT 1. INSTALLING TAILWIND IN A REACT PROJECT To use Tailwind CSS in a React project, install it via pnpm or npm (🔗 official instructions [https://tailwindcss.com/docs/installation/framework-guides/nextjs]): pnpx create-next-app@latest tailwind --typescript --eslint --app pnpm install tailwindcss @tailwindcss/postcss postcss Then, configure postcss.config.mjs: const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config; Finally, import Tailwind into globals.css: @import "tailwindcss"; WHEN TO USE? * When you want rapid styling without writing custom CSS. * For building scalable, responsive UIs efficiently. WHEN NOT TO USE? * If you prefer traditional CSS files or styled-components. * When working on projects requiring highly unique or artistic designs. -------------------------------------------------------------------------------- 2. TAILWIND UTILITY CLASSES: THE BASICS Tailwind uses utility classes to apply styles inline. Let’s break them down: TEXT AND BACKGROUND COLORS <p className="text-red-500 bg-gray-200 p-4">Hello Tailwind!</p> ✔️ text-red-500 → Sets text color ✔️ bg-gray-200 → Sets background color ✔️ p-4 → Adds padding TYPOGRAPHY AND FONT STYLING <h1 className="text-3xl font-bold underline">Welcome</h1> ✔️ text-3xl → Large font size ✔️ font-bold → Bold text ✔️ underline → Underlined text FLEXBOX & LAYOUT <div className="flex justify-center items-center h-screen"> <p className="text-lg">Centered Content</p> </div> ✔️ flex → Enables Flexbox ✔️ justify-center → Centers horizontally ✔️ items-center → Centers vertically ✔️ h-screen → Full height of screen -------------------------------------------------------------------------------- 3. TAILWIND AND REACT COMPONENTS Tailwind works seamlessly with React components. REUSABLE BUTTON COMPONENT const Button = ({ text }) => { return ( <button className="bg-blue-600 hover:bg-blue-800 text-white py-2 px-4 rounded"> {text} </button> ); }; export default Button; ✔️ hover:bg-blue-800 → Darkens button on hover ✔️ rounded → Rounded corners -------------------------------------------------------------------------------- 4. RESPONSIVE DESIGN WITH TAILWIND Tailwind makes responsive design easy with breakpoints: <div className="w-full md:w-1/2 lg:w-1/3 bg-green-300 p-4"> Responsive Box </div> ✔️ w-full → Full width by default ✔️ md:w-1/2 → 50% width on medium screens ✔️ lg:w-1/3 → 33% width on large screens -------------------------------------------------------------------------------- CONCLUSION: KEY TAKEAWAYS ✅ Tailwind CSS is a utility-first framework for rapid styling in React. ✅ You can apply styles directly in JSX using predefined classes. ✅ Tailwind makes responsive design simple with breakpoints. ✅ It’s fast, scalable, and great for modern React apps.

Discuss with Maggie
Use the power of generative AI to interact with course content

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Assignment 1.2: Front End Quiz: CSS Styles

CSS Styles by Tomas Trescak· React Fundamentals

Presentation TranscriptIf you prefer text to video, check out the transcript of the presentation above

DescriptionAll the extra information about this section

Discuss with MaggieUse the power of generative AI to interact with course content

Discuss with OthersAsk questions, share your thoughts, and discuss with other learners

CSS Styles
by Tomas Trescak· React Fundamentals

Presentation Transcript
If you prefer text to video, check out the transcript of the presentation above

Description
All the extra information about this section

Discuss with Maggie
Use the power of generative AI to interact with course content

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners