[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.

Chrome Developer Tools (DevTools) Styles panel

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

Choosing an Editor

Tool	Description
Visual Studio Code (commonly known as VSCode)	Currently the most popular editor. It offers rich code completion, error highlighting, and extensions, making it suitable for beginners and experts alike. Available on Windows, macOS, and Linux.
Sublime Text	A lightweight, extremely fast editor. Its simple interface lets you focus on coding. Available on Windows, macOS, and Linux.
Hidemaru Editor	A legendary Japanese text editor first released in 1993. Lightweight, fast, and equipped with a powerful macro system. Windows only, one-time purchase.
Cursor	A modern editor with AI features. Based on Visual Studio Code, it offers even more powerful code completion. Available on Windows, macOS, and Linux.

These days, Visual Studio Code seems to be the most widely used editor, but the webmaster personally loves simple and lightweight editors, so he currently uses Sublime Text. Feel free to use this as a reference.

A note about Hidemaru Editor: first released in 1993, Hidemaru is lightweight, features powerful search and replace with regular expressions, and can be customized with macros. In modern terms, macros are similar to add-ons — and Hidemaru had this capability back in the 1990s, a remarkably forward-thinking design that makes it a truly wonderful editor.

The webmaster himself used Hidemaru Editor for programming from the Windows 3.1 era through Windows 7, and owes a great deal to it over the years. Its developer, Hideo Saito, continues to update Hidemaru to this day — it runs perfectly on Windows 11 and other 64-bit versions of Windows. You can purchase Hidemaru Editor from here — it is a one-time purchase for around 4,000 yen (about $27), and having it on a Windows machine can be surprisingly handy.

(´-`).｡oO(The webmaster wanted to give a personal shout-out to Mr. Saito, who he has relied on for years...)

(´-`).｡oO(And yet, after 30+ years of use, the total cost has been just around $27... it's hard to find anything with better value for money...)

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

Home