style - freeCodeCamp.org

CSS Selector Types – How to Select Elements to Style in CSS

freeCodeCamp — Mon, 19 Sep 2022 22:01:13 +0000

By Dillion Megida

When you want to style an element with CSS, you first have to "select" it. In this article, I'll show you seven (7) ways in which you can do that.

Here's the syntax for styling elements in CSS:

selector {
  /* styles here */
}

You have the selector that "targets" the element(s) you want to style, then you have an open curly brace. After the brace, you have your styles using different CSS properties, and you close it with a closing curly brace.

There are numerous ways to target elements. You can call these methods Selector Types.

Here is a video with examples on Ways to Select Elements to Style in CSS if you prefer that.

Here are seven selector types in CSS.

1. How to Use the Universal Selector (*) in CSS

The Universal Selector, asterisk (*), allows you to select ALL elements of any type for styling. Here is an example:

* {
  border: 1px solid black;
}

Let's say we use this style for the following HTML:

<body>
    <h1>CSS stylesh1>
    <p>How to apply stylesp>
    <div>
        <img width="20px" height="20px" src="https://www.freecodecamp.org/news/content/images/size/w150/2022/03/deee.jpg" />
    div>
body>

Here is the result:

You can see that the body, h1, p, div, and img elements all have the border of 1px solid black because we used the universal selector.

2. How to Style Elements by Tag Name in CSS

You can also select elements for styling by using their tag names. Here's an example:

p {
  color: red;
}

img {
  width: 100px;
  height: 100px;
}

These style declarations applies a color of red to all p elements and a width and height of 200px to all img elements.

Here's how the style above works with this HTML:

<span>I am a spanspan>
<p>There is a span above mep>
<img src="https://www.freecodecamp.org/news/content/images/size/w150/2022/03/deee.jpg" />

The result:

You can see that the span is not styled – only the img and the p are.

3. How to Style Classes in CSS

Elements accept different attributes (also called properties), including classes. You can target an element based on the class you have specified on it. Here is an example:

<div class="container">
    <h2>Helloh2>
div>

<div>
    <h2>How are youh2>
div>

There are two divs here, but only one has a class attribute with the container value. You can style the one with the class using a period (.) then the class like this:

div {
  border: 1px solid purple;
}

.container {
  border-width: 20px;
}

Here's the result:

From the CSS, we specified that all div elements should have a border of 1px solid purple. But for the element with a container class, you can see from the result that it has a border-width of 20px.

4. How to Style Ids in CSS

Similar to the class attribute, you can specify an id on an element which you can target from CSS for styling.

Here is an example:

<div class="container">
    <h2>Helloh2>
div>

<div id="container">
    <h2>How are youh2>
div>

You can target the id element here by using a hash (#) and then the id like this:

#container {
  border-left: 10px solid blue;
}

Here's the result:

Using the element (whether it's a div, p, or any type) with the container id, we applied styles to only the second div element.

Unlike classes, however, ids must be unique. Two or more elements cannot have the same id as that would cause unexpected behaviors.

5. How to Style Other Attributes in CSS

We've seen how to target class and id attributes. What if you wanted to target other attributes? Well you can; using square brackets ([attr]). How does that work?

Let's see an example:

<a href="#">
    Some link
a>

<p href="https://google.com">
    A paragraph link
p>

In this example, we have two elements: an a tag and a p tag. To style both elements, you can use their tag names directly:

p, a {
  color: red;
}

The comma allows you to apply styles to multiple selectors at once.

But another way you can style both elements is using their attributes. They both have a href attribute.

Just keep in mind that the href attribute is not supported in p tags though. I'm just using it to illustrate an example.

Here's how you can use the href attribute to style both elements:

[href] {
  color: red;
}

This CSS will match all elements with the href attribute.

Here's the result:

Both elements have the href attribute and so they are selected for our styles. Here, we used the href attribute without a value. You can also specify a value to be specific about your target like this:

[href="#"] {
  color: red;
}

Here's the result:

Only the a tag has the href attribute with the # value so that is the only element that matches our styles, as you can see from the image above.

6. How to Use Pseudo-Classes in CSS

Pseudo-classes are selector types that allow you to select elements in a particular state. To name a few, here are some supported states:

hover (when the mouse floats over an element)
disabled (when an element such as an input or button is disabled)
required (when a form element is required)

And many more you can find in the Pseudo-classes MDN Documentation.

You can apply styles when elements are in these states. You select the state by using a colon (:) followed by the state. Here is an example:

html>
<button>
    Hover me
button>

The line is important to specify that it is HTML5 so the pseudo classes can work.

And here's the CSS:

:hover {
  background-color: black;
  color: white;
}

This CSS would apply these styles to any element you hover over. Here's the result":

The image on the left is without the hover state. On the right, you can see the styles applied to the body and the button because we're hovering over them.

By hovering over the button, you are also hovering over the body because the button is a child of the body.

7. How to Use the Pseudo Element Selector in CSS

Pseudo-elements (different from Pseudo Classes) are used to select a "specific part of an element". Not the whole element – just a part. And you can also use them to add pseudo (artificial) elements to an existing element.

Here's a detailed article on Pseudo elements vs Pseudo-classes in CSS

Here are some supported pseudo-element selectors:

selection: the highlighted part of an element
first-line: the first line of a paragraph
placeholder: the placeholder text of an input element

And many more you can find in the MDN Pseudo Elements Documentation.

To apply styles using a pseudo-element selector, you use double colons (::) followed by the pseudo-element. Here's an example:

html>
<input placeholder="Enter some text" />

And here's the CSS for this HTML:

input {
  color: blue;
}

::placeholder {
  color: red;
  font-style: italic;
}

The ::placeholder pseudo-element selector styles the "placeholder part" of all form elements. As you can see in the example above, the input element itself has a color style of blue but the placeholder part has different styling.

Wrapping up

In this article, I've shown you seven ways in which you can target elements you want to style. We've seen:

the universal selector, for selecting all elements
tag names for selecting elements that match a tag name
classes for selecting elements with a class attribute
ids for selecting an element with an id attribute
attributes for selecting elements that have an attribute with or without a specified value
pseudo-classes for selecting elements in a specific state
pseudo-elements for selecting specific parts of an element

You can also combine these selectors to be more specific about the element you want to target. You do this using Combinators.

Combinators allow you to use multiple selectors to target elements based on the relationship between the elements that match the selectors. Here's an article I wrote about combinators if you want to learn more.

To give you a quick preview – combinators are used between multiple selector types, and they allow you to style elements based on the relationship they have with other elements.

Thank you for reading!

Inline Style in HTML – CSS Inline Styles

Joel Olawanle — Wed, 08 Jun 2022 21:24:31 +0000

Cascading Style Sheets (CSS) is a markup language that determines how your web pages will appear. It manages the colors, fonts, and layouts of your website elements, as well as allowing you to add effects or animations to your pages.

We can style an HTML file/page in three ways: external styling, internal styling, and inline styling. In this article, we'll be focusing on inline styling.

How to Use Inline Style in HTML

Using the style attribute, we can apply styling to our HTML inside individual HTML tags with inline styling.

<h1 style="...">...h1>

The style attribute works in the same way as any other HTML attribute. We use style, followed by the equality sign (=), and then a quote where all of the style values will be stored using the standard CSS property-value pairs - "property: value;".

Note: We can have as many property-value pairs as we want as long as we separate them with a semicolon (;).

It's worth noting that the style attribute is typically used in the opening HTML tag because that's the part of the HTML element that can contain text, data, an image, or nothing at all. An example of inline style is as follows:

<h1 style="color: red; font-size: 40px;">Hello Worldh1>

This is similar to this:

h1 {
  color: red;
  font-size: 40px;
}

The only difference is that the inline style applies only to the tag to which it is applied, whereas this second code example affects all p tags on your html page.

When to Use Inline Styles

Using inline styles is not considered best practice, though, because it results in a lot of repetition – because the styles cannot be reused elsewhere.

But there are times when inline styles are the best (or only) option, such as when styling HTML e-mail, CMS content like WordPress, Drupal, and so on. You can also use them when styling dynamic content, which is HTML-created or changed by JavaScript.

With the exception of the !important declaration, inline styles have a high specificity/highest priority, which means they will override most other rules in internal and external stylesheets.

Assume we have two paragraph texts with inline styling set to red and internal styling set to green:

<html>
  <head>
      <title>Hello Worldtitle>
      <style>
       p {
           color: green;
       }
   style>
  head>

  <body>
     <p style="color: red;">Paragraph one is red.p>
     <p style="color: red;">Paragraph two is also red.p>
  body>
html>

The CSS from our inline styles will override the CSS from the internal styling, so both paragraphs will be red.

Advantages and Disadvantages of Inline styles

So far, we've learned what inline style is and how to use it within HTML tags. Now, let's look at the advantages and disadvantages to see when we should use inline styles and when we shouldn't.

Advantages of Inline CSS:

Inline takes precedence over all other styles. Any styles defined in the internal and external style sheets are overridden by inline styles.
You can quickly and easily insert CSS rules into an HTML page, which is useful for testing or previewing changes and performing quick fixes on your website.
There is no need to create an additional file.
To apply styling in JavaScript, use the style attribute.

Disadvantages of Inline CSS:

Adding CSS rules to each HTML element takes time and makes your HTML structure unorganized. It's difficult to keep up, reuse, and scale.
The size and download time of your page can be affected by styling multiple elements.
Inline styles cannot be used to style pseudo-elements and pseudo-classes. For example, you can style the visited, hover, active, and link colors of an anchor tag using external and internal style sheets.

Conclusion

In this article, we learned how to use inline style in HTML, when to use it, and some of the benefits and drawbacks of doing so.

Since inline styling takes precedence over all other styles, one of the best times to use it is when testing or previewing changes and performing quick fixes on your website.

How to Style Your React App – 5 Ways to Write CSS in 2021

Reed — Fri, 16 Jul 2021 18:41:57 +0000

When it comes to styling your React app, you have a ton of different options. Which do you choose?

I have broken down the 5 primary ways you have to choose between when writing CSS in your React app.

There is no #1 way to approach to writing styles in React for every project. Every project is different and has different needs.

That's why at the end of each section, I will cover the pros and cons of each approach to help you choose which is the best for you in your projects.

Let's get started!

What We Will Be Coding

To see how the code for each of these styling approaches compare with one another, we will create the same example: a simple, but clean testimonial card.

Want to code along with each of these examples? Go to react.new to create a new React application instantly ✨

Inline Styles

Inline styles are the most direct away to style any React application.

Styling elements inline doesn't require you to create a separate stylesheet.

Style applied directly to the elements as compared to styles in a stylesheet also have higher precedence. This means that they "override" other style rules that may be applied to an element.

Here is our testimonial card styled with inline styles:

export default function App() {
  return (
    <section
      style={{
        fontFamily: '-apple-system',
        fontSize: "1rem",
        fontWeight: 1.5,
        lineHeight: 1.5,
        color: "#292b2c",
        backgroundColor: "#fff",
        padding: "0 2em"
      }}
    >
      <div
        style={{
          textAlign: "center",
          maxWidth: "950px",
          margin: "0 auto",
          border: "1px solid #e6e6e6",
          padding: "40px 25px",
          marginTop: "50px"
        }}
      >
        <img
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Tammy Stevens"
          style={{
            margin: "-90px auto 30px",
            width: "100px",
            borderRadius: "50%",
            objectFit: "cover",
            marginBottom: "0"
          }}
        />
        <div>
          <p
            style={{
              lineHeight: 1.5,
              fontWeight: 300,
              marginBottom: "25px",
              fontSize: "1.375rem"
            }}
          >
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          p>
        div>
        <p
          style={{
            marginBottom: "0",
            fontWeight: 600,
            fontSize: "1rem"
          }}
        >
          Tammy Stevens
          <span style={{ fontWeight: 400 }}> · Front End Developerspan>
        p>
      div>
    section>
  );
}

Despite a few quick benefits, inline styles are only an acceptable choice for very small applications. The difficulties with inline styles become apparent as your code base grows even slightly.

As the code example above shows, even a small component like this becomes very bulky if all the styles are inline.

One quick trick however is to put inline styles into reusable variables, which can be stored in a separate file:

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    <section style={styles.section}>
      <div style={styles.wrapper}>
        <img
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Tammy Stevens"
          style={styles.avatar}
        />
        <div>
          <p style={styles.quote}>
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          p>
        div>
        <p style={styles.name}>
          Tammy Stevens
          <span style={styles.position}> · Front End Developerspan>
        p>
      div>
    section>
  );
}

Despite this improvement, inline styles do not have a number of essential features that any simple CSS stylesheet could provide.

For example, you cannot write animations, styles for nested elements (i.e. all child elements, first-child, last-child), pseudo-classes (i.e. :hover), and pseudo-elements (::first-line) to name a few.

If you're prototyping an application, inline styles are great. However, as you get further into making it, you will need to switch to another CSS styling option to give you basic CSS features.

👍 Pros:

Quickest way to write styles
Good for prototyping (write inline styles then move to stylesheet)
Has great preference (can override styles from a stylesheet)

👎 Cons:

Tedious to convert plain CSS to inline styles
Lots of inline styles make JSX unreadable
You can not use basic CSS features like animations, selectors, etc.
Does not scale well

Plain CSS

Instead of using inline styles, it's common to import a CSS stylesheet to style a component's elements.

Writing CSS in a stylesheet is probably the most common and basic approach to styling a React application, but it shouldn't be dismissed so easily.

Writing styles in "plain" CSS stylesheets is getting better all the time, due to an increasing set of features available in the CSS standard.

This includes features like CSS variables to store dynamic values, all manner of advanced selectors to select child elements with precision, and new pseudo-classes like :is and :where.

Here is our testimonial card written in plain CSS and imported at the top of our React application:

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

// src/App.js

import "./styles.css";

export default function App() {
  return (
    <section className="testimonial">
      <div className="testimonial-wrapper">
        <img
          className="testimonial-avatar"
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Tammy Stevens"
        />
        <div className="testimonial-quote">
          <p>
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          p>
        div>
        <p className="testimonial-name">
          Tammy Stevens<span> · Front End Developerspan>
        p>
      div>
    section>
  );
}

For our testimonial card, note that we are creating classes to be applied to each individual element. These classes all start with the same name testimonial-.

CSS written in a stylesheet is a great first choice for your application. Unlike inline styles, it can style your application in virtually any way you need.

One minor problem might be your naming convention. Once you have a very well-developed application, it becomes harder to think of unique classnames for your elements, especially when you have 5 divs wrapped inside each other.

If you don't have a naming convention you are confident with (i.e. BEM), it can be easy to make mistakes, plus create multiple classes with the same name, which leads to conflicts.

Additionally, writing normal CSS can be more verbose and repetitive than newer tools like SASS/SCSS. As a result, it can take a bit longer to write your styles in CSS versus a tool like SCSS or a CSS-in-JS library.

Plus, it's important to note that since CSS cascades to all children elements, if you apply a CSS stylesheet to a component it is not just scoped to that component. All its declared rules will be transferred to any elements that are children of your styled component.

If you are confident with CSS, it is definitely a viable choice for you to style any React application.

With that being said, there are a number of CSS libraries that give us all the power of CSS with less code and include many additional features that CSS will never have on its own (such as scoped styles and automatic vendor prefixing).

👍 Pros:

Gives us all of the tools of modern CSS (variables, advanced selectors, new pseudo-classes, etc.)
Helps us clean up our component files from inline styles

👎 Cons:

Need to setup vendor prefixing to ensure latest features work for all users
Requires more typing and boilerplate than other CSS libraries (i.e. SASS)
Any stylesheet cascades to component and all children; not scoped
Must use a reliable naming convention to ensure styles don't conflict

SASS / SCSS

What is SASS? SASS is an acronym that stands for: Syntactically Awesome Style Sheets.

SASS gives us some powerful tools, many of which don't exist in normal CSS stylesheets. It includes features like variables, extending styles, and nesting.

SASS allows us to write styles in two different kinds of stylesheets, with the extensions .scss and .sass.

SCSS styles are written in a similar syntax to normal CSS, however SASS styles do not require us to use open and closing brackets when writing style rules.

Here is a quick example of an SCSS stylesheet with some nested styles:

/* styles.scss */

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compare this with the same code written in a SASS stylesheet:

/* styles.sass */

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Since this is not regular CSS, it needs to be compiled from SASS into plain CSS. To do so in our React projects, you can use a library like node-sass.

If you are using a Create React App project, to start using .scss and .sass files, you can install node-sass with npm:

npm install node-sass

Here is our testimonial card styled with SCSS:

/* src/styles.scss */

$font-stack: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$text-color: #292b2c;

%font-basic {
  font-size: 1rem;
}

body {
  @extend %font-basic;
  font-family: $font-stack;
  color: $text-color;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  background-color: #fff;
}

/* unchanged rules skipped */

.testimonial-name {
  @extend %font-basic;
  margin-bottom: 0;
  font-weight: 600;

  span {
    font-weight: 400;
  }
}

These styles give us the following features: variables, extending styles and nested styles.

Variables: You can use dynamic values by writing variables, just like in JavaScript, by declaring them with a $ at the beginning.

There are two variables that can be used in multiple rules: $font-stack, $text-color.

Extending / Inheritance: You can add onto style rules by extending them. To extend rules, you create your own selector which can be reused like a variable. The name of rules that you want to extend start with %.

The variable %font-basic is inherited by the rules body and .testimonial-name.

Nesting: Instead of writing multiple rules that begin with the same selector, you can nest them.

In .testimonial-name , we use a nested selector to target the span element within it.

You can find a working version of a React application with SCSS here.

👍 Pros:

Includes many dynamic CSS features like extending, nesting, and mixins
CSS styles can be written with much less boilerplate over plain CSS

👎 Cons:

Like plain CSS, styles are global and not scoped to any one component
CSS stylesheets is starting to include a number of features that SASS had exclusively, such as CSS variables (not necessarily a con, but worth noting)
SASS / SCSS often requires setup, such as installing the Node library node-sass

CSS Modules

CSS modules are another slight alternative to something like CSS or SASS.

What is great about CSS modules is that they can be used with either normal CSS or SASS. Plus, if you are using Create React App you can start using CSS modules with no setup at all.

Here is our application written with CSS modules:

/* src/styles.module.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}

/* styles skipped */

.testimonial-name span {
  font-weight: 400;
}

import styles from './styles.module.css';

export default function App() {
  return (
    <section className={styles.testimonial}>
      <div className={styles['testimonial-wrapper']}>
        <img
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Tammy Stevens"
          className={styles['testimonial-avatar']}
        />
        <div>
          <p className={styles['testimonial-quote']}>
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          p>
        div>
        <p className={styles['testimonial-name']}>
          Tammy Stevens
          <span> · Front End Developerspan>
        p>
      div>
    section>
  );
}

Our CSS file has the name .module in it before the extension .css. Any CSS module file must have the name "module" in it and end in the appropriate extension (if we are using CSS or SASS/SCSS).

What is interesting to note if we look at the code above is that CSS modules are written just like normal CSS, but are imported and used as if it were created as objects (inline styles).

The benefit of CSS modules is that it helps avoid our problem of class conflicts with normal CSS. The properties that we are referencing turn into unique classnames that cannot conflict with one another when our project is built.

Our generated HTML elements will look like this:

<p class="_styles__testimonial-name_309571057">
  Tammy Stevens
p>

Plus, CSS modules solve the problem of global scope in CSS. As compared to our normal CSS stylesheets, CSS declared using modules to individual components will not cascade to child components.

Therefore, CSS modules are best to use over CSS and SASS to make sure classes don't conflict and to write predictable styles that only apply to one or another component.

👍 Pros:

Styles are scoped to one or another component (unlike CSS / SASS)
Unique, generated classnames ensure no style conflict
Can use them immediately without setup in CRA projects
Can be used with SASS / CSS

👎 Cons:

Can be tricky to reference classnames
May be a learning curve to use CSS styles like object properties

CSS-in-JS

Similar to how React allowed us to write HTML as JavaScript with JSX, CSS-in-JS has done something similar with CSS.

CSS-in-JS allows us to write CSS styles directly in our components' javascript (.js) files.

Not only does it allow you write CSS style rules without having to make a single .css file, but these styles are scoped to individual components.

In other words, you can add, change or remove CSS without any surprises. Changing one component's styles will not impact the styles of the rest of your application.

CSS-in-JS often makes use of a special type of JavaScript function called a tagged template literal. What's great about this is that we can still write plain CSS style rules directly in our JS!

Here's a quick example of a popular CSS-in-JS library, Styled Components:

import styled from "styled-components";

const Button = styled.button`
  color: limegreen;
  border: 2px solid limegreen;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click meButton>
    div>
  );
}

Note a few things here:

You can write normal CSS styles, but can include nested styles and pseudo-classes (like hover).
You can associate styles with any valid HTML element, such as the button element above (see styled.button).
You can create new components with these associated styles. See how Button is used in our App component.

Since this is a component, can it be passed props? Yes! We can export this component and use it anywhere in our app we like, plus give it dynamic features through props.

Let's say that you want an inverted variant of Button above with an inverted background and text. No problem.

Pass the inverted prop to our second button and in Button, you can access all props passed to the component using the ${} syntax with an inner function.

import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.inverted ? "limegreen" : "white"};
  color: ${props => props.inverted ? "white" : "limegreen"};
  border: 2px solid limegreen;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click meButton>
      <Button inverted>Click meButton>
    div>
  );
}

In the return of the function, you can select the inverted prop and use a ternary to conditionally determine the color of the background and text.

Here is the result:

There are a great deal more benefits to using a CSS-in-JS library to style your React applications (too many to cover here), some of which I will list below.

Be sure to check out the two most popular CSS-in-JS libraries for React: Emotion and Styled Components.

One downside to using a CSS-in-JS libraries is adding an additional library to your project. However, I would argue this is easily worth the improved developer experience you have when styling your React apps versus plain CSS.

👍 Pros:

CSS-in-JS is predictable – styles are scoped to individual components
Since our CSS is now JS, we can export, reuse, and even extend our styles through props
CSS-in-JS libraries ensure there are no styling conflicts by generating unique classnames for your written styles
No need to focus on naming conventions for your classes, just write styles!

👎 Cons:

Unlike plain CSS, you will need to install one or more third-party JavaScript libraries, which will add weight to your built project

Conclusion

Note that I did not include component libraries in this comparison. I wanted to focus primarily on different ways to compose styles yourself.

Be aware that choosing a library with pre-made components and styles like Material UI or Ant Design (to name a couple) is a totally valid choice for your project.

I hope this guide gave you a good understanding of how to style your React apps along with which approach to choose for your next project.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

HTML Italics Tutorial – How to Make Text Italic with the tag

Jessica Wilkins — Mon, 22 Mar 2021 23:21:42 +0000

In this article, we are going to learn about how to use the tag and how it differs from the tag.

In previous versions of HTML, the tag was used to display text in italics. But in HTML 5, the definition has changed. We are going to explore that new definition and learn about other ways to style text in italics using CSS.

What is the tag?

The tag, or Idiomatic Text element, is a span of text that represents a change in mood or quality of text. This text is displayed in italics.

Let's look at a few reasons why you might want to use the tag.

Using the tag to mark phrases in a different language

You can use the tag to mark a span of text in a different language. This example italicizes a latin phrase.

<p>Stacy just got a tattoo of the phrase <i>Audentes fortuna iuvati> which means "Fortune favors the bold".p>

You can also use the lang attribute in the tag to represent phrases that are in a different language than their surrounding text.

<p>The first phrase that Matt learned in Italian is <i lang="it">Vorrei una birrai>, which translates to "I'd like a beer".p>

Using the tag to show someone's thoughts

You can also use the tag to highlight a person's inner thoughts.

<p>After Ben met his girlfriend's parents he thought to himself, <i>I really hope they liked mei>.p>

Using the tag for the name of a ship

If you wanted to use the name of a ship, then you can wrap that name in tags.

<p>The <i>USS Arizonai> was a United States Navy battleship built in the 1910's.p>

Using the tag for taxonomic descriptions

According to the Convention of Biological Diversity,

Taxonomy is the science of naming, describing and classifying organisms and includes all plants, animals and microorganisms of the world.

This would be an example of using the the tag for the term Felis catus.

<p>Another term for the domestic cat would be <i>Felis catusi>.p>

Differences between the tag and tag in HTML

You might think that the and tags have the same meaning because they look the same in the browser. But the two tags hold different meanings from each other.

The tag, or emphasis element, should be used when you want to place an emphasis on a word or span of text.

Here is an example using the tag.

<p>Quit being a baby and just <em>doem> it already!p>

Humans and screen readers would place verbal stress on the word "do". This differs from the tag where there was no extra emphasis placed on the text.

Should you use the tag for styling?

You should not use the tag for styling purposes. If you want to style text in italics, then you should use the CSS font-style property.

<p class="demo-para">I am using CSS to style this text in italics.p>

.demo-para { font-style: italic; }

Should you use the or tag for icons?

Over the years, there has been debate about whether it is "correct" to use tags or tags for adding icons to your website.

Some will argue that there is nothing wrong with it and it is pretty common practice, while others think it is a misuse of the tag and you should use the tag instead.

Here is a response from Font Awesome regarding the use of the for its icons:

We like the tag for brevity and because most folks use for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a is more semantically correct.

My goal is not to make you choose one side over the other in this debate, but rather make you aware of this ongoing discussion.

Conclusion

The tag is a span of text that represents a change in mood or quality of text. If you want to place emphasis on text, then the appropriate tag would be the tag.

The tag should not be used for styling purposes. The correct way to style text in italics is to use the CSS font-style property.

I hope you enjoyed this article and learned about when to use tag.

How to Style Links in CSS

freeCodeCamp — Sun, 02 Feb 2020 22:53:00 +0000

Styling Links

Links can be styled with any CSS property, such as color, font-family, font-size, and padding. Here is an easy example:

a { color: hotpink; }

In addition, links can be styled differently depending on what state they are in.

Links also have 4 states, and many programmers style each state differently. The four states are:

a:link: an unvisited, unclicked link

a:visited: a visited, clicked link

a:hover: a link when the user’s mouse is over it

a:active: a link when it is clicked

The property is responsible for creating URLs and can be modified using a number of CSS styling properties, although it has a few by default:

Underline

Blue color

You can change these by adding changing the color and text-decoration properties.

color: black; text-decoration: none;

You can also style the link based on interaction using these properties, also known as link states:

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

Here is some sample CSS using the 4 states:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Note that there are some ordering rules for when you are setting the style for link states.

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

More on styling in CSS:

How to style an HTML tag directly in CSS

How to style lists with CSS

How to style buttons with CSS

CSS Comment Example – How To Comment Out CSS

freeCodeCamp — Sun, 26 Jan 2020 21:57:00 +0000

Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute.

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
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 - freeCodeCamp.org

CSS Selector Types – How to Select Elements to Style in CSS

1. How to Use the Universal Selector (*) in CSS

2. How to Style Elements by Tag Name in CSS

3. How to Style Classes in CSS

4. How to Style Ids in CSS

5. How to Style Other Attributes in CSS

6. How to Use Pseudo-Classes in CSS

7. How to Use the Pseudo Element Selector in CSS

Wrapping up

Inline Style in HTML – CSS Inline Styles

How to Use Inline Style in HTML

When to Use Inline Styles

Advantages and Disadvantages of Inline styles

Advantages of Inline CSS:

Disadvantages of Inline CSS:

Conclusion

How to Style Your React App – 5 Ways to Write CSS in 2021

What We Will Be Coding

Inline Styles

Plain CSS

SASS / SCSS

CSS Modules

CSS-in-JS

Conclusion

Become a Professional React Developer

HTML Italics Tutorial – How to Make Text Italic with the tag

What is the tag?

Using the tag to mark phrases in a different language

Using the tag to show someone's thoughts

Using the tag for the name of a ship

Using the tag for taxonomic descriptions

Differences between the tag and tag in HTML

Should you use the tag for styling?

Should you use the or tag for icons?

Conclusion

How to Style Links in CSS

Styling Links

More on styling in CSS:

CSS Comment Example – How To Comment Out CSS

Organizing CSS with comments

A little bit more about CSS: CSS Syntax and Selectors

Inline CSS

Internal CSS