Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Learn how to work with CSS

In this article we will learn how to work with Cascating Style Sheet.

The World Wide Web Consortium (W3C) created CSS as HTML tags like <font> that were created in HTML 3.2 specification made it very difficult to design very large website as editing these elements in every page became a long and expensive process. CSS stands for cascading style sheet; it is used to define different displaying of HTML elements. These are basically used for storing styles in external style sheets, which can be attached to an HTML element. The use of style sheet can save a lot of time. These style sheets were not in HTML versions before HTML 4.0. Adding CSS to HTML separated document content (HTML) and document display (CSS).

CSS files are saved with .css extension. It allows you to place all formatting of the website in a single style sheet and attach it to the HTML element or just place it in the HTML document inside the tag . One doesn’t have to change every page whenever a design is altered, by simply changing one file this can be done very easily in style sheets.

Basic syntax of css:

CSS uses rules to define the style of an element. A rule is of two folds. First is the selector and second is the set of declaration placed inside “{}”.

Listing 1: Basic Syntax of CSS

<p>
{
font-family:"Calibri";
font-size:26px;
} 

Here “p” is the selector; selectors are nothing but the HTML elements one wants to style. Font-family and font-size are the properties of the tag defined and Calibri and 26px are the values.

Style sheets are defined under two selectors. A selector is the instruction in CSS that tells a browser what all elements are to be selected for styling. In CSS one can specify one’s own selector. These selectors are called “id” and “class”. Here the “id” selector is used to define style of a single unique element and “class” selector can be used to define style of a group of elements. Id selector is defined with a “#” and class selector is defined with “.” (a dot).

Listing 2: Example of id selector


#idexample
{
font-family:"Calibri";
font-size:26px;
}

Here selector is id and these set of styles can only be applied on a unique element by using the HTML attribute id.

Listing 3: Example for class selector


.classexample
{
text-align:center;
font-family:"Calibri";
font-size:26px;
}

Here selector is class and this set of style can be applied on a group of element by using the HTML attribute class.

External style sheets are very useful when applied on many pages. This is how it is attached in HTML.

Listing 4: External style sheets on the Web pages

<head>
<link rel=”.stylesheet” type=”text/css” href=”style.css”>
</head>

Here, “rel” stands for relationship, “type” defined the nature of the file being attached and “href” gives the name of the file being attached. This same style sheet can be attached to a number of pages.

Internal style sheet

In internal style sheet we do not attach a style sheet defined elsewhere, we just define it in the HTML page only.

Given below is an example of an internal style sheet.

Example of Internal Style Sheet

Figure 1: Example of Internal Style Sheet

Listing 5: Creating Internal Styling Sheet

<html>
<head>
<style>
body
{
background-color:#E6E6E6;
}
h1
{
color:blue;
text-align:center;
}
p
{
font-family:"Calibiri";
font-size:26px;
}
</style>
</head>

<body>

<h1>How to make a style sheet</h1>
<p>This is a paragraph.</p>

</body>
</html>


  • body{}: Style elements defined for the body tag will have their effect on the body tag.
  • background-color:#E6E6E6; This code defines the background color of the HTML page. #E6E6E6 is the color defined which is gray.
  • h1{}: Style elements defined for the h1 tag will have their effect on the body tag, anywhere it is used in the whole document.
  • color:blue; Color style defines the color of text given in <h1> tag. 147 color names have been defined in HTML and CSS color specification which can be used either by name or by using their hex value equivalent. In this article we have displayed both the ways of selecting colors.
  • text-align:center; This style places the text in <h1> tag in the center of the page.
  • p{}: This style element stores the style created for the <p> tag of HTML wherever it is used in the document.
  • font-family:"Calibri"; This style element defines the font of the text as Calibri.
  • font-size: 26px; This style element defines the font size fo the text as 26 pixels.

External style sheet

The pages can also be created using an external style sheet.

Using external Style Sheet

Figure 2: Using external Style Sheet

Creating External Style Sheet

Listing 6: HTML code

<html>
<head>
<link rel="stylesheet" type="text/css" href="css2.css">
</head>
	
<body>

<h1 id="unique">How to make a style sheet</h1>
<p class="para">This is a paragraph.</p>

</body>
</html>

Listing 7: Stylesheet code

body
{
background-image:url(Purple-Rose-Flower-6.jpg);
}
.para
{
font-family:"Calibri";
font-size:26px;
color:white;
}
#unique
{
text-align:center;
color:white;
}


<head>
<link rel="stylesheet" type="text/css" href="css2.css">
</head>

Inside the head tag we have to specify the style sheet which is used in the HTML page.

Here, “rel” stands for relationship, “type” defined the nature of the file being attached and “href” gives the name of the file being attached, which in this example is css2.css.

<h1 id="unique">How to make a style sheet</h1>

Heading tag <h1> is defined using a id selector named unique which is defined in the “id=unique” attribute of the tag.

<p class="para">This is a paragraph.</p>

Paragraph tag <p> is defined using class selector named para which is defined in the “class=para” attribute of the tag.

body{}

This tag is used for defining the style elements of the tag of this HTML page.

background-image:url(Purple-Rose-Flower-6.jpg);

In this example we have used an image as a background. Background-image sets image as the background and the contents of the brackets placed after “url” contains the address or url of the image used as background.

.para
{
font-family:"Calibri";
font-size:26px;
color:white;
}

.para is a class defined in css. Para is the name of the class and “.name” is the format used for defining class in a css document. This class .para can be used again to define other tags and also be used in other pages by attaching the same style sheet.

Font-family defines the font of the text used.

Font-size defines the size of the text used, in pixels.

Color defines the color of the text. (Note that here we have used name of the color and not its hex value equivalent.)

#unique
{
text-align:center;
color:white;
}

Unique is the name of the id selector used. “#name” is the format to define the id of the element. It defines a set of unique style which can be used only for a single tag or element.

Text-align specify the alignment of the text, which is center here.

Color white defines the color of the text.

Conclusion

In this article we looked at the way to come up with a style sheet making use of CSS. See you next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login