Sample CSS webpage Code

Sample CSS Code for Webpage:

Sample CSS webpage Code: Let us now try to understand CSS styling with a sample CSS code and HTML relevant to it. We shall see how a page is rendered and what effects are created using CSS. Below is the image of a sample webpage styled and coloured using Cascading Style Sheets. Please also note that CSS helps in the overall look of the webpage besides keeping it compact as a single unit.

Let us first look at our page witout implementing any CSS or styles. ‘My First Webpage’ looks something like this:

My First Webpage Plain

Our HTML code for the above was: 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 4.1 transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=”en”>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8” />

<meta name=”description” content=”My first webpage” />

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

</head>

<title>My First Webpage</title>

                <body></div>

<div id=”content“>

    <h1>

        My First Webpage

    </h1>  <hr>

     <p>  Creating webpages has not been made so easier in the recent past as to it is today; almost anybody can create websites rangin from smaller ones to greater ones. </p>

  <p class=“red”> Well this is the 2nd paragraph with red font, its class has been marked as ‘red‘</p>

<p class=”green“>There is 3rd paragraph having green colour text and class green </p>

<p class=”red“> Our fourth para, we have just repeated the class name ‘red’; whenever we call the class, it will display the properties associated with it</p>               

 <h2> It’s as simple as to try to make it. It’s HTML and the effects would be implemented using Cascading Style Sheets. </h2>

</div>

 </div> <!– End #wrapper —></body></html>

Let us add our CSS code to enrich and add beauty to our HTML document:

My First Webpage CSS

Let us dig into our CSS code now:

h1 {  color:#3a8a9e;

        font-family:arial;

        font-weight:bold;

        padding:7px 25px;

        text-decoration:none;

        text-align:left; }

body {width:100%;

           height: auto;

                margin:0px;

                padding:0px;

                height:auto;

       background:#ADD6AD;

        position: relative;

        text-wrap: normal;

                clear: both;}

#wrapper {

      position:relative;

                width:100%;

                margin:0px;

                margin-top:0px;

                margin-bottom:2px;

                padding:0px;

                height:auto;

                background:#9ACD32;}

p{color:blue;}

p.red{color:red;}

p.green{color:green;}

 

The above codes remain self-explanatory; however, if you do need some assistance leave us some comments and we would respond to it. 

 

Leave a Reply