First Step to learn CSS Styles

In this article you will learn the application of Internal style sheets for giving dynamic appearance to the web pages. The Style sheets are a collection of styles popularly used for applying uniform formatting to the web site.

Styles is a term that denotes the combination of different fonts, colors, back-grounds etc. that can be applied to the web contents to highlight some important information and to make the web site as a whole more attractive.

The Style Sheets properly known as Cascading Style Sheets (CSS) is a style language developed and maintained by World Wide Web Consortium (W3C). Its main purpose is to apply dynamic layout and appearance to the documents written in a markup language. As said earlier, a style sheet contains several styles. Cascade here means application of more than one style onto an HTML element simultaneously.

In the Style sheet, the styles are written in the form of rules where every rule is a combination of a selector and declaration.

Let us see one rule:

H1{color:red;font-family:arial;margin:1.0in}

Above rule is a combination of a selector and declaration. The selector is the name of the HTML element to which declaration is applied i.e. H1 element in above rule is a selector. The declaration is a collection of property and value pairs separated by colons. Like in above rule, color is a property and red is its value. If there is more than one declaration in a rule, they are separated by ; (semi colon). The list of style properties in declaration are bracketed by { and }.

Syntax of rule:

selector { attribute: value, value…. attribute: value, value… etc.}.

Note: In the HTML file, we can define our own selectors with the help of ID and Classes.

The Cascade Style Sheets (CSS) can be used either internally or externally i.e. they can be either embedded inside an HTML file or can be written in a separate file that is then inked to the HTML file.

Using Internal Style Sheet to apply style to H1 element

The style sheet can be written internally within the HTML file or externally in a separate file. The styles written in internal Style sheet can be applied to only the same HTML file in which it is included. For internal Style Sheet, you need to simply place the CSS code (rules) within the <head></head> tags of the HTML file to which we want to apply the styles as shown below :

<style/css>

H1{color:red;font-family:arial;margin:1.0in}

</style>

The rule is a collection of property and value pairs and we can use any number of properties in a rule. In above example we have used three properties: color, font-family and margin but we may use any. We will just see the usage of these properties.

We see that the style rules are written between the <style> and </style> tags in case of internal style sheet. In above statement, we have used a single rule consisting of combination of selector and declaration. The selector is H1 as we want to apply style to this element(s) of the HTML file  and the declaration is color:red;font-family:arial;margin:1.0in. The declaration consists of three sets of properties and their values though we can use any number of property and value pairs. The color property will make the H1 element to appear in red color, font-family property will set the font of the H1 element to arial font and the margin property will make the H1 element to appear at the distance of 1 inch from the top and left border of browser window .

A compete HTML file with the internal Style Sheet that applies style to H1 element may appear as :

<html>

<head>

<style type=text/css>

H1{color:red;font-family:arial;margin:1.0in}

</style>

<title>Styles Examples</title>

</head>

<body>

<H1>Believe in God</H1>

</body>

</html>

The thing to remember is that the style rules have to be written between  <style> and </style> tags. To see how H1 element appears on application of style, we need to open the HTML file with the help of a browser and we will see that the text enclosed in between <H1> and </H1> tags appears as shown in Figure 1 with all the properties: color, font-family and margin applied to it.

Style applied on H1 tag

Figure 1 Style applied on H1 tag

One thought on “First Step to learn CSS Styles

Leave a Reply

Your email address will not be published. Required fields are marked *