How to make a style sheet

Today we are going to write and save our first CSS file. Let’s begin by opening a text editing program.

If you are on a Microsoft Windows PC open the program named Notepad (hold down the Windows Key on your keyboard and press R, then type notepad and press enter).

If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

Let’s Write Our First Bit of CSS

Let’s imagine we have a simple web page with a heading, and we want the heading to be orange and center aligned. Add the following code into your new blank text document:

h1 {
color: orange;
text-align: center;
}

Hopefully, you remember this code from our previous lesson. The task for today is to save our CSS file and link it to an HTML page.

Step 1: Saving The CSS File

Create a new folder on your desktop (or another location you prefer) and name it CSS-Test. Now, back in your text editing program save your document as “style.css”.

How to Make a Style Sheet

Linking CSS File to an HTML Page

Our new CSS file is worthless if we don’t apply it to a web page. Let’s create a quick HTML page for this lesson. Create a new blank file in Notepad (or TextEdit) and add the following code:

CSS-Test

This is box one.

This is box two.

If you’ve read my first few HTML Lessons, then this code is at least somewhat familiar. I’ll explain it as the lesson continues; for now save this document in our “CSS-Test” folder and name it “index.htm”.

How to Make a Style Sheet

Linking the Two Files Together

We still need to tell the web browser to load our “style.css” file when the “index.htm” page is viewed. Add the following code to “index.htm” directly above our closing tag:

This line of code tells our browser that we want to link a Style Sheet, that it’s located in the same folder as our HTML page, and that it’s named “style.css”.

Now, when you view “index.htm” page in a web browser you should see a centered, orange heading:

How to Make a Style Sheet

Let’s Style Those Two Boxes

If you look at the code of our HTML page, you’ll see two elements. We added an HTML attribute of “id” for these two elements and assigned them values of “box-one” and “box-two.” We can use an element’s “id” to select and style it with CSS. For example, let’s make the first box gray, and the second box yellow. Add the following code to your CSS file, directly below our original

rule:

#box-one {
background-color: gray;
}

#box-two {
background-color: yellow;
padding: 10px;
}

When an element has an “id” we can access it with a CSS selector by placing a pound sign (#) in front of it’s id value. So to select the first element we simply type “#box-one” and then begin our CSS Rule.

Our New Fancy Boxes

When you save your CSS file and refresh our HTML page in a web browser you should see something very similar to this:

How to Make a Style Sheet

Yay For Style

It may not be beautiful, but we styled our first HTML page with CSS! Let’s recap your CSS knowledge so far. You know:

In our next lesson we’ll continue learning about CSS Selectors and the different ways to target specific elements with your CSS.

If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and join 4,000+ others who have learned pro-level HTML, CSS, and responsive design.

Brad’s Web Design Course Go from beginner to pro with HTML & CSS

How to Make a CSS Stylesheet in Notepad

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 tags using the 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 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 tag the browser reads the file you have entered a link to, and applies it across all the pages of the website.

The tag is a pointer that is placed inside the tags of the HTML document.

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

How to Make a Style SheetWith 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
How to Make a Style SheetThis HTML code points to an external stylesheet in folder “stylesheet.css”. | Source
(click column header to sort results)

WHAT IT WILL DO ON YOUR WEB PAGE  
The open and close brackets used on elements to indicate to the browser this is the beginning and this is the end of the specified elements. IE what you want to see on your web page and how you want to see it. The starts the statement and closes it. Here you have told the browser this is the beginning of the body. When you have entered what you want in the body section you MUST close with the .
The opening and closing paragraph tags. This will display as the paragraph section. Write your content between these brackets.

,

,

up to

Use these tags to indicate which heading you want displayed. The number 1-10 indicates which size heading you desire.

being the largest.

Is the largest heading

.

Is the next size down

.

Is even smaller

And so on.

A declaration specifies the property and the value of an item how you want it to show up. {color:red: font-size:12px;} or {font-style:italic:}
Colon : and the Semicolon ; Your declaration property MUST have a : (colon) after it. The value MUST have the ; (semicolon) after it as shown. {color:red; font-size:12px;}
These are the start and close style tags. They tell browsers how you want the HTML display to look. This is where you would use an Internal or In-line style.
These are the start and close link tags. You would place your link to an external style sheet between these tags. . This links to an external style sheet with the name and extension “mystyle.css”

How to Create a Style Sheet

Style sheets open up a whole new world of customization for HTML. They give you control over characters, words, and lines, and allow you to change things such as the alignment of text, margins, padding, color, and font style. Once you get the hang of it, you can apply fancy tricks to your text, such as mouseover effects.

If you're ready to take the plunge into CSS, CoffeeCup HTML Editor is ready to make things as easy as possible.

You will notice that there are two options under the CSS button located on the Code Editor Toolbar: Style Sheet Wizard and Style Sheet Attribute Wizard.

The Style Sheet Wizard can be used for creating style sheet tags from scratch or editing existing style sheets. If this is your first time creating style sheets, use this option.

Use the Style Sheet Attribute Wizard if you have already created a style sheet and just wish to create a style.

Once you have the wizard open, you can specify the format you want that particular style to take.

If you are editing a preexisting tag, you don't have to do anything special — just reference the tag as you normally would, and the style you have specified will be applied.

For example, what if you wanted all

tags to be underlined? To do this, you would open the Style Sheet wizard, select the radio button next to Apply Style Sheet to HTML Tag, and then choose H1 from the drop-down menu. Next, click OK. In the window that appears next, select underline from the Decoration drop-down menu.

And that's it! From now on, all your

tags will automatically be underlined.

But what if you only wanted some of your

tags to have a special appearance? Applying a style sheet with the method described above won't work. Instead, we must define our own style. To do this, enter the Style Sheet Wizard again, and then select the radio button next to New Style Sheet Class. Click OK, and in the window that appears, modify the style to fit your preferences. For this example, we will create two unique style sheets, named first and second. first is blue Algerian text, and second is red Britannic Bold text.

Once you've exited the Style Sheet Wizard, you can reference one or both of these styles in your page using a class=””

HTML Styles

In this tutorial you will learn how to apply style rules to HTML elements.

Styling HTML Elements

HTML is quite limited when it comes to the presentation of a web page. It was originally designed as a simple way of presenting information. CSS (Cascading Style Sheets) was introduced in December 1996 by the World Wide Web Consortium (W3C) to provide a better way to style HTML elements.

With CSS, it becomes very easy to specify the things like, size and typeface for the fonts, colors for the text and backgrounds, alignment of the text and images, amount of space between the elements, border and outlines for the elements, and lots of other styling properties.

Adding Styles to HTML Elements

Style information can either be attached as a separate document or embedded in the HTML document itself. These are the three methods of implementing styling information to an HTML document.

  • Inline styles — Using the style attribute in the HTML start tag.
  • Embedded style — Using the Similarly, you can use the @import rule to import a style sheet within another style sheet. @import url(“css/layout.css”);
    @import url(“css/color.css”);
    body {
    color: blue;
    font-size: 14px;
    } Note: All @import rules must occur at the start of the style sheet. Any style rule defined in the style sheet itself override conflicting rule in the imported style sheets. The @import rule may cause performance issues, you should generally avoid importing style sheets.

How to Create a Simple CSS Stylesheet Using Notepad

  1. 1

  2. 2

    Indicate the document type. Type into Notepad, then press ↵ Enter to start a new line.

  3. 3

    Add the HTML tag. Type in and press ↵ Enter.

  4. 4

    Enter the BODY tag. Type in and press ↵ Enter. You can now begin entering your webpage's information.

  5. 5

    Add a header. Type in

    TEXT

    , 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

      Welcome!

      into Notepad.

  6. 6

    Add text below the header. Type in TEXT, 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 I am an iguana into Notepad.
  7. 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

    tags around it, and the second paragraph will have tags.

    • Make sure that you're continuing to press ↵ Enter after each line of code.
  8. 8

    Close the BODY and HTML tags. Once you've entered your last line of code, type in on its own line and press ↵ Enter, then type in . Your document is now ready to be styled with CSS.

  1. 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]

    • element tag { (for example, p {)
    • modifier: property; (for example, font-size: 20px;)
    • modifier: property; (for example, color: black;)
    • }
  2. 2

    Place a space between the and tags. These should be near the top of the page.

  3. 3

    Enter a HEAD tag. Type in and press ↵ Enter. Your CSS sheet is complete, meaning that you can now review and save it.

  1. 1

    Review your CSS stylesheet.

So You Want A Style Sheet, Huh?

WEBINAR:On-Demand

Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

     First things first: This tutorial
is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.:
Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are
cross-browser models thanks to Netscape's version 4.x including the commands.
This is a general overview of Style Sheets. You'll find more specific Style Sheet elements explained in the Positioning, Class & ID, and DHTML tutorials.

…use these to jump around or read it all.

     Wouldn't it be nice if you could
say to all browsers that enter your page – “This is how I want
you to handle my text.” You could make all H3 commands arial
font.

You could make all paragraph commands indent a half inch. You could specify a distance between your lines! You could ask
for the world on a string! You wouldn't get it, but you could
ask.

It's the other stuff I'm talking about.

     Explorer 3 and above and Netscape 4.0 (and all those to come)
offer you more control through the use of what are titled
“Style Sheets”. It's actually a novel concept. Instead of
writing font size, weight, margin commands, etc, etc, again and
again…you write them once and the whole page feeds off of that
one master list, that one style sheet.

Style Sheets? Cascading Style Sheets, or CSS?

HTML – Style Sheet

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).

Example

First let's consider an example of HTML document which makes use of tag and associated attributes to specify text color and font size −

Note − The font tag deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will work with an example using the font tag.

Hello, World!

We can re-write above example with the help of Style Sheet as follows −

Hello, World!

This will produce the following result −

You can use CSS in three ways in your HTML document −

  • External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML tag.
  • Internal Style Sheet − Define style sheet rules in header section of the HTML document using tag.
  • Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.

Let's see all the three cases one by one with the help of suitable examples.

External Style Sheet

If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using tag.

Example

Consider we define a style sheet file style.css which has following rules −

.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}

Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document −

This is red

This is thick

This is green

This is thick and green

This will produce the following result −

Internal Style Sheet

If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS file.

Example

Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using tag −

This is red

This is thick

This is green

This is thick and green

This will produce the following result −

Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in element.

Example

Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.

This is red

This is thick

This is green

This is thick and green

This will produce the following result −

Be the first to comment

Leave a Reply

Your email address will not be published.


*