What is CSS?

 

What is CSS?

CSS stands for cascading style sheet. Through CSS, we can design our web pages more attractively.

There are three styles of CSS in HTML inline, internal, external

·         Inline: 

Inl                    inline style used in HTML element.

Example:

<html>

<head><title> my first page</title>

</head>

<body >

<p style="text-align: center; color: red">hello</p>

<p><font color="green">hello</p>

</form>

</html>

 

·         Internal: 

                    Internal style uses the <style > element in the < head> section of HTML.

Example:

<html>

<head>

<style>

body {background-color: aqua;color:blue}

h1  {color: red;}

p   {color: green;}

</style>

</head>

<body>

<h1>wel-come</h1>

<p>internal css</p><br>

This is normal text

</body>

</html>

·         External: 

                    External style uses the <link>tag, which has the rel and the href attributes, which link to the .css stylesheet externally.

Example:

File name:list.css

ul{

list-style-type:disc;

margin:10;

padding:10;

}

a{

            text-decoration:none;

            color:blue;

}

File name:List.html

<html>

<head>

<link rel="stylesheet" href="list.css">

<title>my list</title></head>

<body>

<h3>Subject</h3>

<ul>

<li>java</li>

<li>c</li>

<li>html</li>

</ul>

</body>

</html>

OUT-PUT

Subject

  • java
  • c
  • html

Example:

File name: css1.css

div1{
border:3px outset black;
background-color:aqua;
text-align:center;
width:100%;
height:50;
}
.div2{
border:3px outset black;
background-color:rgb(050,150,038);
text-align:left;
width:20%;
height:90%;
float:left;
}
.div3{
border:3px outset black;
background-color:#0affb0;
margin-left:20%;
width:80%;
height:90%;
padding-left:2px;
}
a{
text-decoration:none;
color:black;
}

File name:div1.html

<html>

<head>

<link rel="stylesheet" href="css1.css">

<title>Div tag</title></head>

<body>

<div class="div1">Bright Acadamy</div>


<div class="div2">

<ul>

<h3><li><a href="p1.html" target="nm">HOME</a></li><br>

<li><a href="p1.html" target="nm">CSS</a></li><br>

<li><a href="p1.html" target="nm">HTML</a></li><br>

<li><a href="contain.html" target="nm">Referesh</a></li><br>

</div>

<div class="div3"> 

<iframe name="nm"height="98%" width="98%"></iframe>

</div>

</body>

</html>

OUTPUT






Comments

Popular posts from this blog

The structure of HTML and some basic tags

Frame tag and Example

Introduction and objective of HTML