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;
            }

Simple Ajax Example

Mark Lassoff — Wed, 27 Jul 2011 23:31:46 +0000

Ajax is an important technology that is behind the front end of many of today’s web sites. Ajax technology, which is coded in Javascript, allows your page to communicate with the server behind the scenes. This behind the scenes communication allows web pages to be updated without refreshing the entire page. Ajax leads to a more seamless, desktop like experience for users.

In this simple Ajax example an Ajax script is written using Javscript and a PHP back end. A very simple web service is simulated. The Ajax script gets data from the server and displays it within a

on the page.

[button link="http://www.learntoprogram.tv/source/SimpleAjaxExample.zip" type="icon"]Download The Source Code[/button]

You are welcome to use the code form this simple Ajax example as a basis for building your own Ajax

LearnToProgram.tv » web development

How To Use CSS (Cascading Style Sheets)

Simple Ajax Example