Scribd
Upload
3 views2 pages

Using CSS

The document explains three methods of adding CSS to HTML: inline, internal, and external. It provides examples for each method, demonstrating how to style elements such as headings and paragraphs. Additionally, it covers CSS properties like colors, fonts, borders, padding, and margins.

Uploaded by

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

Using CSS

The document explains three methods of adding CSS to HTML: inline, internal, and external. It provides examples for each method, demonstrating how to style elements such as headings and paragraphs. Additionally, it covers CSS properties like colors, fonts, borders, padding, and margins.

Uploaded by

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

Using CSS

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Inline CSS
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Border
p {
border: 2px solid powderblue;
}

CSS Padding
p {
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin
p {
border: 2px solid powderblue;
margin: 50px;
}

Link to External CSS


<link rel="stylesheet" href="/html/styles.css">
<link rel="stylesheet" href="styles.css">

You might also like