Home

Placing CSS in Your Web Design

|
|  Updated:  
2016-03-26 15:52:04
HTML & CSS Essentials For Dummies
Explore Book
Buy On Amazon

You can use Cascading Style Sheets (CSS) in your web pages in three ways: external, internal, and inline. Which you use is dependent on how you want your design to work.

External CSS

External is the preferred way of using CSS. Ideally, you place all your CSS styles into an external CSS file, and then add a link to it in all of your site’s pages. This is the most efficient way to work, as all the pages will rely upon a single CSS file, which makes your job easier when it comes to editing your styles across an entire website.

A link to an external CSS file is added to the code on each page before the closing tag:

<head>
<strong><link rel="stylesheet" type="text/css" href="stylesheet.css" media="all"></strong>
</head>

To import an external style sheet instead of linking to one, insert style and comment tags before the closing tag:

<head>
<style type="text/css" media="all">
<!--
<strong>@import url("stylesheet.css");</strong>
-->
</style> 
</head>

Internal CSS

Internal is good for single-page use and during development, but not for finished websites. Sometimes designers include internal CSS on a single page to override any links to external CSS files. To add CSS internally to a single page, place your CSS styles between a pair of tags before the closing tag on your page:

<strong><style type="text/css"></strong>
body { background-image: url("images/pattern.gif"); }
p { font-family: verdana, arial, sans-serif; }
<strong></style></strong>

Inline CSS

Occasionally, you may need to override both external and internal CSS styles using inline CSS. Inline is not advised unless it is the best or only way to apply a style to an object or element in the HTML. To add CSS inline with your code, add the style definition to your opening HTML tag:

<p <strong>style="color: #3399CC; font-size: 18px;"</strong>>The Solar System</p>

About This Article

This article is from the book: 

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Jenkins has also created a series of courses on popular Adobe design tools including Photoshop and Illustrator.