Browse DevX
Sign up for e-mail newsletters from DevX


Twelve Dynamic HTML Lessons

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

ascading Style Sheets are a necessary ingredient for, and one of the key components of, DHTML. They're also a good idea for managing Web pages in general.

Cascading Style Sheets, or CSS for short, is an approach that has been evolving for quite some time. It was first supported in IE 3.0 and, like many of you, we started reading the available information about style sheets when IE3.0 was released. We got confused. The specs weren't helpful. The online documentation we found couldn't demystify it for us. We stopped in confusion and said we'd learn it later because there was so much else to do now.

Well, "Later" has become today and we've discovered that CSS isn't as hard as it appeared at first glance. In fact, we're going to explain it to you in very short order and you too will understand it. Even if you don't fully understand it, you'll have enough working knowledge that you can use it to your advantage.

Before you begin using CSS though, there are a couple of guidelines you should know:

  • CSS is very finicky about syntax. One misspelling, one misplaced semi-colon and the whole thing can go kaput and not reflect your chosen attributes.

  • Different browsers react just a bit differently with CSS styles. We're going to show you the syntax that works best across different browsers. If you follow our syntax guidelines you'll find it easier to design CSS to work across different platforms.

    What Do We Mean by Style?
    That's a good question. In the case of CSS, "style" means everything that defines how your Web pages look. Fonts, spacing, and line height are all part of style and with CSS you can apply different attributes to every tag you use in your pages. If you wanted to set all your <p> tags to display in 12-point Times New Roman with an indent on the first line, you can do that with CSS. In fact, here's what the code for that would look like:

    P {font-size: 12pt; font-family: "Times New Roman"; text-indent: 12pt}

    Pretty simple, isn't it? We specified the font size, the font family and the text indent. The syntax looks a bit funny, but then it's not HTML—it's CSS.

    As you have probably figured out, "P" means the <p> tag and the curly braces mark the start and end of the style declaration. Semi-colons separate each style element. Take special note that the last item closes with a close-brace, not a semicolon.

    If we wanted to use this same definition for <h1> tags we could change the "P" to "H1" and then all <h1>'s would appear on the page with these settings. The value 12pt, by the way, is short for 12 point. A point is a standard unit of measurement in typography and you can use it to specify type size with CSS. There is no space between the number and the measurement unit: 12pt.

    Where Do Styles Go?
    Now you may be wondering where you put these styles in your Web page. That's an important question. There are three approaches you can take:

  • Set up an external .css file to hold your style definitions.

  • Declare your styles inline with the tags in ways we'll demonstrate later.

  • Set them up in a style definition in the head of your document. Setting up a style definition in the head of your document is the method we'll be using the most. Let's look at how to do that now.

    Setting up a Style Declaration
    Setting up a style declaration is pretty straight-forward. You typically include it in your header information. To start a style declaration, open it with the HTML <style> tag, like this:

    <STYLE TYPE="text/css">

    Pretty simple so far, right? Next we need to hide the content so that browsers that don't support CSS won't choke on the style declarations. We do that with an HTML remark so that our style section looks like this:

    <STYLE TYPE="text/css"> <!--

    Within the HTML remark we can now put anything we want and older browsers will ignore it. Be careful though; if you make a mistake in your syntax your CSS enabled browser could also ignore it.

    Next we start declaring the styles we'll use on our page. Our style declaration becomes much more fleshed out.

    <STYLE TYPE="text/css"> <!-- BODY {font-size: 12pt; font-family: "Times New Roman"; line-height: 14pt} H1 {font-size: 20pt; font-family: "Arial"; font-weight: bold; line-height: 0pt; color: 9966cc} H2 {font-size: 15pt; font-family: "Arial"; font-weight: bold; line-height: 0pt; margin-top: 30pt; color: 9966cc} P {font-size: 12pt; font-family: "Times New Roman"; line-height: 14pt; text-indent: 12pt; margin-top: 6pt} PRE {font-size: 10pt; font-family: "Courier"; line-height: 14pt; color: red} A {text-decoration: none} --> </STYLE>

    Notice that we ended our style declarations with the HTML end remark "-->" and the close style tag. This puts the rest of our page back into HTML mode so the browser can continue business as usual. In case you're curious, these are the style declarations that we are using for this page.

    Let's take a look though at what we just defined:

  • We set our default body text and our <p> tag to display nearly identically. The difference? The paragraph style includes a text indent attribute, so that all paragraphs (<p>) will indent a little on the first line. The body style does not include the indent.

  • Both level one headlines (<h1>) and level two (<h2>) headlines are also defined and assigned a specific type size, face, style, and color.

  • Notice that we've tweaked the <a> tag as well. With the anchor style we turned off underlining so that none of our anchors will appear underlined.

    Don't worry if you don't understand all of the attributes right now. You can look them up as you need them (see the style properties listed in the side menu bar) or refer to the CSS style properties reference table in the reference section of the Developer Zone.

    For now, we just wanted to show you how easy they are to use. You might cut and paste those lines into a document of your own and play with them to see what kind of effects you can get. We're betting you'll surprise yourself with just how easy this really is.

  • Thanks for your registration, follow us on our social networks to keep up-to-date