Basics of CSS3 Styles - dummies

Basics of CSS3 Styles

By John Paul Mueller

The best way to start with styles in CSS3 is to view them simply as a means of formatting information onscreen. Because most of the information you’ll work with is text, it’s easiest to start with text as the basis for understanding styles. Let’s start with this basic HTML5 formatted page:


<!DOCTYPE html>
  <title>A Simple Page</title>
  <h1>A Simple Heading</h1>
  <p>Simple text to go with the heading.</p>

At the moment, the heading and the paragraph are rather plain. The text will appear in whatever default font you’ve chosen for your browser. Typically, the text is black on a white background unless you have chosen a different color combination.

At this point, you can begin playing with the page a little to see how to format it differently. The following procedure helps you modify the basic page so it looks a little more interesting. You can use any text editor you like, so long as it doesn’t add any formatting. However, using a product such as Komodo Edit will make the task considerably easier.

  1. Create a new HTML5 file with your text editor.

    Your editor may not support HTML5 files. Any text file will do. Using a specific file type usually means that the editor inserts some of the code for you automatically, which will save you typing time.

  2. Type the code for the HTML page.

    Make sure you type the code precisely as it appears earlier in this section.

  3. Insert the following code immediately after the <title> tag.

    <style type="text/css">

    The <style> tag defines the beginning of a style. When you place the <style> tag directly in the page like this, it’s called an internal style. You can also create external style sheets. External style sheets reside in .CSS files.

    The type attribute tells the browser the <style> tag contains CSS information in text format.

  4. Within the <style> tag, (between the <style> and </style> entries, type the following code.

      font-family: cursive;
      font-size: large;
      color: #0000ff;
      background-color: #ffff00;

    This looks complicated, but it really isn’t. The p stands for the <p> (paragraph) tag. Everything in this entry will affect the <p> tags in your document.

    The curly braces ({}) tell the browser that all of the formatting instructions between them apply to the <p> tags in the document. You always include the curly braces as part of the style definition.

    Within the curly braces, you see attribute name and value pairs. For example, font-family is the name of a CSS attribute that defines which font to use. In this case, the attribute specifies the default cursive font for the platform and browser. Using the CSS generic names ensures that your application will produce generically compatible results on all platforms, using any browser.

    The font-size attribute defines a relative size. In this case, large specifies you want to make the font large compared to its default size. You aren’t specifying a specific font size, which means that each platform and browser can render the font larger than normal for that individual environment.

    The color attribute specifies a red, green, blue value to use for the font’s color. The value is preceded by a hash (#) followed by hexadecimal color values from 0 to ff. In this case, the font will be the brightest blue supported by the platform. Likewise, the background-color attribute specifies the background for the text, which will be yellow in this case.

  5. Save the page and load it in your browser.

    You see the effects of the style change as shown in Figure 1-2. Your page may look different from the one on this page because your platform or browser may use different values for the font family or font size.


  6. Type the following code after the p style within the <style> tag.

      font-family: "Times New Roman",Georgia,serif;
      font-size: 40px;
      text-align: center;
      text-decoration: underline;
      color: #ff0000;
      background-color: #00ffff;

    This style affects the <h1> tag entries and it has many of the entries used for the <p> tag style. However, notice that this time the font-family attribute contains three entries: The Times New Roman value is the most specific, followed by Georgia, followed by the least specific — serif. When working with a value that contains spaces, you must enclose the value in quotes as shown.

    Using the three-entry approach gives you more control over the appearance of the output, but still makes it possible for browsers that don’t support a specific font to render the content correctly. When supplying a specific font, make sure you also supply less specific fonts for browsers that don’t have access to your specified font.

    The font-size attribute is also different. This time the style uses a specific size of 40 pixels. Even though a specific value can make it possible to create special effects onscreen, using a specific value also creates problems. A 40px entry will work just fine on the desktop or laptop, but might cause problems with a tablet, and will definitely make the content impossible to display on a smartphone.

    This style also includes some entries that change the appearance of the text. The text-align attribute determines where the text is placed on screen, while the text-decoration attribute determines any special font features. In this case, the font is displayed centered onscreen with an underline.

  7. Save the page and load it in your browser.

    You see the effects of the style change as shown in Figure 1-3. The heading appears in red text on a pale blue background, and the paragraph is shown as blue text on a yellow background.