Page 146 - iPlus_Ver_2.0_class_6
P. 146
• Internal/Embedded CSS: It enables a programmer to embed or insert an entire CSS
document in HTML document by placing the <style> element in the <head> tag.
<head>
<style> Property Property value
h1 {
Elements to
color:blue;
be styled
border:2px;
height:200px; Declaration
}
</style>
</head>
In the preceding example, a basic structure of <style> tag is shown which is also called as ruleset.
The individual parts are: Selector- element to be styled, Property- property of the element
you want to apply, Property value- one out of many available features for a given property,
Declaration-element’s property which you want to style. A ruleset must be surrounded with curly
brackets { }, colon (:) is used to differentiate property from its values and semicolon (;) to end one
declaration.
• External CSS: When you want to make changes on multiple pages of a website, external CSS
makes it possible by changing just one file. We need to create a stylesheet in any text editor
and saved with a .css extension. This separate document can be linked from any HTML file:
<html>
<head>
<title>HTML and CSS</title>
<link rel = “stylesheet” href = “style.css”>
</head>
<body>
A link of style.css file included in
<h1> Main Heading </h1>
</body> HTML document using link element.
</html>
A <link> tag is used and should be put inside the head section. Let us create a stylesheet file
named “style.css”:
body {
background-color:lightpink;
font:20px Comic Sans, Verdana; }
h1 {
color:red;
width:400px;
}
i + EMBEDDING AUDIO AND VIDEO
The HTML5 <AUDIO> and <VIDEO> tags allow us to add media to a website. To add media,
we are required to set the SRC attribute to identify the media source and include the controls
attribute so the user can play and pause the media whenever required.
The AUTOPLAY attribute is used to play audio/video automatically when the web page opens.
144 iPlus (Ver. 2.0)-VI

