Enhancing Web Pages

0
107
views
Web Pages
Enhancing Web Pages

A website that is professionally designed requires a lot more than just creating Web pages and linking them together. It is important that all the elements of a Web page are well formatted so that the look and feel of the
Web pages should be consistent across the entire website.

This can be implemented by using style sheets. In addition, you can apply transition and transformation effects on HTML elements to add visual effects.

This chapter discusses how to implement styles by using style sheets. In addition, it discusses how to apply transitions, animations, and transformations on Web pages.

Objectives

In this chapter, you will learn to:

  • Work with styles
  • Apply transitions, animations, and transformations

Working with Styles

The look and feel of a Web page depend upon the appearance and arrangement of HTML elements on it. You can format the HTML elements in your Web page to make it look appealing.

In addition, when a website is created, formatting and layout of all the Web pages should be consistent. For example, the formatting and placement of
the company header and the company logo need to be the same on the home page as well as on all the other Web pages of the website. To accomplish this task, Cascading Style Sheets (CSS) can be used.

CSS is a collection of styles that allows you to change the appearance of HTML elements on Web pages. It can be used to define a set of formatting options that can be used to format text and other HTML elements.

It defines a set of standard rules that provides better control over the page layout and appearance. CSS can be applied to specific HTML elements on a Web page, to all the elements on a Web page, or across all the Web pages of the website.

Therefore, CSS can be used to enforce consistent display standards across all the Web pages of the website.

Identifying the Syntax of CSS

As a Web developer, you need to ensure that your website is visually appealing. For example, you want to color the text, background, and hyperlinks on the website.

Moreover, with multiple Web pages and graphics, you want to ensure consistency in the formatting and layout of Web pages. To achieve this, you can implement CSS to stylize Web pages and text on the website.

CSS allows the creation of one or more rules for defining the style characteristics of HTML elements. Each rule consists of the following parts:

1. Selector: A selector specifies the HTML element that you want to style. You can have one or more selectors in a rule.
2. Declaration Block: A declaration block follows the selector in a CSS rule and is enclosed in curly braces.

The following syntax can be used to define a CSS rule:

selector
{
//Declaration Block
property: value;
}

For example, consider the following code to create the HTML document:

<!DOCTYPE HTML> <HTML> <BODY> <H1>Welcome to BookYourHotelwebsite.</H1> <H2>This site is very user friendly.</H2> <H1>You can book your hotel while sitting at home.</H1> </BODY> </HTML>

Now, you want to display the text inside the <H1> tag in italics and red color. In addition, the text inside the<H2>tag should be displayed as bold. You can perform this task by defining CSS rules using the following code snippet:

h1 {color:red; font-style:italic;} h2 {font-weight:bold;}

In the preceding code snippet, you have created two rules to stylize theH1 and H2 selectors.

The color property is given the value, red, and the font-style property is given the value, italic, in the first rule. Whereas, in the second rule, the font-weight property is given the value, bold.

The preceding code will display the text inside the H1 and H2 selectors, as shown in the following

figure.

Web Pages
The Styles Applied on the Body Selector

LEAVE A REPLY

Please enter your comment!
Please enter your name here