HOW To Insert CSS
There Are Three ways to insert Stylesheet
1)External Stylesheet
2)Internal Stylesheet
3)Inline Stylesheet
1)External Stylesheet
- External
stylesheet are the best way to put CSS styles on your web pages.
- Once
you've gone beyond the basics of creating CSS styles, you'll want to be able to
use the same styles across multiple pages on your site.
- External style sheets make this easy to do.
- Authors
may separate style sheets from HTML documents. This offers several benefits:
- Authors and Web
site managers may share style sheets across a number of documents (and
sites).
- Authors may
change the style sheet without requiring modifications to the document.
- User agents may
load style sheets selectively (based on media descriptions).
How to Use
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
An
external style sheet is ideal when the style is applied to many pages.
With an
external style sheet, you can change the look of an entire Web site by changing
one file.
Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section.
Example
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
...web page content...
</body>
</html>
2)Internal
Stylesheet
An internal style sheet should be used when a single
document has a unique style.
You define internal styles in the head section of
an HTML page, by using the <style> tag.
When using internal CSS, you must add a new tag,
<style>, inside the <head> tag.
Unlike inline styles, internal style sheets can still
take advantage of classes, IDs, siblings, and other element relationships.
How
to Use
<style type="text/css" media="all">
<!--
p { font: 1em Times serif; color: #c00; }
h1 { font: 2em Times serif; color: #f00; }
-->
</style>
Example
<html>
<head>
<style type="text/css">
p {color: red; }
</style>
</head>
<body>
<p>Hi this is internal css!</p>
</body>
</html>
Output
Hi this is internal css!
3)Inline
Stylesheet
To use inline styles you use the style attribute in the
relevant tag.
The style attribute can contain any CSS property
CSS Styles
with the Style Attribute and No Style Sheet.
Because of the cascade, inline styles have
the highest precedence.
How to Use
<H1 STYLE = "Color: Red">My
Heading </H1>
- To place a style
in a HTML tag:
- Type the Tag you
want to chang
- Next, type a
space and then the word STYLE
- Type an equals
sign ( = ) after the word STYLE
- Type the
Property followed by a colon
- Type the Value
- Type the right
angle bracket ( > ) of the HTML tag
Example
<H1 STYLE = "Color:
Red">My Heading </H1>
Output
My Heading
