Coding: CSS: Internal Styles
A simple way to add styles to a document involves creating internal style rules. This is often done when a developer is only creating a single web page or a page that is unique from the others at the website.
The style tags are entered at the top of a single document or within a single document. These internal style rules will help you maintain consistency within a document.
Style Tags and Rules
Your style sheet will go between the start head tag <head> and the end head tag </head> at the top of your document. Most people place it under the meta name tags.
Start with the style tag. Between the style start and end tags, you place the rules you want to be followed. For example, you might want to use a black text color and white background color on your body font. If you want to use a color, you use a number sign and a color number. Or, you can use standard color names such as black, red, purple, blue, green.
You can control many other font functions such as style, size, and font family.
There are many other things that can be added. For example, you can set the page margins. This will provide a margin on the right and left side of the browser window.
Example
<head>
<style type="text/css">
body {font-family: "Arial", sans-serif; margin-left: 15%; margin-right: 15%; }
p {font-family: "Times", serif; color: black; font-size: 100%; }
h1 {font-family: "Verdana", sans-serif; color: red; font-size: 200%; }
h2 {font-family: "Arial", sans-serif; color: green; font-size: 150%; }
</style>
</head>
Explore the Landmarks CSS page. Notice the CSS in the head area.
Add styles to your own page.
Try It!
Add a style tag to the head of your document.
Applications of Styles
Also, consider styles for images and other objects.
img {float: right; padding: 5px;}
Create specialized styles for specific activities such as readings.
.activity {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 75%; background-color: #BBE3FF; display: block; padding: 15px;}
Use "class" to indicate a specific style such as <p class="activity">
Styles with SPAN
You can also set styles for areas of your documents using SPAN. For example, you can use the float option to create an interesting drop cap for the first letter of a paragraph.
Example
<span style="font-size: 200%; color: green; float: left;">F</span>rogs are often green.
Result
Frogs are often green.