HTML & CSS: Editing Basics

In this guide, you will learn:

• what HTML and CSS do
• what tools you need to work with them
• how to create and edit HTML and CSS files

This guide doesn’t contain any coding exercises or practical explanations on using HTML or CSS to build the website of your dreams. Instead, it’s here to help you take the very first step: learn what HTML and CSS are, and how you can create or edit files that use the two languages.

What Are HTML & CSS Anyway?

HTML and CSS (along with Javascript) are the basic building blocks of all websites. Web browsers read and interpret files written in these languages to display the websites you visit and respond to your interactions.

Each language plays its own role in making a website come together. Without going into too much depth, here’s a quick overview:

• HTML (HyperText Markup Language) describes the shape, structure, and content of a web page document. While it does have some impact on styling, modern websites have largely handed off this responsibility to CSS.
• CSS (Cascading Style Sheets) tell browsers about the visual design elements of webpages. Things like font colors, image sizes, spacing, and even animations can be added through CSS, which also controls the page’s layout.

In addition to the above, JavaScript is often used to add complex interactivity to webpages. Though HTML and CSS support basic user interactions (like page navigation or hover effects) on their own, most modern websites use some JavaScript to further enhance the page’s look or to provide app-like functionality.

HTML & CSS Files: Tools of the Trade

Because HTML, CSS, and JavaScript files are simple text files, you can write HTML, CSS, and Javascript without needing to download or install any fancy development tools. To create an HTML or CSS file, you just need a plain text editor. Most operating systems come with a plain text editor installed. The most common are:

• Windows: Notepad
• MacOS: TextEdit (in plain text mode)
• Linux: Gedit or Kate (for most distros)

Using these editors, you can create a file, save it with the appropriate extension (either .html or .css), and the file will automatically be recognized as the correct file type. If you forget to use either .html or .css, you can edit the file extension to the intended one, and your operating system will begin to recognize the file correctly.

Help! I can’t see file extensions!

Windows users may be unable see or edit file extensions by default, since Windows 7, 10, and 11 hide this information in File Explorer. To make sure you have access to file extensions, follow the instructions for your Windows version in this article.

Plain Text Advanced: Source Code Editors

As you spend more time programming, you may see other text editors mentioned, with names like VS Code, Sublime, or Notepad++. These source code editors are plain text editors with special features which make code easier to read and write, like syntax highlighting or autocompletion.

While many developers move to a source code editor with time, they can be overwhelming to learn, especially for beginners. Until you’re ready to make the jump, a plain text editor is all you need to get started. Don’t overthink it!

Viewing and Editing HTML & CSS Files

There are two ways to view HTML and CSS files: as a web page or as source code. When we view the files as “source code” (sometimes called just “source” or “code”), we are looking at the plain text instructions being given to the computer. When viewing them as the web page, they have been opened in the web browser, which is interpreting the source code for our viewing.

Viewing an HTML File as a Web Page

When you open an HTML file using a browser, you can see how the web page will look to other people who view it.

The easiest way to open an HTML file in most operating systems is to double-click it, opening it in your default browser. In many browsers, you can also drag and drop the HTML file to your browser window to open it.

Viewing and Editing an HTML File as Source Code

Opening an HTML file in a browser allows you to see how the web page looks. However, it does not allow you to edit its content. To edit the content of an HTML file, you need to open it and make changes using a plain text editor.

To edit the HTML code, you will need to do one of the following:

1. Right click the file, select “Open with…”, then choose a plain text editor.
2. Open your plain text editor, choose File, then Open (or equivalent), and select the file to open.

This will give you access to view and edit the HTML code. When you make a change and then save, you must reload/refresh the page in your browser to see the update.

Rich Text Woes

Be sure to always use plain text editors like the ones suggested above when you write any type of code, including HTML and CSS!

Although rich text editors can read and write files with HTML and CSS file extensions, browsers cannot correctly interpret the additional information added by Rich Text Editors. If you accidentally use one to create or edit HTML and CSS files, you’re in for a bad time: at best, your website will look wonky; at worst, it may not display at all.

How do I Know if I'm Using a Rich Text Editor?

Unlike plain text editors, Rich Text Editors like Word, Google Docs, Wordpad, or TextEdit (in rich text mode) allow you to bold or color text, and to add images and other non-text data to your document. To support this, the files they create always contain additional information about the format of the text. If the program you’re using supports this formatting, it’s probably a Rich Text Editor.

Viewing a CSS File as a Web Page

While a CSS file can be used to style a web page, it cannot do so on its own: to see a CSS file in action, it needs to be loaded as part of an HTML page.

If you try to open a CSS file in a browser (for example, by using “Open With…”), you’ll simply see the text content of the file.

Viewing and Editing a CSS File as Source Code

Similar to HTML files, to edit the content of a CSS file, you need to open it and make changes using a plain text editor.

When you double-click a CSS file, it will either open automatically in your text or code editor, or ask you which program you would like to use to open it. Once you open the file, you can then make edits and save them to change how your website looks.

To view changes to the CSS, you must then reload an HTML page which is using it. As we mentioned in the previous section, you can only see a CSS file in action as part of an HTML page.