This CSS tutorial series describes the various features of the CSS language to make web designing easier to learn. There are many example code snippets in the following tutorials that you can practice using an online HTML editor.



Example:

Here is an example of an embedded CSS code that defines the style of an HTML document:

<!DOCTYPE html>
<html>

    <head>
        <title>Page Title</title>
        <style>
            body{
                background-color: #f7f7f7;
                font-family: Verdana,sans-serif;
            }
            h1 {
                font-size: 30px;
                color: royalblue;
            }
            p:hover {
                text-decoration: underline
            }
        </style>
    </head>

    <body>
        <h1>Page heading</h1>
        <p>Sample text within a <strong>paragraph</strong>.</p>
    </body>

</html>

The above example code prints the title and paragraph text on a web browser where the document has been styled using embedded CSS. Click the "Run Code" button to see how it works.

What is CSS?

  • CSS was created in 1997 for web designers to give their web pages an attractive look and experience that was not so possible before using HTML alone.
  • The only purpose of CSS is that it has been developed to design web pages.
  • CSS defines how a web page design looks and feels, and for that, it provides several properties that apply only to HTML tags.
  • HTML is just a markup language in which we can use specific attributes and values in tags, but it cannot create an attractive web page design.
  • The World Wide Web Consortium (W3C) has created CSS to solve this problem.
  • In HTML 4.0, all formatting could be removed from the HTML document and stored in a separate CSS file.
  • Today all web browsers support CSS.

Required Knowledge

Things to Know and have before starting learning CSS:

  • Use any text editor like Notepad, Notepad++, Vi editor, Sublime text, etc.
  • Creating directories and files.
  • About the different formats of images and multimedia files and their extensions.
  • You must know how to save the contents in files to disk.

You must also know HTML to use CSS, so if you want to study HTML first, go to the HTML tutorials.

Online Practice Tests

Free online practice tests; challenge your knowledge of CSS and help you improve your web designing skills.
CSS Practice Tests ❯

Online HTML Editor

With our online HTML editor, you can edit (HTML/CSS/JS) code in your browser and see results instantly.
Online HTML Editor ❯


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram