Scribd
Upload
0 views

css introduction

CSS (Cascading Style Sheets) is a language used to style HTML elements and control web page layouts, enhancing aesthetics and user experience. It can be applied in three ways: inline, internal, and external CSS, each with its own use cases. CSS syntax consists of selectors and declaration blocks that define how elements should be displayed, with various selectors available for targeting specific HTML elements.

Uploaded by

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

css introduction

CSS (Cascading Style Sheets) is a language used to style HTML elements and control web page layouts, enhancing aesthetics and user experience. It can be applied in three ways: inline, internal, and external CSS, each with its own use cases. CSS syntax consists of selectors and declaration blocks that define how elements should be displayed, with various selectors available for targeting specific HTML elements.

Uploaded by

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

CSS (Cascading Style Sheets) is a language used to style HTML elements and control

the layout of web pages. It allows developers to change colors, fonts, spacing,
background, and other visual properties to enhance the design of a website.

1. Introduction to CSS

What is CSS?

CSS is a stylesheet language that defines the appearance of HTML elements. It helps in
creating visually appealing and responsive web pages by controlling colors, fonts,
spacing, positioning, and layouts.

Why Use CSS?

Separates content from design – HTML structures the page, while CSS handles styling.

Improves website aesthetics – Enables better typography, colors, and layouts.

Enhances user experience – Allows for responsive designs that adapt to different screen
sizes.

Reduces code duplication – A single CSS file can style multiple pages, making
maintenance easier.

Types of CSS
CSS can be applied in three ways:

1. Inline CSS

Definition:

Inline CSS applies styles directly within an HTML element using the style attribute.

Example:

<p style=”color: blue; font-size: 16px;”>This is a paragraph with inline CSS.</p>

Explanation:

The style attribute inside the <p> tag applies CSS directly to that element.

Useful for quick changes but hard to maintain in large projects.

2. Internal CSS

Definition:

Internal CSS is written inside a <style> tag within the <head> section of an HTML
document.

Example:
<!DOCTYPE html>

<html>

<head>

<style>

P{

Color: red;

Font-size: 18px;

</style>

</head>

<body>

<p>This is a paragraph with internal CSS.</p>

</body>

</html>

Explanation:

The <style> tag contains CSS rules that apply to the entire page.

Useful for styling a single HTML document without affecting other pages.

3. External CSS

Definition:
External CSS is stored in a separate .css file and linked to an HTML document using the
<link> tag.

Example:

HTML File (index.html)

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<p>This is a paragraph with external CSS.</p>

</body>

</html>

CSS File (styles.css)

P{

Color: green;

Font-size: 20px;

Explanation:

The <link> tag in the <head> section connects the CSS file to the HTML document.

Best for large projects as it keeps styles separate from content.


2. CSS Syntax

Definition:

CSS rules consist of selectors and declaration blocks that define how HTML elements
should be displayed.

Structure:

Selector {

Property: value;

Selector – Specifies the HTML element to be styled.

Property – Defines the style attribute to be modified.

Value – Specifies the style setting for the property.


Example:

HTML:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

CSS (styles.css):

P{

Color: blue;

Font-size: 16px;

Explanation:

The p selector targets all <p> elements.

Color: blue; makes the text blue.

Font-size: 16px; sets the font size to 16 pixels.


3. CSS Selectors

Definition:

CSS selectors define which HTML elements will be styled.

1. Element Selector

Definition: Targets all elements of a specific type.

Example:

<h1>Welcome to CSS</h1>

<p>This is a paragraph.</p>

H1 {

Color: red;

P{

Font-size: 18px;

2. Class Selector
Definition: Targets elements that have a specific class.

Example:

<p class=”highlight”>This is a highlighted paragraph.</p>

.highlight {

Background-color: yellow;

3. ID Selector

Definition: Targets a single element with a unique ID.

Example:

<h2 id=”main-title”>Main Heading</h2>

#main-title {

Font-size: 24px;

Color: green;

4. CSS Background
Definition:

The CSS background property sets the background of an element.

Example:

<div>This div has a background color.</div>

Div {

Background-color: lightblue;

Padding: 10px;

Explanation:

Background-color: lightblue; sets the background color.

Background Image:

<div>This div has a background image.</div>

Div {

Background-image: url(‘background.jpg’);

Background-size: cover;

}
Background Repeat:

Div {

Background-image: url(‘pattern.png’);

Background-repeat: repeat-x;

The background image repeats horizontally.

Background Position:

Div {

Background-image: url(‘image.jpg’);

Background-position: center;

The background image is centered.

Fixed Background:
Div {

Background-image: url(‘image.jpg’);

Background-attachment: fixed;

The background remains fixed while scrolling.

5. CSS Cursor Property

Definition:

The cursor property changes the appearance of the mouse pointer.

1. Default Cursor:

<div>This div has the default cursor.</div>

Div {

Cursor: default;

2. Pointer Cursor:
<button>Click Me</button>

Button {

Cursor: pointer;

Changes to a hand cursor on hover.

3. Text Cursor:

P{

Cursor: text;

The cursor becomes a text selection icon.

4. Move Cursor:

Div {

Cursor: move;

}
The cursor changes to a move icon.

5. Custom Cursor:

Div {

Cursor: url(‘cursor.png’), auto;

Uses an image as the cursor.

You might also like