Embedding CSS

 

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 and 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:

HTML Code

HTML code viewed within an HTML document:
html-line

<a href="http://www.yourdomain.com" style="TEXT-DECORATION: NONE">Your Link</A>

Browser View

HTML coding viewed through a web browser:
html-line

Your Link

style="TEXT-DECORATION: NONE" – Specifies the text decoration of the link.

Highlight Link Background

In the next example, the linked text has a highlighted background:

HTML Code

HTML code viewed within an HTML document:
html-line

<a href="http://www.yourdomain.com" style="background:yellow; color:black">Linked Text</a>

Browser View

HTML coding viewed through a web browser:
html-line

Linked Text

style="background:yellow; – Specifies the background color of the linked text.
color:black – Specified the text color of the linked text.

Add Color to Form Input Box

The next example will display an HTML form input box with a colored background:

HTML Code

HTML code viewed within an HTML document:
html-line

<input type="text" style="color: #FFFFFF; background-color: #72A4D2;">

Browser View

HTML coding viewed through a web browser:
html-line


To view this example, place your cursor within the input box and type.

style="color: #FFFFFF; – Specifies the text color when typing in the input box.
background-color: #72A4D2; – Specifies the input box background color.

Visit the HTML Color Codes 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>

<u><h1>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>

<u><h1>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.

 
This concludes the Embedding CSS tutorial. In the next lesson, you will learn about web page formatting.