0% found this document useful (0 votes)
5 views

CSS Basics

CSS (Cascading Style Sheets) is utilized to style HTML elements and improve web page aesthetics. It employs selectors and properties, with three types: Inline, Internal, and External CSS. A sample program demonstrates the application of CSS in a styled webpage.

Uploaded by

Olives
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
0% found this document useful (0 votes)
5 views

CSS Basics

CSS (Cascading Style Sheets) is utilized to style HTML elements and improve web page aesthetics. It employs selectors and properties, with three types: Inline, Internal, and External CSS. A sample program demonstrates the application of CSS in a styled webpage.

Uploaded by

Olives
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/ 2

Introduction to CSS

1. Introduction

CSS (Cascading Style Sheets) is used to style HTML elements and enhance the appearance of web
pages.

2. CSS Syntax

CSS uses selectors and properties to style elements:

selector {

property: value;

3. Types of CSS

- Inline CSS: Inside an HTML element.

<p style='color: red;'>This is a red paragraph.</p>

- Internal CSS: Inside a <style> tag in the <head>.

<style>

body { background-color: lightblue; }

</style>

- External CSS: In a separate .css file.

body { font-family: Arial, sans-serif; }

4. Sample Program: Styled Webpage

<!DOCTYPE html>
<html>

<head>

<title>Styled Page</title>

<style>

body { background-color: lightgray; font-family: Arial, sans-serif; }

h1 { color: blue; text-align: center; }

p { font-size: 18px; }

.highlight { color: red; font-weight: bold; }

</style>

</head>

<body>

<h1>Welcome to My Styled Page</h1>

<p>This is a paragraph with <span class='highlight'>highlighted text</span>.</p>

</body>

</html>

You might also like