This post is helpful for newbies who want to start building simple HTML pages and wish to decorate the page with different styles.
Let us understand what is CSS?
CSS is an acronym for Cascading Style Sheet which describes how your text or HTML tags written in a markup language should be displayed.
To use CSS in HTML pages you need to link your style sheet elements with an HTML page. This can be done in 3 different ways.
- Inline styles: Inline styles are directly written within the tag on the document. You can see the inline styles used in this document.
- Embedded styles: Embedded styles are embedded in the head of the document.
- External styles: As the name explains the external styles are linked from an external CSS file. You can see the external styles used in this document.
<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml"> <head> <title> Your Page Title </title> <!--Linking your CSS file placed in the same directory Style.css file - CSS file is alwasys included in the header section of your code--> <link rel = "stylesheet" type = "text/css" href="Style.css"/> </head> <body> <h3> H3 tag demonstrates the text size of a small header</h3> <!-- To decorate the below text, the class "p.major" definded in the "Style.css" has been used here--> <p class = "major"> Welcome you all for the workshop on "How to use CSS". </p> <!-- To decorate the below text, the class "p.major" definded in the "Style.css" has been used here--> <p class = "minor"> Hope you will like this session and you will try it yourself. </p> <h2> Introduction </h2> <!-- H2 tag demonstrates the text size of a medium header --> <h3> 1.The Basics of WEB </h3> <!-- The below section explains on how to use Ordered list in your HTML pages--> <ol> <li> Introduction to HTML </li> <li> Introduction to CSS </li> <li> Introduction to XML </li> </ol> <!-- The below section explains on how to display your data in a tabular format--> <table border = "10px"> <!-- The border defines the width of the table border/boundery--> <caption> Schedule </caption><!-- Table caption --> <tr> <th>Sessions </th><!-- Table Header--> <th class = "red"> <font color= 'blue'> xhtml </font> </th> <th class = "orange"> CSS </th> <th class = "blue"> XML </th> </tr> <tr> <th> Thursday</th> <td> 8-9 </td> <td> 10-11 </td> <td> 12-11 </td> </tr> <tr> <th> Friday </th> <td> 8-9 </td> <td> 10-11 </td> <td> 12-1 </td> </tr> <tr> <th> Saturday </th> <td> 8-9 </td> <td> 10-11 </td> <td> 12-1 </td> </tr> </table> <p> <font color ='blue'> Now it is </font> <!-- Styling text within paragraph tag --> </p> <p class = "one">Now is the time for all good web programmers to learn to use stylesheets. <br> <!-- Break tag introduce a line break--> </p> <!-- Using span tag for inline styling--> <p>Lab session are held in the <span class = "spanred"> afternoon.</span> </p> </body> </html>
/* Styling text using the class - This class is referred in the above HTML*/
p.major {
font-size : 18pt;
font-style : italic;
font-family : 'Times New Roman';
}
p.minor {
font: 10pt bold 'Courier New';
}
/* Styling H2 tag - You can adjust the text length from here*/
h2 {
font-family : 'Times New Roman';
font-size: 20pt; font-wieght:bold
}
h3 {
font-family: 'Courier New';
font-size :16pt;
color :red;
}
/* Styling TABLE - You can decorate your table from this style sheet which is applied to all the tables referred through this style sheet however, you can override this styling through inline style sheet*/
table {
border-top-width: medium;
border-bottom-width: thick;
border-top-color: red;
border-bottom-color: blue;
border-top-style: dotted;
border-bottom-style: dashed;
}
/* Styling Paragraph tag */
p { &amp;nbsp;
border-style: dashed; border-width: thin; border-color: green;
}
p.one {
padding: 0.2in;
background-color: #cococo;
border-style: solid;
}
th.red {color: red}
th.orange {color: orange}
th.blue {color: blue}.spanred {font-size: 24pt; font-family: Arial; color: red;
}
Just save both files in a common directory with given names. Now open your HTMLPage.html. If you cannot open it, you can just drag it into any web browser. You should be able to see the page as given shown in the below picture.
Output:
