Scribd
Upload
104 views

Css Lesson 2

The document discusses different ways to add CSS to HTML pages, including external, internal, and inline CSS. External CSS uses external .css files linked via <link> tags, internal CSS defines styles between <style> tags in the <head>, and inline CSS uses the style attribute on individual elements. It provides examples of each method and demonstrates how to style various HTML elements by setting properties like background-color, color, and border color in CSS.

Uploaded by

Fahim Sabri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
104 views

Css Lesson 2

The document discusses different ways to add CSS to HTML pages, including external, internal, and inline CSS. External CSS uses external .css files linked via <link> tags, internal CSS defines styles between <style> tags in the <head>, and inline CSS uses the style attribute on individual elements. It provides examples of each method and demonstrates how to style various HTML elements by setting properties like background-color, color, and border color in CSS.

Uploaded by

Fahim Sabri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet.

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


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

</body>
</html>

CSS Color Names


In CSS, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue
Violet

LightGray

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

CSS Background Color


You can set the background color for HTML elements:

<!DOCTYPE html>
<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

CSS Text Color


You can set the color of text:

<!DOCTYPE html>

<html>

<body>

<h3 style="color:Tomato;">Hello World</h3>


<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis


nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>

</body>

</html>

CSS Border Color


<!DOCTYPE html>

<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

</html>

You can set the color of borders:

You might also like