Scribd
Upload
22 views4 pages

Webtechnologypart 2

Uploaded by

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

Webtechnologypart 2

Uploaded by

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

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation, formatting,
and layout of a document written in HTML. CSS allows you to separate the design and layout from
the structure and content, providing flexibility and better maintenance of your web application.

Types of CSS
There are three main types of CSS: Inline CSS, Internal CSS, and External CSS. Below is a
detailed explanation of each type with examples.

1. Inline CSS
• Applied directly within an HTML element using the style attribute.
• Best suited for quick styling or testing but not recommended for large-scale projects.
Example 1: Change text color and font size

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px;text-align:center;">Hello,
World!</h1>
<p style="color: green; font-size: 18px;font-
family:jokerman;border:dotted;margin:10px;">This is a paragraph with inline
CSS.</p>
</body>
</html>

Example 2: Adding a background color


html
Copy code
<div style="background-color: yellow; padding: 20px;border:dashed;">This is a
styled div.</div>

2. Internal CSS
• Defined within a <style> block inside the <head> section of the HTML document.
• Useful for styling a single document and keeping all styles in one place.
Example 1: Styling headings and paragraphs
html

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: red;
font-size: 40px;
}
p {
color: blue;
font-size: 20px;
text-align: justify;
}
h2:hover{
background-color:red;
width:fit-content;
</style>
</head>
<body>
<h2> HOVER </h2>
<h1>Internal CSS Example</h1>
<p>This paragraph is styled using internal CSS.</p>

</body>
</html>

Example 2: Styling multiple elements


html

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
}
div {
border: 2px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div>This is a styled div using internal CSS.</div>
</body>
</html>

3. External CSS
• Stored in an external file with the .css extension.
• Linked to the HTML document using the <link> tag in the <head> section.
• Ideal for large projects as it separates content from design, ensuring consistency across
multiple pages.
Example 1: Using an external CSS file
HTML File:
html

<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This is a paragraph styled using external CSS.</p>
</body>
</html>

CSS File (styles.css):


css

h1 {
color: purple;
font-size: 50px;
text-align: center;
}
p {
color: darkgray;
font-size: 18px;
line-height: 1.5;
}

Example 2: Responsive Design with External CSS


HTML File:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Example</title>
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="container">
<h1>Responsive Design</h1>
<p>This layout changes based on screen size.</p>
</div>
</body>
</html>

CSS File (responsive.css):


css
Copy code
.container {
width: 80%;
margin: auto;
text-align: center;
}
@media (max-width: 768px) {
.container {
width: 100%;
}
}
Key Differences
Type Usage Pros Cons
Inside HTML element's Quick and easy for small Hard to maintain; not
Inline CSS
style tag changes reusable
Internal Inside <style> in Ideal for single-document Doesn't apply to multiple
CSS <head> styling pages
External Reusable; better for large Requires extra file
In a separate .css file
CSS projects loading time

You might also like