Scribd
Upload
2 views

CSS

The document provides an overview of Cascading Style Sheets (CSS) used for formatting HTML pages, detailing its types: Inline, Internal, and External CSS. It includes examples of CSS properties, selectors, and their application in HTML documents. Additionally, it presents a login page design using CSS for styling elements.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

CSS

The document provides an overview of Cascading Style Sheets (CSS) used for formatting HTML pages, detailing its types: Inline, Internal, and External CSS. It includes examples of CSS properties, selectors, and their application in HTML documents. Additionally, it presents a login page design using CSS for styling elements.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS : Cascading Style Sheet

It is mainly used to format the HTML pages.


We can make HTML pages more attractive by using CSS.

Types in CSS :
1. Inline CSS
2. Internal CSS/Embedded CSS
3. External CSS
================================================================================
<p style="color:orange;">INDIA is GREAT COUNTRY..!!</p>

Here p - element/tag,
style - attribute,
color - property,
orange - value

Common Properties used in CSS


color: red;
background-color:blue;
font-size :100px;
font-family:Times New Roman;
text-align :center;
border :10px solid blue;
border-radius :10px;
height :300px;
width : 300px;
margin :100px; for outer space
padding :100px; for inner space
text-shadow :4px 5px brown;

=================================================================================
Inline CSS
<p style="color: orange;">INDIA is GREAT COUNTRY..!!</p>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: blanchedalmond;">

<p style="color: red;font-size: 70px;


border:10px solid blue;margin:100px;padding: 50px;
text-shadow: 3px 5px blue; font-weight: bolder;
font-family: cursive;
">

INDIA IS GREAT COUNTRY..!!

</p>

</body>
</html>
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<div style="margin-left: 550px;margin-top: 200px;">

<img src="th (1).jpg" alt="Sampleimage"

style="height: 300px; width: 300px;border: 30px double brown;border-


radius:50%;"
>

</div>

</body>
</html>
=================================================================================
Internal CSS/Embedded CSS :
In internal CSS we use the properties with help of selecters

Selectors are as below :


1. Tag
2. Group
3. ID
4. Class
5. Universal

=================================================================================
Tag
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

h2{color: red;}

h3{color: brown;font-size: 50px;font-family: fantasy;}

</style>

</head>
<body>

<h2>Welcome to Pune</h2>
<h3>Today it Wednesday</h3>
</body>
</html>
=================================================================================
Group
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

h2,p,h3{color: brown;font-size: 50px;font-family: fantasy;}

</style>

</head>
<body>

<h2>Welcome to Pune</h2>
<h3>Today it Wednesday</h3>
<p>Hello All</p>

</body>
</html>
=================================================================================
ID
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

h2{color: brown;}
#a1{color: yellow;}
#a2{color: green;}

</style>

</head>
<body>

<h2 id="a1">Welcome to Pune</h2>


<h2 id="a2">Today it Wednesday</h2>
<h2>Hello All</h2>
</body>
</html>
=================================================================================
Class
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

h2{color: brown;}
.a1{color:blue;}
.a2{color: green;}

</style>

</head>
<body>

<h2 class="a1">Welcome to Pune</h2>


<h2 class="a2">Today it Wednesday</h2>
<h2>Hello All</h2>

</body>
</html>

=================================================================================
Universal
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>

h2{color: brown;}
.a1{color:blue;}
.a2{color: green;}
*{font-family: cursive;font-style: italic;font-size: 100px;}

</style>

</head>
<body>

<h2 class="a1">Welcome to Pune</h2>


<h2 class="a2">Today it Wednesday</h2>
<h2>Hello All</h2>

</body>
</html>
=================================================================================

External CSS

=================================================================================
Add ExternalCSS1.html
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS1</title>

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


</head>
<body id="ex1">
<h1>Welcome to External CSS 1</h1>
</body>
</html>
=================================================================================
Add ExternalCSS2.html

=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS2</title>
<link href="mystylesheet.css" rel="stylesheet">
</head>
<body class="ex2">

<h1>Welcome to External CSS 2</h1>

</body>
</html>
=================================================================================
Add mystylesheet.css
=================================================================================
h1{color: blue;}

#ex1{background-color: aqua;}
.ex2{background-color: yellow;}

=================================================================================
Login Page
=================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('Nature.jpg');
background-size: cover;

}
.container{
width: 300px;
padding: 20px;
border: 1px solid black;
background-color: aqua;
text-align: center;
}

input[type="text"],input[type="password"],
input[type="button"] {

width: 100%;
padding: 10px;
margin: 10px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 5px;
}
input[type="button"]
{
background-color: brown;
color: white;
cursor: pointer;
}

input[type="button"]:hover{
background-color: blue;
}

</style>

</head>
<body>

<div class="container">

<h2>Login Page</h2>
<form>
<input type="text" placeholder="Username"><br/>
<input type="password" placeholder="password"><br/>
<input type="button" value="Login">
</form>
</div>

</body>
</html>
=================================================================================

=================================================================================

=================================================================================

=================================================================================

=================================================================================

=================================================================================

=================================================================================

You might also like