How to Make a CSS Stylesheet in Notepad

Updated on November 26, 2017
Msmillar profile image

MsMillar has been a writer on HubPages for five plus years. She enjoys the freedom Hubpages allows for her to explore her creative side.

HTML to CSS file to Screen

With an inline CSS code the browser reads the HTML, and when it comes upon the line with the CSS code the browser applies the instructions.
With an inline CSS code the browser reads the HTML, and when it comes upon the line with the CSS code the browser applies the instructions. | Source

What is CSS

CSS stands for cascading style sheet. A CSS code is used to style an HTML document. When you create a website a browser reads the HTML file and any CSS code, javascript, etc., written within the HTML. It then displays it according to what those codes tell it to do.

Sometimes the CSS code is written directly into the HTML. This is called an internal style sheet. The code is written between the <head> and </head> tags using the <style> tag.

Other times the CSS code will affect only a specific phrase, word or paragraph. This is called an in line style sheet. It is written on the same line that it is to affect using the <style> tag and the attribute that is to be applied.

When the website has several pages in it an external CSS is used. This is the type of style sheet we will go over today. The external style sheet can be applied to several HTML documents. When the CSS code is altered it will affect all the pages. An entire website can be formatted from one style sheet. This saves a lot of time, otherwise you would have to modify every single page of a website.

By entering the <link> tag the browser reads the file you have entered a link to, and applies it across all the pages of the website.

The <link> tag is a pointer that is placed inside the <head> and </head> tags of the HTML document.

Any text editor can be used to write a CSS style sheet. Today we will use Notepad.

HTML With External Style Sheet

This HTML code points to an external stylesheet in folder "stylesheet.css".
This HTML code points to an external stylesheet in folder "stylesheet.css". | Source

HTML Basics

If an external link is placed after the internal style sheet in the HTML <head> section the external will take precedence over the internal style sheet

Anything between the <> and the </> is called an element.

When you write an html document you must indicate to the browser where the beginning of each element is and where the end is. This is done by entering <> at the beginning of an element and this </> is at the end.

The following HTML document has some of the most common elements you will find. You will get to know them very well writing html documents. Using Notepad we will create a webpage and link an external CSS to it.

First we will create the basic HTML document and view it on your browser.

Click start -> All Programs -> Notepad

Enter the following code:

Plain HTML Document

<!DOCTYPE html>
<html>
<head>
<h1>Creating Your Own Webpage is Inspiring<h1>
<body>When you open your browser and type in the location of your HTML document, your page pops up just like a webpage because it IS 
a webpage!</body>
<p>The various tags  you put into your HTML document will affect how your webpage is displayed.  It's really up to you how creative you 

want to be.</p>
</body>
</html>

Tags Defined

After you have written the HTML code save it somewhere like your desktop for easy retrieval. Use the file extension .htm or .html.

The code you just entered tells the browser, line by line, what to display.

The first line is important because it tells the browser what type of document it is reading.

Entering <!DOCTYPE html> tells the browser it's an HTML document.

The <html> tells the browser, here's the start of the web page. </html> tells it, this is the end of the web page.

The <body> tag tells the browser that this is what I want to appear on the screen. The body tag ends with </body> tag.

Entering <h1> tells the browser this is the first heading. Indicating number one will make the heading appear larger than the rest of the text. H2 is smaller than h1, h3 is smaller, h4 is even smaller and so on.

Paragraphs start with <p> and end with </p>.

Now open your browser. I will be using Internet Explorer.

At the top of the page, on the left, click -> File -> Browse, and browse to where you saved the HTML document. Click on the document and press OK. The page is now displayed in your browser!

Plain HTML
Plain HTML | Source

Create a CSS File

Now create a new Notepad document. Click Start ->All Programs -> Notepad. This is going to be the CSS file that we put a link to.

Enter the following code:

body
{
background-color:yellow
}
{
font-family:"Georgia";
font-size:30px;
}

Click Save and name it something like "mystyle" (minus the quotes). Save it as a .css file type.

Link the Stylesheet

Change the Color of the Text

Now we will add a link to the .css file you just created in the HTML document that will change the background color, the font type and the size of the font displayed.

Locate your HTML document and open it.

Add the following <link> to the HTML after the <head> section. (Insert the name in which you saved your .css file if it is different than the suggested mystyle.css): <link rel="stylesheet" type="text/css" href="mystyle.css">

This tells the browser you're using a style sheet and it is in the format of text/css and to retrieve it in "mystyle.css"

So now your HTML looks like the code below.

HTML With Link to Stylesheet

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<h1>Creating Your Own Webpage is Inspiring<h1>
<body>When you open your browser and type in the location of your HTML document, your page pops up just like a webpage because it IS  a webpage!</body>
<p>The various tags  you put into your HTML document will affect how your webpage is displayed.  It's really up to you how creative you  want to be.</p>
</body>
</html>

Check Out the Results

Save your HTML with the same name as you chose before and click ok if it asks to overwrite the current one.

Open up your browser click on File -> Open -> Browse-> and browse to your HTML file and click on it it, click ok and your page should appear. It should look similar to the picture below.

Just changing the name of the color in your .css file will change the output and the same goes for the font and size of the font.

HTML Document With Notepad Stylesheet Linked
HTML Document With Notepad Stylesheet Linked | Source

Questions & Answers

    © 2012 Joanna

    Comments

    Submit a Comment

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://turbofuture.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized. (Privacy Policy)
    CloudflareThis is used to quickly and efficiently deliver files such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisements has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)