How to Create a Simple CSS Stylesheet Using Notepad

Download Article

Written by Jack Lloyd

Last Updated: July 13, 2024 Tested

Download Article

Creating an HTML Page

|

Adding CSS

|

Saving the Document

|

Q&A

|

Tips

|

Warnings

This wikiHow teaches you how to use Windows' Notepad app to store information for a webpage written in HTML and CSS. HTML is the programming language used to create your webpage, while CSS is the language that determines the style—color, font, and so on—of the HTML elements on the webpage.

Making Inline CSS Inside HTML File in Notepad

Create a Notepad file and add the document type code. Add the HTML tag, BODY tag, headers, and paragraph text.
There are two ways to link your CSS snippets to your HTML files: inline CSS and external CSS files. In this article, we will show you how to add inline CSS snippets.
In the real world, for larger web projects, inline CSS is not a good practice to use because the code will be messy and harder to maintain. Instead, we link our HTML file with the <link> tag to an external CSS file with an extension .css.
To add inline CSS, put a space between the HTML and BODY tags. Enter a HEAD tag and STYLE tag.
You can style the header or paragraph text size, color, alignment, and font used.

Part 1

Part 1 of 3:

Creating an HTML Page

Download Article

Open Start
, type in notepad, and click the blue Notepad app at the top of the Start window.
Type <!DOCTYPE html> into Notepad, then press ↵ Enter to start a new line.

Advertisement
Type in <html> and press ↵ Enter.
Type in <body> and press ↵ Enter. You can now begin entering your webpage's information.
5
Add a header. Type in <h1>TEXT</h1>, making sure to replace "TEXT" with your preferred page heading, and press ↵ Enter.
- For example, to create a page header that says "Welcome!", you would type <h1>Welcome!</h1> into Notepad.
6
Add text below the header. Type in <p1>TEXT</p1>, making sure to replace "TEXT" with your preferred message, and press ↵ Enter.
- For example, to add text that says "I am an iguana", you would enter <p1>I am an iguana</p1> into Notepad.
7
Add more headers and paragraphs. Each subsequent header and paragraph must have an ascending number applied to it; for example, your second header will have <h2></h2> tags around it, and the second paragraph will have <p2></p2> tags.
- Make sure that you're continuing to press ↵ Enter after each line of code.
Once you've entered your last line of code, type in </body> on its own line and press ↵ Enter, then type in </html>. Your document is now ready to be styled with CSS.

Part 2

Part 2 of 3:

Adding CSS

Download Article

1
Understand how CSS works. You use CSS to change the appearance of an HTML element (e.g., a paragraph). CSS is typically written in the following line-by-line format:^{[1]
X
Research source}
- element tag { (for example, p {)
- modifier: property; (for example, font-size: 20px;)
- modifier: property; (for example, color: black;)
- }
These should be near the top of the page.
Type in <head> and press ↵ Enter.
Type in <style> and press ↵ Enter.
5
Change your webpage's background color. To do so:
- Type in body { and press ↵ Enter.
- Type in background-color: lightblue; and press ↵ Enter.
  - You can use any supported color here, as well as "light" or "dark" modifiers.
- Type in } and press ↵ Enter.
6
Style your first header. Type in h1 { and press ↵ Enter, add a modifier and press ↵ Enter, and type in } and press ↵ Enter. You can add multiple modifiers to one element as long as each modifier is on its own line. Common modifiers include the following:
- Text size - Type in font-size: 30px; to set your text as 30-point font. Substitute any number that you want to use.
- Text color - Type in color: black; to make black text. Substitute any color that you want to use.
- Text alignment - Type in text-align: center; to center the text. You can also type left or right to align the text appropriately.
- Font used - Type in font-family: times new roman; to set your font as Times New Roman. You can also use fonts like verdana or georgia.
7
Style your first paragraph. Type in p1 { and press ↵ Enter, add a modifier and press ↵ Enter, and type in } and press ↵ Enter.
- The modifiers that you can use here are identical to the ones used for the header.
You can style any element by referencing its tag text and placing an open curly bracket ({), adding modifiers, and then closing the bracket (}).
On a new line below your last styling text, type in </style> and press ↵ Enter, then type in </head> and press ↵ Enter. Your CSS sheet is complete, meaning that you can now review and save it.

Part 3

Part 3 of 3:

Saving the Document

Download Article

1
Review your CSS stylesheet. Your CSS document will vary slightly, but it should look something like this:
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- body {
- background-color: lightblue;
- }
- h1 {
- font-size: 45px;
- }
- p1 {
- color: black;
- }
- </style>
- </head>
- <body>
- <h1>Hi!</h1>
- <p1>I am an iguana</p1>
- </body>
- </html>
It's in the top-left corner of the Notepad window. A drop-down menu will appear.
You'll see this near the bottom of the drop-down menu. Clicking it prompts a window to open.
Click a folder (e.g., Desktop) on the left side of the window.
A drop-down menu will appear.
It's in the drop-down menu.
7
Name your file with a ".html" extension. In the "File name" text field, type in your preferred document name (e.g., "index") followed by .html.
- For example, if you name your file "index", you'd type index.html into the field.
- If you create an external CSS file to style your web page, you will need to link it within the <head></head> section using the <link rel="stylesheet" type="text/css" href="mystyle.css"> tag of your HTML file. Additionally, make sure to save your CSS file with the .css extension.
8
Click Save. It's on the bottom-right side of the "Save As" window. This will save your HTML file with the CSS snippet included in an executable format, allowing you to open it in your preferred browser (e.g., Microsoft Edge, Google Chrome, Safari) or an HTML editor, instead of Notepad.

Community Q&A

Search

Add New Question

Question

What is the procedure to compile using a CSS file?

Community Answer

CSS files do not need to be compiled. You may just link it to your .html header.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 2 Helpful 32
Question

How do I create an account?

Community Answer

Notepad files will be saved to your computer itself, so no account is necessary.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 8
Question

How do I run the CSS file?

Community Answer

CSS files are stylesheets that extend HTML pages with styles. They are not able to be run, but must be specified as links in a tag.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 2 Helpful 11

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

When coding in HTML or CSS, it doesn't really matter how many spaces are between lines of code; you can press ↵ Enter several times after each line without changing the function of the program.

Thanks
Helpful 0 Not Helpful 0
Try indenting different parts of your CSS stylesheet to make finding elements easier. For example, you might indent the header code once and the paragraph code twice.

Thanks
Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Warnings

Always test your code before uploading it to a website or sharing it with other people.

Thanks
Helpful 6 Not Helpful 1
Do not include spaces in the file name, as spaces are not valid for HTML file names. This can cause issues when accessing the files.

Thanks
Helpful 0 Not Helpful 0