syntaxBasics

CSS Tutorial – Syntax Basics

This is a brief definition of the basic commonly used CSS tags within style sheets to create styles for entire web sites or page sections of a web site. These basic tags are part of the main elements which define a style sheet, but please keep in mind that Cascading Style Sheets (CSS) is used in combination with HTML tags to output the final results by assigning them to a DIV, SPAN,P,HR,Body, TABLE, TR, TD. Below is a quick and dirty example of what an HTML file with embedded CSS would look like.

Basic Tags

These are just the most basic CSS tags that can affect the appearance of an html document, keep in mind that you can add a subset of styles to each one of these tags to enhance their appearance.

  • Body – applies styles to the overall html document <body>

  • h1 – h5 – applies heading styles <h1></h1>

  • ul – applies styles for unordered lists <ul></ul>

  • li – applies styles to list elements <li></li>

  • p – applies styles to paragraph tags <p></p>

  • hr – applies styles to horizontal rules <hr />

  • a.link - applies styles to the hyperlink tag <a href=””></a>

  • a.visited - applies styles to the hyperlink tag <a href=””></a> for visited event

  • a.hover - applies styles to the hyperlink tag <a href=””></a> for on hover event

  • DIV – applies styles to all DIVs without an ID tag identifier
  • input - applies styles to the input form controls <input type=”text” name=”” value=”” />

  • button - applies styles to the button/submit form controls <input type=”button” name=”” value=”” />

  • select - applies styles to the select form controls <select name=""></select>

CSS Syntax Reference

Sample HTML/Embedded CSS code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Tutorial CSS Basic Syntax</title>
<!---This is how you would invoke the CSS styles for this one page---->
  <style type="text/css" media="screen">
    /* the body tag applies the overall style for the page but you can over write it by creating classes or by redefining HTML elements with CSS styles */
    Body {font-family:Arial,Helvatica,Verdana;color:#333333;font-size:12px;font-weight:normal;background-color:#FFFFFF;}
        
        /* headings */
        h1 {font-size:24px;font-weight:bold;color:#0033CC;text-decoration:underline; margin:}
        h2 {font-size:18px;font-weight:bold;color:#FF9900;text-decoration:overline;}
        h3 {font-size:14px;font-weight:bold;color:#990000;text-decoration:line-through;}
        h4 {font-size:12px;font-weight:bold;color:#006600;text-decoration:none;}
        h5 {font-size:10px;font-weight:bold;color:#663399;text-decoration:none;}
        
        /* Hyperlink styles */
        a:link {color:#003366;text-decoration:none;}
        a:visited {color:#666666;text-decoration:none;}
        a:hover {color:#FF6600;text-decoration:underline;} /* if you wanted to defined multiple styles for different links then you would do a.name:link etc... */
        
        /* Div style for all Divs without an ID tag */
        div {margin:5px 0px 2px 2px;}
        /* paragraph, list and horizontal rules formating */
        p {margin:2px 2px 4px 5px;}/*what this means is that for every P tag defined in the HTML Document it will have a top margin of 2pixels, right margin of 2pixels, bottom margin of 4pixels and a left margin of 5px. You can also define this tag this way margin-top:2px*/
        ul {padding:2px;color:#330099;}
        li {margin:2px 2px 2px 10px; list-style:square;font-size:14px;color:#999900;}
        hr {border:1px solid #666666;}
        
        /* Here we will create a style for ContentA DIV so if you look at the HTML DIV code it has the field ID in it and a value such as id="contentA" */
        #contentA{border:1px dotted #FF9900;color:#009933;margin:0px;} 
        /* as you can see we assigned a border with the definition of 1 pixel dotted and color of orange.
        Please keep in mind that you can make the border style "solid" or "dashed" as well. Also because I gave it a color of green everything within the DIV(contentA) that does not have a color style defined with inherit the applied style */
        
        /* Here we will define the form styles */
        input {border:1px dotted #666666;color:#FF9900;}
        .button {border:1px solid #333333;color:#FFFFFF;background-color:#FF6600;} /* One issue because forms have the same tag for both input types such as button and text we have to define a class for the button so that the style can be applied. */
        select {background-color:#FFFF99;color:#CC0000;}
  </style> 
</head>

<body>
  <h1>Conten A with h1 heading applied</h1>
  <div id="contentA">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
  <hr />
    <strong>Regular list</strong>
    <ul>
      <li>list A</li>
          <li>list B</li>
          <li>list C</li>
    </ul>
    <strong>List displayed inline</strong>
    <ul>
      <li style="display:inline;">list A</li>
          <li style="display:inline;">list B</li>
          <li style="display:inline;">list C</li>
    </ul>
        <strong>List displayed inline with hypelinks</strong>
    <ul>
      <li style="display:inline;"><a href="">list A</a></li>
          <li style="display:inline;"><a href="">list A</a></li>
          <li style="display:inline;"><a href="">list A</a></li>
    </ul>
  </div>
  <!---We apply a break tag--->
  <br />
  <!---We apply a break tag--->
  <strong>Rest of the headings</strong>
  <h2>Conten A with h2 heading applied</h2>
  <h3>Conten A with h3 heading applied</h3>
  <h4>Conten A with h4 heading applied</h4>
  <h5>Conten A with h5 heading applied</h5>
  <!---form with styles applied--->
  <form name="form">
   <div><input type="text" name="test" value="" /></div>
   <div><input type="Submit" name="" value="button" class="button" /></div>
   <div>
   <select name="">
     <option value="">select list 1</option>
         <option value="">select list 2</option>
         <option value="">select list 3</option>
   </select>
   </div>
  </form>
</body>
</html>

You may copy the syntax and paste it on your favorite text editor save it as *.html file and preview it on your browser, please experiment with the code and if you have any suggestions or questions please post them in our Tutotials Discussion thread Discussion so that we can all share/benefit from it.

FloridaTeam/Projects/CssDesign/syntaxBasics (last edited 2008-08-06 16:38:51 by localhost)