How To Use CSS (Cascading Style Sheets)

Mark Lassoff — Sun, 14 Aug 2011 18:36:01 +0000

Cascading Style Sheets are an important facet of web development. While HTML allows you to structure your web page, CSS allows you to create an impressive design.

This video tutorial on how to use CSS covers the basics of Cascading Style Sheets. At the beginning of the tutorial, Mark demonstrates how to place styles in the document head element. Later in the video Mark demonstrates the recommended method of placing CSS code in an attached .css file.

To help you learn how to use CSS, several types of CSS rules are demonstrated. Mark demonstrates several CSS rules that effect the typography and color of the text. Mark also shows you how to use CSS on both classes and ids and how you can use CSS to change a logical division.

All of the code developed for this tutorial on how to use CSS appears below.

howToUseCss.html

version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How To Use CSS</title>
    <link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
    <h1>Welcome to Cascading Style Sheets</h1>
    <div id="first">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada <span class="highlight">fames ac turpis egestas.</span> Nulla quis magna nulla, eu scelerisque augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse commodo ipsum eget diam egestas ultricies. Quisque massa nulla, ultricies eu bibendum id, ultricies et nulla. Curabitur ut sem metus, non mattis massa. Donec dictum molestie ipsum sit amet feugiat. Curabitur leo leo, aliquet feugiat sollicitudin id, lacinia vel eros. Donec convallis purus non felis ultrices tempus. Donec ullamcorper, enim sed placerat pellentesque, ante nunc porta dui, vitae blandit arcu massa vel lectus. Suspendisse nunc tellus, placerat quis placerat dignissim, blandit ac augue. Nulla vitae euismod lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at eros tortor, nec fermentum massa. Aliquam eget magna sit amet mi imperdiet lobortis a nec orci. Vivamus ipsum nisi, fermentum nec imperdiet et, pellentesque et est.</p>
    </div>
    <p>CSS allows you to create well-designed web sites</p>
    <p class="highlight">This page was designed by Mark Lassoff, LearnToProgram.tv</p>
</body>
</html>

example.css

  p         {
                font-size: 11pt;
                font-family: arial, verdana, sans-serif;
                color: #cc0000;
            }
    #first  {
                background-color: #cccccc;
                width: 400px;
                padding: 10px;
                border: 2px solid green;
            }
.highlight  {
                background-color: yellow;
                color: black;
            }
        h1  {
                font-family: Georgia, serif;
                font-size: 1.5em;
            }

LearnToProgram.tv » web design

How To Use CSS (Cascading Style Sheets)