Cascading Style Sheets

Introduction

It was set up as a simple way to display text in a browser, rather like a word processor displays text on a page. Tags were added over the years in order to add a bit of color and life into the basic white page. To align the things you have to resort to complicated tables to force the alignment. A Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into your web design

As like a Microsoft Word you need to tell the word Processor how you want to format your text. For example heading should be 25 point Times, Bold, and colored green. If you have 20 headings in document you have to select bold , color option for each heading.

Using straight HTML we can also do that and there is no way to apply the same formatting in a single tag. Cascading change the whole block of text with a single tag.

For example, in HTML, if you want to set the first paragraph of every page to bold and italics, you’d have to do this for every single paragraph that needs it:

css-introduction
css-introduction

The new code, I’m sure you’ll agree, looks much cleaner. And if you decided that the text colour should be blue, you can just make one change to your Stylesheet code and all the first paragraphs of your pages would change

A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed to tell the browser to stop formatting the style

css-introduction2
css-introduction2

Your stylesheet code then goes between the two Style tags. Here’s a style that can change text blue:

Although you may not understand the code layout yet, the point is that you can add other styles to the one above that we have called Font1. We can add a bold style and a size style:

css-style-tags
css-style-tags

Now the part of the code where we applied the style (P Class = Font1) will have its text updated. We don’t have to make any changes at all to the P part of the code

 

Rules – There are three parts to a Rule:

The Selector

An HTML Selector is the text part of an HTML tag. The complete paragraph tag is. So its Selector is just P’ in other words, strip the angle brackets off and you get the HTML Selector.

A Class Selector is one you set up yourself, to be used anywhere on your page. The Font1 from our STYLE example above was a Class Selector. We picked the name ourselves and then applied the style to some text on the page

An ID Selector is similar to a Class selector, but you use them to identify a particular element, a text box element on a form, for example.

 

Property and Value

Once you have set up your Selector, you then define the Properties and Values for that selector.

The Property for the selector is the thing you’re trying to change. Examples are: Font, Color, Background, Margin, Text

The Value for the selector is the new setting for the property. For example, for our COLOR property, we can set it to a value of an actual color (red, blue, yellow), or a colour code (#FFFF00, #000000).

css-property-value
css-property-value

Conclusion

A CSS rule has three parts, a Selector, a Property, and a Value

The Selector can be a HTML selector, a Class selector, or an ID selector

css-selectors
css-selectors

You separate the Property and Value from the Selector by enclosing them in curly brackets, a left curly bracket first { and a right curly bracket to close the rule }

A Property is separated from a Value by a colon ( : )

If you’re using more than one pair of properties and values for the same selector, separate them with semi-colons ( ; )

 

Embeded Style

 

Inline Style Sheets

You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed elsewhere. Here’s an example of an Inline style:

css-inline-style
css-inline-style

To place a style in a HTML tag, do the following:

  • Type the Tag you want to change
  • Next, type a space and then the word STYLE
  • Type an equals sign ( = ) after the word STYLE
  • Type a double quote mark
  • Type the Property followed by a colon
  • Type the Value
  • Type the another double quote mark
  • Type the right angle bracket ( > ) of the HTML tag

Embedded Style Sheets

  1. Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE attribute, if you want. But modern browsers don’t need it

    css-embeded-style
    css-embeded-style

 

Then in between the two STYLE tags, you would type your CSS Rules

 

External Style Sheets

Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it all in a separate text file. You then ‘tell’ the browser where the text file is. The text file (along with its code) is then treated as though it were in the HEAD section. You set up an External stylesheet like this

link_css_file
link_css_file

Font and Styling

css-styling1
css-styling1
css-styling2
css-styling2