HOME

CSS

Applying CSS

There are three ways to apply CSS to HTML: In-line, internal, and external.

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:


<p style="color: red">text</p>

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation freedocument, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for the page.


<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...

This will make all of the paragraphs in the page red and all of the links blue.

Although preferable to soiling our HTML with inline presentation, it is similarly usually preferable to keep the HTML and the CSS files separate, and so we are left with our savior…

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:


p {
    color: red;
}

a {
    color: blue;
}

If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this:


<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

Apply!

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “style.css” in the same directory as your HTML file.

Now change your HTML file so that it starts something like this:


<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
</head>
...

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

Selectors, Properties, and Values

Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific type of element.

For each selector there are “properties” inside curly brackets, which simply take the form of words such ascolor, font-weight or background-color.

A value is given to the property following a colon (NOT an “equals” sign) and semi-colons separate the properties.


body {
    font-size: 14px;
    color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.

So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 14 pixels in size and navy in color.

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties and it is worth familiarizing yourself with these before continuing.

  • px (such as font-size: 12px) is the unit for pixels.
  • em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
  • pt (such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
  • % (such as width: 80%) is the unit for… wait for it… percentages.

Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

    

HTML
CSS
JAVA  
 
 
 
 
   
   
   
   
   
   
   
   
   
   
Kathleen P. Aseremo
[email protected]