HTML Tutorial

HTML CSS

HTML CSS allows you to style your HTML elements by introducing the CSS into it.
CSS - Stands for Cascading Style Sheet.

 
 
H e l l o!

Stunning Styles and Designs with CSS!

 

You Can Do It Also!

  Do It Yourself
You can do stunning styles like above with CSS.

How to Write a CSS

The syntax for assigning a style to an HTML element in CSS is:

selector { property:value; }

This selector can either be an HTML element, an id attribute in an HTML element, or a class attribute in an HTML element.
The property name is the same as a CSS property name, and the value is a corresponding value to the property.

Using CSS in HTML

There are three different ways you can use CSS in your HTML.

  • Declaring a style attribute in an HTML element (like what we've been doing in previous lessons).
  • Using a <style> element in the <head> section of the document.
  • Importing external CSS files into the document.

CSS - Declaring a <style> Attribute in an HTML Element

This method is done by defining a style attribute in the start tag of an HTML element.

The CSS codes in now placed as the attribute value:

Example

<p style="color:green;">The color is now green.</p>
<!-- This sets the text color of all <p> elements (paragraphs) to green -->
  Do It Yourself

CSS - Declaring a <style> tag in HTML

This method is done by placing the <style></style> elements in the <head> section of the document.

The CSS codes in now placed between these elements:

Example

<style>
  body {
    /* Sets the background color of the webpage body (<body> tag) to black. */
    background-color:black; 
    /* Sets the text color of a webpage body (<body> tag) to white. */
    color:white;
    /* Sets the font size of the webpage body (<body>) to 21 pixels. */
    font-size:21px; 
  }
</style>
  Do It Yourself

CSS - Importing an external file into the HTML document

The most common way of using CSS. This method is done by using the <link> element with the href attribute to indicate the source of the CSS file.

<link href="main.css" type="text/css" rel="stylesheet" />
The rel attribute must be added to let the browser know that you are importing a Stylesheet(CSS) file.

Getting With CSS

You assign styles to HTML elements either by using the tag name, id attribute, or the class attribute.
These titles are known as selectors in CSS.

Assigning Styles Using a <tagname>

The following example changes the default text color of an h1 to blue, and changes its font type to consolas using a tag name selector h1. This is done by using the tag name of the elements you want to style, excluding the angle brackets (<>).

Live Example

Assigning Styles Using an id attribute

The following example changes the default text color of an span to blue, and changes its font type to consolas. These changes will be made to an element using a heading Id. This is done by using the id attribute value already declared in the start tag of the heading elements.

Live Example

Assigning Styles Using a class name attribute

The following example changes the default text color of an p to blue, and changes its font type to consolas using a class name heading. This is done by using the id attribute value already declared in the start tag of the heading elements.

Live Example

What You Should Know at the End of This Lesson

  • You should know how to use CSS in HTML either by placing a <style> tag in the <head> section, by using a style attribute in the start tag of an element, and by importing an external file of it by using the <link> element.
  • You should know the symbols to identify the CSS id and class selectors.
  • You should be able to teach someone else what HTML CSS is.
Previous Chapter Next Chapter

Related Chapters