Scribd
Upload
11 views

CSS

Uploaded by

keshavpatel2287
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
11 views

CSS

Uploaded by

keshavpatel2287
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/ 16

CSS

What is CSS?
• CSS stands for Cascading Style Sheets.

• It is a stylesheet language that is used to describe the visual


presentation of a web page written in HTML (Hypertext Markup
Language).

• HTML creates the structure of the page, while CSS adds styling
to that structure.
How does CSS work?
• CSS operates by selecting HTML elements and applying styles to
them.

• Styles dictate the appearance of elements on a webpage.

• You can target HTML elements, classes, or IDs, defining properties


like colors, fonts, margins, etc.
How does CSS work?
/* Syntax */

selector {
property: value;
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title> CSS example </title>
</head>
<body>
<h1> I am learning CSS(Cascading Style Sheets) <h1>
</body>
</html>
Adding CSS to HTML code
Inside the head tag, add the following code:

<style>
body {
text-align: center;
color: white;
background-color: purple;
}
</style>
Ways to add CSS
There are three different ways to add CSS to an HTML page, which
are:

1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline CSS
• Inline CSS is used to add custom properties to specific elements.

• The added style will only reflect on that particular element only.

• To use inline CSS, Insert the "style" attribute within the HTML
element's opening tag.
1. Inline CSS Example

<h1 style=" color: purple; "> I'm Sai Krishna</h1>


<h2> I'm Sai Krishna </h2>
2. Internal CSS
• Internal CSS is used to apply custom style to the multiple elements
on the same page. The style can be used throughout the HTML
page.

• Internal CSS is defined in a style block, which will be inside


the head section.
2. Internal CSS Example
<head>
<style>
p{
color: red;
}
</style>
</head>

<body>
<p>I'm Sai Krishna from Hyderabad. </p>
</body>

</html>
3. External CSS
• External CSS works similarly to internal CSS but with a twist.

• Instead of adding the styles within the HTML file, we create a


separate file with .css extension.

• This file will hold all the styling details.

• Then, we link this file to the HTML page, giving it the instructions
on how to look.
Example
<html>
<head>
<title>CodeWithHarry</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<p>I'm harry, from CodeWithHarry</p>
<p>I'm a Developer and founder of CodeWithHarry.com</p>
</body>

</html>
style.css
p{
color: red;
}

You might also like