Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Style Approaches

There are four ways that developers can apply CSS style rules and properties to HTML elements.

1. Using the HTML inline style attribute:

<p style="color:#F00; font-size:18px;">I am a styled element</p>

2. Single document specific styling using the HTML <style> element:

<html> <head> <style> .myStyle1{ color:#F00; font-size:18px; } </style> </head> <body> <p class="myStyle1">I am a styled element</p> </body> </html>

3. Whole Site Styling using an external style sheet:

A CSS external style sheet is used to allow quick site-wide design changes to a large scale website. If you do not use an external CSS style sheet for your site layout and design you will have to edit all of your site pages if you wanted to change the color of links or the background image of the site for example. Using external CSS style sheets is the smarter way to design and manage robust websites. a) Create a new folder inside of your main project folder and name it "style". b) Fire up your HTML editor and create a new blank document named "main.css". c) Save main.css into the new folder you just created named style. d) Add the HTML <link> element(for external CSS) inside of your <head> tag. Code Example for you to reference where to place the link element: <!doctype html> <html> <head> <link rel="stylesheet" href="style/main.css"> </head> <body> </body> </html> Note: We are naming our style sheet main.css because we sometimes will use secondary style sheets as well in the same document. Your document can be fed multiple external CSS style sheets. This comes in handy if one certain web page requires extra CSS that is not part of the main site layout or main styling of the site. Run a quick test to check your website's CSS style sheet linkage: 1. Open your index.html file and place the following code within your <body> tag. Then save the file. <div class="style1">Hello World!</div> 2. Open main.css and place the following code into it, then save the file. .style1 { background-color: #00FF00; height:100px; width:100px; } 3. Open index.html using your web browser. If you see "Hello World!" inside of a bright green 100x100px div, you have successfully linked to your new style sheet! If you do not see the bright green div, you do not have style sheet linkage. If you happen to fail in the linkage test: a) Be sure that you have saved both files before testing. b) Check that your directory structure is correct.

4. Using JavaScript after the element is loaded into the DOM:

<div id="div1"></div> <script> var div1 = document.getElementById("div1"); div1.style.width = "300px"; div1.style.height = "200px"; div1.style.background = "orange"; div1.style.padding = "20px"; div1.innerHTML = "<b>Hello World</b>"; </script> JavaScript can access all of the CSS properties through the 'style' property of an html element object reference.

CSS

Fundamentals

IntroductionStyle ApproachesSelectorsAt RulesShorthand PropertiesAnimatable PropertiesWeb Standards