In this section, we will learn about the management and presentation of the whole webpage along with the components as handled by a stylesheet language. There are various stylesheet languages available like Cascading Style Sheets (CSS), Document Style Semantics and Specification Language (DSSSL), Extensible Stylesheet Language (XSL), etc. The most common and frequently used with HTML is CSS, so, this way we'll continue to the brief introduction of CSS. This way, it is easier to manage and troubleshoot your web designing code for extension and changes in the future.
There are three ways we which we can use CSS in our HTML webpage:
Any CSS attributes that we want to incorporate can be added using a "style" tag after the class definition of HTML tag.
<h1 style="color:red; font-style:italic; text-align:center;">My Teaching Academy</h1>Instead of assigning styles for every heading and other component at the time of its first occurrence in the code, we can define all the styles in the header section with the tag-pair of 'style'.
<style>
h1 {
color:red;
font-style:italic;
text-align:center;
}
</style>Alternatively, a file with extension '.css' can be made and all relevant CSS code according to your schema can be present there. Once, the contents of HTML are finalized, just attach the CSS file in the head portion of HTML by passing the link. External CSS are useful with large projects, like in commercial purposes.
<link rel="stylesheet" href="my_own.css" />NOTE: The priority of inline is highest, followed by embedded styles and lastly the attributes of external are considered if all three are present in a webpage.
By using CSS, you can provide borders to table as well. For this purpose, we initially need to state the style tag-pair just before the start of table and can make the block, we need to set within, style to opt for and where to apply it.
<style>
table, th, td {
border: 1px solid black;
}
</style>We may add background color of table by adding the following code:
<style>
table {
background-color: aqua;
}
</style>The color of the body is similar to that of 'Bg-11'. As a first step, we define 'style' tag-pair in the body and add lines to change the color of 3rd level headings in the body to green. We can also add an image tag to underline with an alternate wording which describes the picture that is being shown on the page, in a short phrase.
<body style="background-color:#E6E6FA;">
<h1 style="text-align:center;color:green">My Teaching Academy</h1>
<h2 style="text-align:center;color:blue">Lets Learn</h2>
...
</body>A simple and impressive decor on the website can be a scrolling message. To create this effect:
<body style="background-color:#E6E6FA;">
<div id="scroll-container">
<marquee direction="left" scrollamount="12" loop="">
<div id="scroll-text">Welcome message which continuously scrolls in blue</div>
</marquee>
</div>
</body>To embed a video clip in a website, use the <video> tag and specify width and height attributes:
<video width="320" height="240" controls>
<source src="Pakistan'sFirst Ever Win in International Football.mp4" type="video/mp4">
Congratulations!
<p>Your browser doesn't support HTML5 video.</p>
</video>The autoplay parameter can be used instead of controls for automatic video playback:
<video width="320" height="240" autoplay muted>
<source src="Pakistan'sFirst Ever Win in International Football.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Note: Autoplay with sound is often blocked by browsers. Using the muted attribute ensures autoplay works in most cases.
<source src="video.mp4" type="video/mp4" />Let's Learn