Scribd
Upload
46 views5 pages

CSS Notes Infinity1

Uploaded by

infinity.cok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views5 pages

CSS Notes Infinity1

Uploaded by

infinity.cok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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=”mystyle.css”>
</HEAD>
<body>
<h1>INFINITY COMPUTERS</H1>
<p>Welcome to Infinity Computers </p>
</body>
</HTML>

Coding in mystyle.css

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
p.error {
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="https://www.infinity.com/html/styles.css">

This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/styles.css">

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="https://www.infinity.com/" target="_blank">Visit Infinity Computers</a>
<a href="https://www.infinity.com/html/" target="_top">HTML5 tutorial!</a>

Eg 2:
<a href="default.asp">
<img src="smiley.gif" 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

You might also like