CSS Styles

Code
CSS
Published

January 30, 2025

1. HTML

[style=""] inline css

<div style="">

</div>

head>style css

<head>
  <style>
    /* ... */
  </style>
</head>

head>link[rel="stylesheet"] href=“xxx.css”

<head>
  <link rel="stylesheet" href="style.css">
</head>

2. Framework (React, Vue)

import ‘xxx.css’ (jsx)

import './styles.css';

style tag (vue)

<style>
/* ... */
</style>

3. Libraries

  • component classes style (bootstrap style)
  • atomic css style (tailwind)
  • css-in-js style (emotion)
import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)