HTML CSS


What is CSS?

CSS stands for Cascading Style Sheets.  It describes how a page displays on screen, in print, or other media.  CSS provides a powerful alternative to various HTML attributes.

Adding CSS to HTML

There are 3 ways to add CSS to HTML elements:
  1.  Inline - using a <style> attribute in an HTML element.
  2.  Internal - using a <style> element.
  3.  External - using an external CSS file.
CSS3

Inline CSS

With inline CSS a single HTML element is given a unique style.

To style an HTML element, add a style attribute.

Two <div> elements, each styled with their own style attribute.

This div has an aliceblue background and a steelblue color

This div has a papayawhip background and an indianred color
<div style="background-color:aliceblue;color:steelblue;padding:10px;">
   This div has an aliceblue background and a steelblue color
</div> 

<br />

<div style="background-color:papayawhip;color:indianred;padding:10px;">
   This div has a papayawhip background and an indianred color
</div>

Internal CSS

With internal CSS a style is applied to a single HTML page.

Styles for that page are defined by a <style> element on that same page.

Two <div> elements styled with internal CSS.

This div has an aliceblue background and a steelblue color

This div has a papayawhip background and an indianred color
<style>
  .aliceblue { background-color:aliceblue;color:steelblue;padding:10px; }
  .papaya { background-color:papayawhip;color:indianred;padding:10px; }
</style>

<div class="aliceblue">
   This div has an aliceblue background and a steelblue color
</div>

<br />

<div class="papaya">
   This div has a papayawhip background and an indianred color
</div>

External CSS

With external CSS styles are defined for many HTML pages.

Styles are defined in a separate CSS file which is then included in a page using a <link> tag.

Two <div> elements styled with external CSS.

This div has an aliceblue background and a steelblue color

This div has a papayawhip background and an indianred color
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">

<div class="aliceblue">
    This div has an aliceblue background and a steelblue color
</div>

<br />
  
<div class="papaya">
  This div has a papayawhip background and an indianred color
</div>

The external CSS file:

  .aliceblue { background-color: aliceblue; color: steelblue; padding: 10px; }
  .papaya { background-color: papayawhip; color: indianred; padding: 10px; }

In summary:   The 3 ways to add CSS are quite different, but the end-results are exactly the same.
In real-world sites, external CSS is the more commonly used approach.

CSS Fonts

Text can be styled with these CSS properties:

  • The color property sets the text color.
  • The font-size property sets the size of text.
  • The font-family property sets the font.
  • The font-weight property sets the font weight.
  • The background-color property sets the background color.

Two <div> elements with different text styles.

Text with a large fixed-width font.

Text with a classic font.
<style>
  .modern { color: forestgreen; font-size:20px;
            font-family:Courier New, Courier, monospace;
            background-color:paleturquoise;
  }
  .classic { color: steelblue; font-size:18px;
             font-family:'Times New Roman', Times, serif;
  }
</style>

<div class="modern">Text with a large fixed-width font.</div>
<br />
<div class="classic">Text with a classic font.</div>

CSS Border

The CSS border property defines the border of an HTML element.

A paragraph with a CSS border.

A paragraph with a dashed border.

<p style="border:3px dashed orangered;padding:15px;">
   A paragraph with a dashed border.
</p>

Did you know?

Did you know?

Using an image to draw a border

Did you know that you can use an image as a border?

The border-image property creates border images on an HTML elements.

An image border placed on a <div> element.

This box uses an image as its border.
<style>
 .bordered {
   border: 45px solid transparent;
   border-image: url(/img/html/border.png) 45 round;
     -webkit-border-image: url(/img/html/border.png) 45 round;
     -moz-border-image: url(/img/html/border.png) 45 round;
   height: 200px; width: 300px;
 }
</style>

<div class="bordered">This box uses an image as its border.</div>

CSS Padding

CSS padding defines the spacing between the text and the border of the HTML element.

A paragraph with padding on all sides (inside the border).

A paragraph with padding (inside the border).

<p style="padding: 25px; border: 2px dashed orangered; ">
   A paragraph with padding (inside the border).
</p>

CSS Margin

CSS margin defines the spacing outside the border of the HTML element.

A paragraph with margin on all sides (outside the border).

A paragraph with margin (outside the border).

<p style="margin: 25px; border: 2px dashed orangered;">
   A paragraph with margin (outside the border).
</p>

Did you know?

Did you know?

When to use margin vs. padding

  • Both margin and padding provide spacing around an element.
  • But when do you use one over the other?
  • The padding is the spacing inside the element.
  • The margin is the spacing outside the element.

Here you can see the difference.

A div with 25px padding.

A div with 25px margin.
<div style="background:lightblue;padding:10px;">
  <div style="background:aliceblue;padding:25px;">
    A div with 25px padding.
  </div>
  <br />
  <div style="background:aliceblue;margin:25px;">
    A div with 25px margin.
  </div>
</div>

HTML id Attribute

An id attribute adds a unique identifier to an HTML element.

It allows CSS and JavaScript to locate and reference that particular element.

A styled paragraph with an id attribute.

A paragraph styled with CSS.

<style>
  #myid { background:aliceblue; border:1px solid steelblue; padding:15px; }
</style>

<p id="myid">
  A paragraph styled with CSS.
</p>

Note:  In CSS the id is prefixed with a '#' (pound sign).


HTML class Attribute

A class attribute adds one or more CSS classnames to an HTML element.

A class allows CSS to style multiple elements with a given classname.

A styled paragraph with a class attribute.

A paragraph styled with CSS.

<style>
  .myclassname {border:1px solid darkblue;background:azure;padding:20px;}
</style>

<p class="myclassname">A paragraph styled with CSS.</p>

Note:  In CSS the classname is prefixed with a '.' (period).


Did you know?

Did you know?

Using id versus class for CSS styling

The id references a single element, whereas class can address multiple elements.

Therefore, id can be used to style one element and class can style multiple elements.

Developers prefer CSS classes over ids, because classes are re-usable.

It's easy to identify id selectors versus class selectors in CSS. id selectors are prefixed with a # (hash) whereas class selectors are prefixed with a . (dot).

This example has one id selector and two class selectors.

  #first-name { font-weight: bold; }
  .label-text { color:red; }
  .field-text { font-weight: normal; }

You may also like

Guides