== 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 * h1 – h5 – applies heading styles

* ul – applies styles for unordered lists * li – applies styles to list elements
  • * p – applies styles to paragraph tags

    * hr – applies styles to horizontal rules
    * a.link - applies styles to the hyperlink tag * a.visited - applies styles to the hyperlink tag for visited event * a.hover - applies styles to the hyperlink tag for on hover event * DIV – applies styles to all DIVs without an ID tag identifier * input - applies styles to the input form controls * button - applies styles to the button/submit form controls * select - applies styles to the select form controls [[http://www.cssbasics.com/chapter_1_introduction_to_css.html|CSS Syntax Reference]] === Sample HTML/Embedded CSS code === {{{ Tutorial CSS Basic Syntax

    Conten A with h1 heading applied

    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.

    Regular list List displayed inline List displayed inline with hypelinks

    Rest of the headings

    Conten A with h2 heading applied

    Conten A with h3 heading applied

    Conten A with h4 heading applied

    Conten A with h5 heading applied
    }}} 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 [[http://ubuntuforums.org/showthread.php?p=3436512#post3436512|Discussion]] so that we can all share/benefit from it.