Scribd
Upload
31 views

CSS 2

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

CSS 2

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

1.

Use of different CSS style tags


<html>

<head>

<title>css background</title>

</head>

<style>

body {

background-image: url("scene.jpg"); //using image in background

background-color: black; //giving background color

color: blue; //giving text as blue color in body

h1 {

background-color: red;

color: white;

text-align: center; // text to be align in center

letter-spacing: 10px; //this will give spacing to the letters in word

word-spacing: 30px; //this will give word spacing to the words in heading

p.uppercase {

text-transform: uppercase; //this will convert the paragraph in upper text


that is all in capital

color: red;

font-size: 50; // will give size to the text

font-family: verdana; // will tell the font writing to be written in verdana


font-style: italic; //this will change the text to italics

p.lowercase {

text-transform: lowercase; //this will convert the whole text to lower text in
paragraph

font-size: 50;

font-style: oblique; //this will change the text to obliques.

p.capitalize {

text-transform: capitalize; // this will convert the first letter of every word to
capital letter in paragraph

font-size: 50;

text-indent: 100px; // this will create space before starting any line

p.big {

line-height: 10; // this will give the space between lines in a paragraph

</style>

<body>

<h1>heading in red background with white color with letter spacing as 10px
</h1>

<p class= "uppercase">paragragh writing in uppercase</p>

<p class= "lowercase">paragragh writing in lowercase</p>


<p class= "capitalize">paragragh writing in capitalize</p>

<p class= "big">paragragh writing in big paragragh writing in big

paragragh writing in big paragragh writing in big paragragh writing in big

paragragh writing in big paragragh writing in big paragragh writing in big

paragragh writing in big paragragh writing in big paragragh writing in big

paragragh writing in big paragragh writing in big paragragh writing in big


paragragh writing in big paragragh writing in big paragragh writing in
bigparagragh writing in big</p>

</body>

</html>

2. Use of CSS in list ordered and unordered list

<html>

<head>

<title>ordered list</title>

</head>

<style>

body{

background-color: black;

color: red;

font-size: 30px;

ul.a {

list-style-type: circle; //this will define the unordered list with circle
background: #ffe5e5; //this will give background color to the unordered
list

padding: 5px; // this will tell the background to show in how much space

margin-left: 35px; // this will leave the space of the margin

ul.b {

list-style-type: square;

background: #3399ff;

padding: 40px;

ol.c {

list-style-type: upper-roman;

background: #ffe5e5;

padding: 5px;

margin-left: 35px;

ol.d {

list-style-type: lower-alpha;

background: #ff9999;

padding: 40px;

}
ul.e{

list-style-image: url('download.png'); // this will give an image to the list at


the place of bullets

</style>

<body>

<ul class=a>

<li> Coffee</li>

<li> Tea</li>

<li> Coca Cola</li>

</ul>

<ul class=b>

<li> Coffee</li>

<li> Tea</li>

<li> Coca Cola</li>

</ul>

<ol class=c>

<li> Coffee</li>

<li> Tea</li>

<li> Coca Cola</li>

</ol>

<ol class=d>

<li> Coffee</li>

<li> Tea</li>

<li> Coca Cola</li>


</ol>

</ul>

<ul class=e>

<li> Coffee</li>

<li> Tea</li>

<li> Coca Cola</li>

</ul>

</body>

</html>

You might also like