Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[Setup] CSS Development Environment

[Setup] CSS Development Environment

This page explains how to set up a CSS development environment. Like HTML, CSS requires no special installation — all you need is a text editor and a browser to get started right away.

Writing CSS in the HTML style Element

This method places a <style> element inside the <head> of an HTML file and writes CSS inside it. It is easy to try and is well suited for the early stages of learning.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Test</title>
  <style>
    h1 {
      color: #ff6600;
      font-size: 24px;
    }
    p {
      color: #333333;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>My First CSS</h1>
  <p>The style has been changed with CSS.</p>
</body>
</html>

Linking an External CSS File

This method writes CSS code in a separate file (.css) and loads it from HTML using a <link> element. This is the most common approach in real-world development.

First, create a file called style.css.

/* style.css */
body {
  font-family: sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
}

h1 {
  color: #336699;
  border-bottom: 2px solid #336699;
  padding-bottom: 8px;
}

p {
  color: #333333;
  line-height: 1.8;
}

Next, link this CSS file from your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loading an External CSS File</title>
  <link rel="stylesheet" href="style.css?lang=en">
</head>
<body>
  <h1>External CSS File</h1>
  <p>The styles from style.css are applied here.</p>
</body>
</html>

Writing CSS Inline

This method writes CSS directly in the style attribute of an HTML element. It is useful when you want to apply a style to a specific element only, but avoid overusing it as it makes maintenance harder.

<p style="color: red; font-weight: bold;">Red bold text</p>
<div style="background-color: #eee; padding: 16px;">Box with background color</div>

Live Editing with Developer Tools

Using the browser's developer tools, you can edit CSS in real time and preview the results instantly. This is extremely useful for fine-tuning designs.

Step	Action
1	Open your HTML file in a browser.
2	Open the developer tools with the `F12` key (on macOS: `Cmd + Option + I`).
3	Select an element in the `Elements` tab. The CSS applied to it appears in the `Styles` panel on the right.
4	Click on a CSS property value and edit it directly — the change is reflected on the page immediately.
5	You can also add new properties.

Changes made in the developer tools are temporary. Once you find a style you like, copy it back to your CSS file.

If you find any errors or copyright issues, please contact us.

Home