Introduction
This chapter demonstrates about the XHTML styles which are used to style the document by defining the styles following are the concepts are covered in this chapter.
- Inline Styles
- External Style Sheets
Description
In XHTML styles will works by allowing user to accomidating rules with the elements which are present in web page. in order to insert the styles into the web page which is comprised of two sections which are displayed in below image.
In the above image,
Selector
Selector demonstrates the declaration applies to which elements. User can also apply the declaration to multiple elements by using the commas.
Declaration
The declaration , which sets how the elements should be referred to the selector and styled.
Property
Which is the selected elements property those user want to effect.
Value
Which is the specification for the property.
In line styles has several style attributes in which some are listed below.
Background Color
In order to give the background coloring to the elements user need to use the background-color property the code is as shown below.
[html]
<!DOCTYPE html>
<html>
<body style="background-color:purple;">
<h1>SPlessons</h1>
<p>1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Fonts
In order to give the font styles to the html elements user need to use the font-family property as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">SPlessons</h1>
<p style="font-family:calibri;">XHTML.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text Color
In order to give the coloring to the text user need to use the color property as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">SPlessons</h1>
<p style="color:purple;">XHTML.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text alignment
In order to align the text in horizontal alignment user need to use the text-align property as shown in below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Splessons</h1>
<p>XHTML.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text size
font-size is utilized to give the text size for an html element the code is as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">SPlessons</h1>
<p style="font-size:150%;">XHTML.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Background Color
- Fonts
- Text Color
- Text alignment
- Text size
Description
User can make the stylist document by using the external document also by using the external style sheets. There are several reasons to use the style sheets in which some are listed below.
Which repeat the same style rule for each and every page.
- User may change the style of a few pages by modifying only the style sheet instead of every individual page. which implies it is simpler to upgrade your web site in the event if user need.
- Once user has the downloaded CSS style with the first page then it should be applicable for all the remaining pages because the browser should have the copy of the CSS style sheet.
- The style sheet will behave like a blueprint to the multiple authors to get the same style to the different documents.
- A style sheet can be imported from the other style sheets and use for the document.
Key Points
- Text size should be given in percentages.
- font-family is used for different text fonts.