HTML Style


We can set the style of html element, through style attribute.

Style Elements & Attributes

<link>: href attribute, rel attribute, type attribute

<style>: Any HTML element id attribute

Style Properties:

1. Foreground color: color

2. Background color: background


We Need Style!

We need to learn style.

Without style your page is visually boring!

Style is also a major control feature for JavaScript libraries.

The language for style on the web is CSS, Cascading Style Sheets


The General Concept

We separate the information in the web page from the visual properties used to display it

Information + Style = Visual Output

1 CSS File, Multiple Web Pages

One CSS file can be used by multiple pages

CSS Demo File


Linking To A CSS File

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demonstration of Linking to a Style File</title>
<link href="example-css-file.css" rel="stylesheet" type="text/css">
</head>
<body>

<h3>. . . elements which use the style rules go here . . .</h3>

</body>
</html>

Commonly Used Style Properties

  • Color: for text color
  • Background: for background color
  • font‐family: for text fonts
  • font‐size: for text sizes
  • text‐align: for text alignment

Simple CSS File

h1 { color:purple }

p { color:blue }


Defining Style At The Top Of The Page

<!doctype html>
<html>
<head>
<style>
. . . style rules for this web page go here . .
</style>
</head>
<body>

. . . elements which use the style rules go here . . .

</body>
</html>

Simple Example

<!doctype html>
<html>
<head>
<style>
h1 {color:purple}
p {color:blue}
</style>
</head>
<body>

<h1>My first heading</h1>
<p>My first paragraph</p>
<h1>My second heading</h1>
<p>My second paragraph</p>

</body>
</html>

 css style


Use A Unique Id

Every element can have an id attribute

id has no effect for visual display

<!doctype html>
<html>
<head></head>
<body>

<ul id="rainbowColors">
<li id="red">Red</li>
<li id="orange">Orange</li>
<li id="yellow">Yellow</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
<li id="indigo">Indigo</li>
<li id="violet">violet</li>
</ul>

</body>
</html>

Using ID For Style

You can use #id for select the target of the style rule

#theElementID {color: red}

Style Using ID <HEAD> Part

<!doctype html>
<html>
<head>
<style>
#rainbowColors {background: grey}
#red {background: red}
#orange {background: orange}
#yellow {background: yellow
#green {background: green}
#blue {background: blue}
#indigo {background: indigo}
#violet {background: violet}
</style>
</head>

STYLE USING ID <BODY> PART

<body>

<ul id="rainbowColors">
<li id="red">Red</li>
<li id="orange">Orange</li>
<li id="yellow">Yellow</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
<li id="indigo">Indigo</li>
<li id="violet">violet</li>
</ul>

</body>
</html>

Using Id


Using Class

  • Make your own rule, apply to anything
  • One rule can be used for multiple elements4
<!doctype html>
<html>
<head>
<style>
.hap {color:purple; background:yellow}
.wop {color:blue; background:lightgrey} </style>
</head>
<body>

<h1 class="hap">My first heading</h1>
<p class="wap">My first paragraph</p>
<h1 class="hap">My second heading</h1>
<p class="zap">My second paragraph</p>

</body>
</html>

Using Class


Using Multiple Classes

One element can use multiple classes

<!doctype html>
<html>
<head>
<style>
.tap {color:blue}
.sap {color:red}
.wop {background:lime}
.lop {background:lightgrey}
</style>
</head>
<body>

<h1 class="tap sap">My first heading</h1>
<p class="wop lop">My first paragraph</p>
<h1 class="tap wop">My second heading</h1>
<p class="lop wop">My second paragraph</p>

</body>
</html>

Using Multi Class




Copyright © 2020. All rights reserved.