CSS is a tool used to style HTML documents and ensure the presentation of web pages. It is used to
determine the style of HTML pages. We can define colors, sizes, margins, padding, borders,
positions and tons of other things. Rules consist of selectors and a declaration block. The selector points
to the HTML element we want to format, and the format block contains declarations separated by semicolons.
Each declaration includes CSS properties and values, separated by colons, and blocks end with curly braces.
Selectors are used to find HTML elements we want to transform, and they are divided into five
categories. CSS is used to determine the appearance of our website, including design changes, layout and
display on different devices. These are mobile devices, tablets, laptops. CSS solved a major problem in
designing and building web pages.
Tools for working with CSS can range from a simple Notepad available in every operating system to professional IDEs. There are countless professional tools for styling, but here I will list just a few. The first IDE is PhpStorm, the second is VS Code, the third is Notepad++, and there are many others. I have also added a brief description (at least for PhpStorm and VS Code) on how to get started with these two tools. Let's first look at how to add styles to an HTML document using internal styles in Notepad.
| Tool | For Who? | How to Start with CSS? | Price |
|---|---|---|---|
| Notepad | For complete beginners who want to understand the basics without extra features. | Create a style.css file and link it to your HTML. Write manually, without assistance. |
Free |
| Notepad++ | For beginners who want syntax highlighting and speed. | Install the "CSS Syntax Highlighting" plugin for color coding. | Free |
| Visual Studio Code (VS Code) | For those who want a modern tool with excellent extensions. | Use the built-in "Live Server" extension for instant preview of changes in the browser. | Free |
| PhpStorm | For professionals who want everything in one (CSS, HTML, JS, PHP). | Nothing to install! Built-in "IntelliSense" automatically suggests CSS properties and values. | 30 days free trial |
My Advice: Start with Notepad to understand the syntax. When you start writing more code, switch to VS Code or PhpStorm for autocomplete and faster work.
CSS (Cascading Style Sheets) is the language used to style the appearance of HTML documents. Whenever a browser reads CSS code, it styles the page according to the rules written in it. There are three methods to include CSS in an HTML document:
| Method | Where to Write? | When to Use? | Example (Link) |
|---|---|---|---|
| Inline CSS (Inline) |
In the style attribute directly on the HTML element.<p style="color: red;"> |
For quick, one-off fixes to a single element. (Not recommended for large-scale use) |
▶ View Code |
| Internal CSS (Internal) |
In the <style> tag within <head>.<style> p { color: red; } </style> |
For styling a single page only, when you don't want a separate file. | ▶ View Code |
| External CSS (External) |
In a separate .css file, linked with <link>.<link rel="stylesheet" href="style.css"> |
For styling multiple pages. (Standard and recommended method) |
▶ View Code |
External CSS is the most recommended method, as it allows you to change the entire look of a
website by editing just one file. Every webpage must include a reference to an external style sheet
using the <link> tag within <head>. If you change a style in the external CSS,
the change automatically applies to all pages linked to that file – instead of having to edit each
page individually.
You can even write an external CSS file in Notepad. There is no need to add the
<style> tag – simply write the CSS code, select All Files when saving,
and save the file with a name ending in .css (e.g., style.css). Then, link this
file to your webpage using the <link> tag, specifying the path to the file on the server.
Internal CSS is used when styling only one page – styles are written inside the
<style> tag in <head>. Inline CSS is used when you want to
style only a single element – adding the style attribute directly to the HTML tag.
