Adding CSS to a Webpage

posted: category: web-design


Adding CSS to a Webpage

Cascading Style Sheets, or CSS, is a method for styling the elements in an HTML page. CSS eliminates the need for using HTML to style specific tags. After you have learned the basics of creating a web page using HTML, learning CSS will allow you to alter the appearance to your liking. The cascading aspect of CSS is the fact that web browsers will read CSS from top to bottom. The final CSS that the web browser reads will override previous CSS that is specified. There are three main way to add CSS to your web page: using a link tag in the head section, adding a style tag in the head section, or adding the style attribute inside an HTML tag.

Link a CSS file

The most used method for adding CSS is using a separate CSS file that can be linked to. This enables you to use the same CSS across multiple pages, basically a site wide set of CSS properties that can be overridden on a per page basis later on. Using a link tag in your head section, web browsers will read this CSS first.

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Let’s break that link tag down: The rel (relationship) attribute specifies the relationship of the current document to the linked document. The most used relationship is “stylesheet”.  The type attribute is telling the web browser that the linked document contains CSS. The href attribute is your standard method

of specifying the location of a document, the location of your style sheet.

CSS in your head

Another option is to use a style tag to add CSS. This is typically used when you want to add CSS to a specific web page without having to add it to your site wide style sheet. Normally, these style tags are used in the head section of your HTML document, though they can be used inside the body as well. The way this works, the web browser will read the linked style sheet first and apply the CSS to the document, and then it will see the style tag containing CSS and apply those properties, overriding any of the same CSS properties that are used in the linked style sheet.

<style type=”text/css”>

.p {font-size: 12px; font-weight: bold;}

.anyother css you want to add {can go inside these style tags;}

</style>

CSS inside your body

Finally, you can add styling directly inside an HTML tag, by using the “style” attribute.

For example:

<p style=”font-size: 14px; font-family: arial;”>Here is some text</p>

When adding the style attribute, due to the cascading effect of style sheets, this will always override any previous styling set for the same tag, class or id. So no matter what I specify for “p” inside a style sheet, or style tags, the style attribute will override the same properties.

 

Those are the three main options for adding CSS to an HTML page. The main thing to remember is the cascading effect of style sheets. Web browsers will start at the top and work their way down. 

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.