CSS Examples Collection

Ad Code

CSS Examples Collection

RK Tutorials September 29, 2023

 


CSS Examples

1. Background image and text positioning using CSS.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            
body

{

margin-left:200px;

background:#5d9ab2 url('img_tree.jpg') no-repeat top left;

}



.container

{

text-align:center;

}



.center_div

{

border:1px solid gray;

margin-left:auto;

margin-right:auto;

width:90%;

background-color:#d0f0f6;

text-align:left;

padding:8px;

}

        </style>
    </head>
    <body>

<div class="container">

<div class="center_div">

<h1>Hello World!</h1>

<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>

</div>

</div>

    </body>
</html>

Example:


2. CSS text-align Example.

<!DOCTYPE html>



<head>

<style>

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

</style>

</head>



<body>

<h1>CSS text-align Example</h1>

<p class="date">May, 2009</p>

<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 

'just remember that all the people in this world haven't had the advantages that you've had.'</p>

<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>

</body>



</html>

3. CSS Dropcap Example.

<!DOCTYPE html>

<html>

<head>

<style>

p:first-letter 

{

color:#ff0000;

font-size:xx-large;

}

</style>

</head>



<body>

<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>

</html>

4. CSS gif bullet symbol Example.

<html>

<head>

<style>

ul 

{

list-style:square url("sqpurple.gif");

}

</style>

</head>



<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

4. CSS Menu link Example.

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

background-color:purple;

color:white;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:#ff3300;

font-size:20px;

color:black;

opacity:1;

-web-kit-opacity:1;

-moz-opacity:1;}

li {display:inline;}

}

</style>

</head>



<body>

<center>

<ul>

<li><a href="dropcap.html">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</center>

<p>

In the example above, we let the ul element and the a element float to the left.

The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.

The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).

We add some colors and borders to make it more fancy.

</p>



</body>

</html>

RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code