Computers > Web Design

Web Design: Make Embedded Styles

Making embedded styles is a fairly simple process - All this means is that you are going to define your CSS styles at the top or your HTML source code before the closing </head> tag. You may also be interested to know that styles can be defined as inline styles or as embedded within an external style sheet file with a .css extension.

Here is a *clean example of embedded styles.

<head>

<title>Example Showing Embedded Styles</title>

<style type="text/css">

h1 {font-size: 15px;}

h2 {font-size: 13px;}

p {font-size: 12px; color:red;}

</style>

</head>

* By "clean" I mean that I am leaving our some crucial meta related information just to show the embedded style for quick reference.

In the above example, I have used embedded styles to define font size for the H1, H2, and P tags. For the P tag, I have also made text color red. This means that inside my <body> any of these tags will carry the attributes I defined here. Every page you create will need these embedded styles added if you want them to carry over page-to-page.

Example of how tags are now treated within the <body> of my HTML:

Source view:

<body>
<p>This is my text within the BODY of my web page</p>
</body>

and it would look like this in a browser...

This is my text within the BODY of my web page