CSS Tutorial: Embedding Cascading Style Sheets (CSS) within a Web Page
Embedding Cascading Style Sheets within a web page can be done in two ways
- with the code placed between the the <head> and </head> tags
or inline, which requires the code to be placed directly within the HTML
tag.
We will begin with an example of embedding CSS inline.
Inline Cascading Style Sheets (CSS)
Inline cascading style tags are used within standard HTML code using the
STYLE parameter.
The following example will remove the underline of an individual link:
Your
Link
| <A HREF="http://www.yourdomain.com"
STYLE="TEXT-DECORATION:
NONE">Your Link</A> |
Edit the web address to suit your needs.
STYLE="TEXT-DECORATION: NONE" - Specifies the text decoration
of the link.
In the next example, the linked text has a highlightd background:
Linked
Text
| <A
HREF="http://www.yourdomain.com"
STYLE="background:yellow;
color:black">Linked
Text</A> |
Edit the text in bold to suit your
needs.
STYLE="background:yellow;
- Specifies the background color of the linked text.
color:black
- Specified the text color of the linked text.
The next example will display an HTML form input box with a colored
background:
To view this example, place your cursor within the above input box and
type.
| <INPUT
type="text" STYLE="color: #FFFFFF;
background-color: #72A4D2;"> |
Edit the text indicated in bold to suit your
needs.
STYLE="color: #FFFFFF; - Specifies the
text color when typing in the input box.
background-color: #72A4D2; - Specifies
the input box background color.
Visit the 216
Safe Colors section to find additional color codes.
Embedding Style Tags between the Head Tags
Now that you have a basic understanding of inline style tags, we'll move
on to embedding style tags between the <head> and </head> tags.
In the previous lesson, we focused on creating a basic HTML web page that
looks like this:
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created. </p>
</body>
</html> |
To embed Cascading Style Sheets (CSS) within your web page, we will start
with the basic style tag. Type or copy and paste the following code into
the HTML portion of your web page between the <head> and
</head> tags:
<style type= "text/css" title="styleid"
media="all">
<!--
-->
</style> |
Here is how your page should look:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid"
media="all">
<!--
-->
</style>
</head>
<body>
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created. </p>
</body>
</html> |
By using the <style> tag, you are telling the browser that you are
about to define the style of your page. The additional tags within the
<style> tag are providing the browser with some additional
information.
The first tag is type= "text/css". This tag tells
the browser that the style of the page will be defined using plain text.
The title="styleid" portion of the tag isn't for
the browser at all. It is for you, so that you can define the style that
you are using. It can be called anything, such as style, mystyle, or anything
you want.
The last portion of the style tag is media="all".
This tells the browser how the page should appear. For instance, you could
just use the tag media="screen" in which case the page would only
display suitably on a computer screen. If you used the media="print"
tag, the browser would display the content in a format that was suitable
for printing only. By using the media="all" tag, you are specifying that
the browser should display the page in a media type that is suitable for
everything.
Comment Tags
The comment tags <!-- and --> enable you to hide certain
text within a web page. Although it displays within your HTML code, it will
not display within the browser view of your web page.
Following the <style> tag, you will see the following:
<!--
-->
In the next section, you will learn how to use CSS to specify all aspects of your web page formatting.
 |
 |
Previous |
Next |
 An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading
Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted
and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks
with Cascading Style Sheets (CSS)
Creating Tables within a
Web Page with Cascading Style Sheets (CSS)
Cascading Style
Sheets (CSS) Classes and ID's
Cascading Style Sheet
Codes Chart - Property Index
Web Development Tutorials
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart
|
