Styling HTML with CSS
CSS stands for Cascading Style Sheets and it describes, how HTML elements are to be displayed on
screen or in other media, it saves lot of work and time as well as we can control the layout of multiple
web pages all at once.
CSS can be done in 3 ways
INLINE by using the style attribute in HTML tags.
INTERNAL by using a <STYLE> element in the <HEAD> section
EXTERNAL by writing in external file and we can import it.
Example of Inline CSS
<H1 style =”color:red;”> This Heading is Red in color</H1>
Example of Internal CSS
<HTML>
<HEAD>
<STYLE>
body { background‐color: yellow;}
h1 {color:red;}
p{color:red;}
</STYLE>
</HEAD>
<body>
<h1>INFINITY COMPUTERS</H1>
<p>Welcome to Infinity Computers </p>
</body>
</HTML>
Example of External CSS
<HTML>
<HEAD>
<link rel=”stylesheet” href=”[Link]”>
</HEAD>
<body>
<h1>INFINITY COMPUTERS</H1>
<p>Welcome to Infinity Computers </p>
</body>
</HTML>
Coding in [Link]
body {
background‐color: yellow;
}
h1
{
color:red;
font‐family:verdana;
font‐size:300%;
}
P
{
color:red;
font‐family:courier;
font‐size:160%;
}
ID ATTRIBUTE
To define a specific style for one element, add an ID attribute to the element.
Example of ID attribute
<p ID="p01">I am different</p>
ID definition
#p01 {
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is used to select one
unique element!
CLASS ATTRIBUTE
To define a style for a special type of elements, add a class attributes to the
element:
Example of Class attribute
<p class="error">I am different</p>
Class Definition
[Link] {
color: red;
}
External Reference
External style sheets can be referenced with a full URL or with a path relative to
the current web page.
Example of External Reference attribute
<link rel="stylesheet" href="[Link]
This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/[Link]">
Links
<style>
a:link {
color: green;
background‐color: transparent;
text‐decoration: none;
}
a:visited {
color: pink;
background‐color: transparent;
text‐decoration: none;
}
a:hover {
color: red;
background‐color: transparent;
text‐decoration: underline;
}
a:active {
color: yellow;
background‐color: transparent;
text‐decoration: underline;
}
</style>
Links Attributes
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was
clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
Eg 1:
<a href="[Link] target="_blank">Visit Infinity Computers</a>
<a href="[Link] target="_top">HTML5 tutorial!</a>
Eg 2:
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Book Mark
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
(or)
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Images
HTML LAYOUT STYLES
Web pages displayed as multi columns using HTML5 and its syntax as:
HEADER
NAV
SECTION
ASIDE
ARTICLE
FOOTER
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
