Using CSS Internally

Declaring CSS Styles In The HTML Head

The next better option to using css styles inline is to declare them within the head section of each web page. This would still require that you go through each page to make adjustments, but at least you can do so all from one spot instead of fishing throu all your html to get it done.

The best option is to use an external file sheet and link to it from the head of each web page you want those styles to apply to. We will look at how to do this in the next lesson.

Make sure you know how to apply css styles to html elements with the appropriate css selectors.

Html Code:

<html>
<head>
  <title>CSS Practice</title>
  <style type="text/css">
    body {
	  background-color : #ccd;
	  padding : 0;
	  margin : 0;
	}
	#main_container {
	  width : 900px;
	  margin : 0 auto;
	  border : 1px solid #f00;
	  padding : 5px;
	}
  </style>
</head>
<body>
	<div id="main_container">
		<p>This is some holder text for now</p>
	</div>
</body>
</html>

When declaring styles internally use the html "style" element. You must use this element in the head section of the web page and use the "type" attribute with a value of "text/css".

Copy and paste the above code into a text file and save it as cssTest.html. Open it in your browser and check out the display. By making adjustments to the css in declared with the style element in the head you can see some of the effects you can come up with.

CSS Tutorials