Page 61 - Touchpad_Plus_V3.2_Class 6
P. 61
Viewing a Web Page
After creating and saving an HTML document, you need to open it in a web browser to view it. To
open an HTML document in a web browser, open the folder in which you have saved the HTML
document and double-click it. The web page opens in your default web browser window.
Viewing a web page
INTRODUCING CSS3
CSS stands for Cascading Style Sheets. It is used for designing or styling a web page. It handles
and describes how an HTML web page will be presented on a web browser. It helps save a lot of
time, as one design layout can be used to create multiple web pages. The latest version of CSS
is CSS 3.
CSS comprises style rules that are interpreted by the web browser and then applied to the
corresponding elements in HTML web page. Syntax to create a style in CSS is:
selector{property1:value1; property2:value2; … …}
Where, selector refers to an HTML tag to which a style will be applied like <BODY>. The property1
is a property of CSS that can be used to create a style and value1 is the valid value of the property.
A semicolon should be used at the end of the property-value if more than one property is used.
However, you can skip the semicolon if only one property is used.
All the properties and their values are enclosed within curly braces. For example, if you want
to create a style that fills a background colour in a web page, then you need to use the
background-color property of CSS in the following manner:
body {background-color:green}
In the preceding code, body signifies the <BODY> tag, background-color is the property and
green is the value of property that will change the background colour of the web page to green.
Using CSS Style
There are three ways to use the CSS styles in HTML document which are:
Inline style sheet Internal Style Sheet External Style Sheet
Inline Style Sheet
An inline style is used to apply a unique style to a single element. It allows you to create and
apply a style directly to the element. Syntax to create an inline style is:
<element style = "property1:value1; property2:value2; … ….">
Introduction to HTML5 & CSS3 59

