edit

HTML5 and CSS3

vers 6 updated on 09 Sep 2021 by ( harshal.kambe/ harshal.kambe)

HTML Introduction 2

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.

As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

Basic HTML Document

In its simplest form, following is an example of an HTML document:

Image

Output

Image

HTML Tags


These tags are enclosed within angle braces . Except few tags, most of the tags have their corresponding closing tags. For example, has its closing tag and tag has its closing tag tag etc. Above example of HTML document uses the following tags:

HTML Tags Chart

To use any of following HTML tags,simply select the HTML code you'd like and copy and paste into your webpage.

Tag Name Code Example Browser View
<!-- Comment <!-- This can be viewed in the HTML part of a document--> Nothing will show
<a- anchor <a href="http://www.domain.com/">View Our Site</a> View Our Site
<b> bold Example Example
<big> big(text) Exapmle Example
<body> Body of HTML document The content of your HTML page The content of your HTML page
<br> line break The content of your webpage<br> The content of your page The content of your webpage.
The content of your page
<center> center <center>This will center your contents </center> This will center your contents.
<dd> Definition description <dl>
<dt>Definition Team</dt>
<dd>Defination of Term</dd>
<dt>Defination term</dt>
<dd>Defination of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<dl> Definition list <dl>
<dt>Definition Team</dt>
<dd>Defination of Term</dd>
<dt>Defination term</dt>
<dd>Defination of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<dt> Definition term <dl>
<dt>Definition Team</dt>
<dd>Defination of Term</dd>
<dt>Defination term</dt>
<dd>Defination of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<em> Emphasis This is an <em>Example</em> of using the emphasis tag This is an Example of using the emphasis tag
<embed> Embed object <embed src="yourfile.mid" width="100%" height="60" align="center">
<embed> Embed object <embed src="yourfile.mid" autostart="true" hidden="false" loop="false"><noembed><bgsound src="yourfile.mid" loop="1"></noembed> Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.
<font> font <font face="Times New Roman">Example</font> Example
<font> font <font face="Times New Roman" size="4">Example</font> Example
<font> font <font face="Times New Roman" size="+3" color="#ff0000">Example</font> Example
<form> form <form action="mailto:you@yourdomain.com">Name: <input name="Name" value=""size="10">
Email: <input name="Email" value=""size="10">
<center><input type="submit"></center></form>
Name:
Email:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
 heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
<h1>Heading 1 Example</h1>
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 1 Example</h3>
<h4>Heading 1 Example</h4>
<h5>Heading 1 Example</h5>
<h6>Heading 1 Example</h6>

Heading 1 Example


Heading 1 Example


Heading 2 Example


Heading 3 Example


Heading 4 Example


Heading 5 Example

Heading 6 Example
<head> heading of HTML document <head>Contains elements describing the document</head> Nothing will show
<hr> horizontal rule <hr /> Contents of your web page
Contents of your web page
<hr> horizontal rule <hr width="50%" size="3"/> Contents of your web page
Contents of your web page
<hr> horizontal rule <hr width="50%" size="3" noshade /> Contents of your web page
Contents of your web page
<hr> horizontal rule <hr width="75%" color="#ff0000" size="4" /> Contents of your web page
Contents of your web page
<hr> horizontal rule <hr width="25%" size="6" color="#6699ff" /> Contents of your web page
Contents of your web page
<html> hypertext markup language <html>
<head>
<meta>
<title>
Title of your web page
</title>
</head>
<body>HTML web page contents</body>
</html>		 Contents of your web page
<i> italic <i>Example</i> Example
<img> image <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> text describing the image
<input> input field <form method=post action="/cgibin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
<input> input field <form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; fontsize: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
<input> input field <form method=post action="/cgibin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff">
<input type="text" size="10" maxlength="30"></td>
<td bgcolor="#8463ff" valign="Middle">
<input type="image" name="submit" src="yourimage.gif"></td></tr>
</table>
</form>
<input> input field <form method=post action="/cgibin/example.cgi">
Enter Your Comments:
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit"> <input type="Reset" value="Clear">
</form>
Enter Your Comments:
<input> input field <form method=post action="/cgibin/example.cgi">
<center>Select an option:<select><option >option 1</option><option selected>option 2</option><option>option 3</option><option>option 4</option><option>option 5</option><option>option 6</option></select><br><input type="Submit" value="Submit"></center>
</form>
Select an option:
<input> input field <form method=post action="/cgibin/example.cgi">
<center>Select an option: Option 1 Option 2 Option3

Select an option:
Selection 1 Selection 2 Selection 3<br><input type="Submit" value="Submit"></center>
</form>
Select an option: Option 1 Option 2 Option3

Select an option:
Selection 1 Selection 2 Selection 3
<li> list item Example 1:
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>
Example 2:
<ol type="i"><li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol*>		 Example 1:
  • List item 1
  • List item 2
  • List item 3

    • Example 2:
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    <link> link <head><link rel="stylesheet" type="text/css" href="style.css" /></head>
    <marquee> scrolling text <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> Example Marquee
    <menu> menu <menu>
    <li type="disc">List item 1</li>
    <li type="circle">List item 2</li>
    <li type="square">List item 3</li>
    </menu>
  • List item 1
  • List item 2
  • List item 3
    		•
    <meta> meta <meta name="Description" content="Description of your site">
    <meta name="keywords" content="keywords describing your site">    		 Nothing will show
    <meta> meta <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show
    <meta> meta <meta http-equiv="Pragma" content="nocache"> Nothing will show
    <meta> meta <meta name="rating" content="General"> Nothing will show
    <meta> meta <meta name="robots" content="all"> Nothing will show
    <meta> meta <meta name="robots" content="noindex,follow"> Nothing will show
    <ol> ordered list Numbered:-

    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Numbered:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Numbered Special Start:-

    <ol start="5">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Numbered Special Start:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Lowercase Letters:-

    <ol type="a">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Lowercase Letters:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Capital Letters:-

    <ol type="A">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Capital Letters:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Capital Letters Special Start:-

    <ol type="A" start="3">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Capital Letters Special Start:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Lowercase Roman Numerals:-

    <ol type="i">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Lowercase Roman Numerals:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Capital Roman Numerals:-

    <ol type="I">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>    		 Capital Roman Numerals:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    Capital Roman Numerals Special Start:-

    <ol type="I" start="7">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>ist item 3</li>
    <li>List item 4</li>
    </ol>    		 Capital Roman Numerals Special Start:-
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    <option> listbox option <form method=post action="/cgibin/example.cgi">
    <center>Select an option:
    <select>
    <option>option 1</option>
    <option selected>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
    <option>option 5</option>
    <option>option 6</option>
    </select>
    </center>
    </form>
    Select an option:
    <p> paragraph This is an example displaying the use of the paragraph tag.

    This will create a line break and a space between lines.
    Attributes:

    Example 1

    <br><br><p align="left">
    This is an example<br>
    displaying the use<br>
    of the paragraph tag.<br><br>

    Example 2
    <br><br><p align="right">
    This is an example<br>
    displaying the use<br>
    of the paragraph tag.<br><br>

    Example 3
    <br><br><p align="center">
    This is an example<br>
    displaying the use<br>
    of the paragraph tag.<br><br>

    		 This is an example displaying the use of the paragraph tag.

    This will create a line break and a space between lines.
    Attributes:

    Example 1


    This is an example
    displaying the use
    of the paragraph tag.

    Example 2


    This is an example
    displaying the use
    of the paragraph tag.



    Example 3


    This is an example
    displaying the use
    of the paragraph tag.
    <small> small(text) <small>Example</small> Example
    <strike> deleted(text) <strike>Example</strike> Example
    <strong> strong emphasis <strong>Example</strong> Example
    <table> table Example 1:
    <table border="4" cellpadding="2"cellspacing="2" width="100%">
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    </tr>
    </table>    		 Example 1:
    Column 1Column 2
    <table> table Example 2:
    <table border="2" bordercolor="#336699"cellpadding="2" cellspacing="2"width="100%">
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    </tr>
    </table>    		 Example 2:
    Column 1Column 2
    <table> table Example 3:
    <table cellpadding="2" cellspacing="2" width="100%">
    <tr>
    <td bgcolor="#cccccc">Column 1</td>
    <td bgcolor="#cccccc">Column 2</td>
    </tr>tr>
    <td>Column 1</td>
    <td>Column 2</td>
    </tr>
    </table>    		 Example 3:
    Column 1Column 2
    Column 1Column 2
    <td> table data <table border="2" cellpadding="2" cellspacing="2" width="100%">
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    </tr>
    </table>    		 Example 1:
    Column 1Column 2
    <th> table header <div align="center">
    <table>
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    </tr>
    <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    </tr>
    <tr><td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>Column 1 Column 2 Column 3
    Row 2 Row 2 Row 2
    Row 3 Row 3 Row 3
    Row 4 Row 4 Row 4</tr>
    <tr>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    </tr>
    </table>
    </div>
    Column 1 Column 2 Column 3Row 2 Row 2 Row 2 Row 3 Row 3 Row 3Row 4 Row 4 Row 4
    Column 1Column 2Column 3
    Row 2Row 2Row 2
    Row 3Row 3Row 3
    Row 4Row 4Row 4
    <title> document title <title>Title of your HTML page</title> Title of your web page willbe viewable in the title bar
    <tr> table row <table border="2" cellpadding="2" cellspacing="2" width="100%">
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    </tr>
    </table>
    Column 1Column 2
    <tt> teletype <tt>Example</tt> Example
    <u> underline <u>Example</u> Example
    <u> unordered list Example 1:
    <br><br><ul>
    <li>List item 1</li>
    <li>List item 2</li>
    </ul><br>
    Example 2:
    <br><ul type="disc">
    <li>List item 1</li>
    <li>List item 2</li>
    <ul type="circle">
    <li>List item 3</li>
    <li>List item 4</li>
    </ul></ul>    		 Example 1:

    • List item 1
    • List item 2

    Example 2:
    • List item 1
    • List item 2
      • List item 3
      • List item 4

    Best Practices for HTML

    Use proper document structure

    HTML documents will still work without elements such as <html>, <head>, and <*body>. However, the pages will not render correctly in every browser so it's important to be consistent using the proper document structure.

    Declare the correct doctype

    When creating an HTML document, the first thing to declare is the doctype. This will tell the browser the standards you are using to render your markup correctly. The doctype goes before the <html*> tag at the top of the page. If you are unsure about what declaration to use, W3.org provides information on choosing the right doctype.

    Always close tags

    To avoid encountering validation errors always remember to have a closing tag for every tag you create.

    Don't use inline styles

    It may seem like an easy route to place styling in line with the code instead of creating an external style sheet. However, inline styles are not a good coding practice because it makes it harder to update and maintain a website. Instead, keep your styles separate from your HTML mark-up.

    Use alt attribute with images

    It is not required to have an alt attribute with images, which makes it easy to ignore. However, it is important to have a meaningful alt attribute for validation and accessibility reasons. The alt attribute provides context to screen readers so it should be descriptive as to what the image contains.

    Validate frequently

    Instead of waiting until you are finished with your HTML document, validate your code multiple times as you work. This will help save some time in the end by identifying errors early on, especially if your document is lengthy. One popular HTML validator to use is W3C's markup validation service.

    Place external style sheets within the <head> tag

    Although external style sheets can be placed anywhere in the HTML document, it is best practice to place them within the <head*> tag. This will allow your page to load faster.

    Use meaningful tags

    Each section of your web page should be built using the most appropriate HTML5 tag for the content. It's best to avoid excessive use of generic tags, such as <div>, when there could be a more descriptive tag for the job such as <section>, <article>, and so on.

    Use lowercase markup

    Your HTML markup can be written in lowercase or uppercase and the web page will render correctly. However, it is best practice to keep tag names in lowercase because it is easier to read and maintain.

    Reduce the number of elements on a page

    HTML documents can become complicated, especially for webpages with a lot of content. To reduce the size of your pages, check for opportunities to further optimize your code once you are finished with your markup.

    Use Descriptive Meta Tags

    Meta tags make your web page more meaningful for user agents like search engine spiders.

    Description Meta Attribute

    The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For each web page, you should place a concise and relevant summary inside the meta description tag.

    Use Divs to Divide Your Layout into Major Sections

    Consider dividing your web page into major sections as the first step in constructing a website design.

    Separate Content from Presentation

    Your HTML is your content. CSS provides your content’s visual presentation. Never mix both.

    Don’t use inline styles in your HTML. Always create a separate CSS file for your styles. This will help you and future developers that might work on your code make changes to the design quicker and make your content more easily digestible for user agents.

    Use an Unordered List (<ul>) for Navigation Navigation is a very important aspect of a website design and the <ul> element combined with CSS makes your navigation menus semantic (because, after all, a navigation menu is a list of links) as well as beautiful.

    Also, by convention, an unordered list for your navigation menu has been the accepted markup.

    File Structure

    Be concerned to the project file structure from day one. It’s extremely important for mid to large scale application for batter maintenance.

    CSS Introduction

    Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

    CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

    CSS is easy to learn and understand but it provides a powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

    Selector

    A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

    Property

    A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.

    Value

    Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc.

    Syntax

    Selector Example
    selector { property: value } table{ border :1px solid #C00; }

    ###The Type Selectors###

    The Universal Selectors

    Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type:

    Example
    * { color: #000000;}

    The Descendant Selectors

    Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, the style rule will apply to <em> element only when it lies inside the <ul> tag.

    Example
    ul em { color: #000000; }

    The Class Selectors

    You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

    Example
    .black { color: #000000; }

    The ID Selectors

    You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

    Example
    #black { color: #000000; }
    h1#black { color: #000000; }
    #black h1 { color: #000000; }

    The Child Selectors

    You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example:

    Example
    body > p { color: #000000; }

    The Attribute Selectors

    You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text:

    Example
    input[type="text"]{ color: #000000; }

    The advantage to this method is that the <input type="submit" /> element is unaffected, and the color applied only to the desired text fields. There are following rules applied to attribute selector.

    • p[lang] - Selects all paragraph elements with a lang attribute.

    • p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".

    • p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".

    • p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

    Multiple Style Rules

    You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example:

    Examples
    h1 { color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase; }

    Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.

    Grouping Selectors

    Examples
    h1, h2, h3 {color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase; }

    This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.

    You can combine the various class selectors together as shown below:

    Examples
    #content, #footer, #supplement { position: absolute;
    left: 510px;
    width: 200px; }

    CSS ─ INCLUSION

    Embedded CSS -The <style> Element

    You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head*> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax.

    Attribute Value Description
    type text/css Specifies the style sheet language as a content-type (MIME type). This is a required attribute.
    media screentty tv projection handheld print brailleaural all Specifies the device, the document will be displayed on. Default value is all. This is an optional attribute.

    Examples

    <head>
    <style type="text/css" media="all">
    h1{
    color: #36C;
    }
    </style>
    </head>

    Inline CSS -The style Attribute

    You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax:

    Syntax
    <element style="...style rules....">

    Attributes

    Attribute Value Description
    style style rules The value of style attribute is a combination of style declarations separated by semicolon (;).

    Examples

    <h1 style ="color:#36C;"> This is inline CSS </h1>

    Output

    This is inline CSS

    External CSS -The Element

    The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. Here is the generic syntax of including external CSS file:

    <head> <link type="text/css" href="..." media="..." /> </head>

    Attributes

    Attributes associated with <style> elements are

    Attribute Value Description
    type text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required
    href URL Specifies the style sheet file having Style rules. This attribute is a required
    media screentty tv projection handheld print brailleaural all Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.
    Example
    h1, h2, h3 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;b
    text-transform: lowercase;
    }

    Imported CSS -@import Rule

    @import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.

    <head>
    <@import "URL";
    </head>*

    Example

    <head> @import "mystyle.css"; </head>

    CSS Rules Overriding

    We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.

    • Any inline style sheet takes the highest priority. So, it will override any rule defined in<style>...</style*> tags or the rules defined in any external style sheet file.

    • Any rule defined in <style>...</style*> tags will override the rules defined in anyexternal style sheet file.

    • Any rule defined in the external style sheet file takes the lowest priority, and the rulesdefined in this file will be applied only when the above two rules are not applicable.

    Handling Old Browsers

    There are still many old browsers who do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how to use comment tags to hide CSS from older browsers:

    <style type="text/css">
    <!--
    body, td {
    color: blue;
    }
    -->
    </style>

    CSS Comments

    • Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in the style sheet. You can simply put your comments inside /.....this is a comment in style sheet...../.
    • You can use / ..../ to comment multi-line blocks in similar way you do in C and C++ programming languages.
    Example
    / This is an external style sheet file /
    h1, h2, h3 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
    }
    / end of style rules. /

    CSS ─ COLORS

    CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. Following table lists all the possible formats:

    Format Syntax Example
    Hex Code #RRGGBB p{color:#FF0000;}
    Short Hex Code #RGB p{color:#6A7;}
    RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
    RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
    RGB % aqua, black, etc. p{color:teal;}

    CSS Colors -Hex Codes

    A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB).

    A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

    Best Practices

    Make It Readable
    The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on.

    Keep It Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. You should start to develop your own "sub-language" of CSS that allows you to quickly name things. There are certain classes that I create in nearly every theme, and I use the same name each time. For example, I use .caption-right to float images which contain a caption to the right.

    Use a Reset Most CSS frameworks have a reset built in, but if you're not going to use one, then at least consider using a reset. Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, and headings. The reset allows your layout to look consistent in all browsers.

    Organize the Stylesheet With a Top-Down Structure It always makes sense to lay your stylesheet out in a way that allows you to quickly find parts of your code. I recommend a top-down format that tackles styles as they appear in the source code.

    Combine Elements Elements in a stylesheet sometimes share properties. Instead of rewriting previous code, why not just combine them? For example, your h1, h2, and h3 elements might all share the same font and color: h1, h2, h3 {font-family: tahoma, color: #333

    Create Your HTML First Many designers create their CSS at the same time they create the HTML. It seems logical to create both at the same time, but actually you'll save even more time if you create the entire HTML mockup first. The reasoning behind this method is that you know all the elements of your site layout, but you don't know what CSS you'll need with your design. Creating the HTML layout first allows you to visualize the entire page as a whole, and allows you to think of your CSS in a more holistic, top-down manner.

    Use Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a div "box" that you want to float right, and you've already got a class .right in your CSS that floats everything to the right.

    Use the Right Doctype The doctype declaration greatly affects whether or not your markup and CSS will validate. In fact, the entire look and feel of your site can change greatly depending on the doctype that you declare.

    Use Shorthand You can shrink your code considerably by using shorthand when crafting your CSS. For elements like padding, margin, font, and some others, you can combine styles in one line.

    Comment Your CSS Just like any other language, it's a great idea to comment your code in sections. To add a comment, simply add / behind the comment, and / to close it, like so: / Here's how you comment CSS /

    Understand the Difference Between Block and Inline Elements Block elements are elements that naturally clear each line after they're declared, spanning the whole width of the available space. Inline elements take only as much space as they need, and don't force a new line after they're used. Here are the lists of elements that are typically inline: span, a, strong, em, img, br, input, abbr, acronym And the block elements: div, h1...h6, p, ul, li, table, blockquote, pre, form

    Use CSS Compressors CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. This combination can greatly reduce the file size, which speeds up browser loading. CSS Minifier and HTML Compressor are two excellent online tools that can shrink CSS. It should be noted that shrinking your CSS can provide gains in performance, but you lose some of the readability of your CSS.

    Make Use of Generic Classes You'll find that there are certain styles that you're applying over and over. Instead of adding that particular style to each ID, you can create generic classes and add them to the IDs or other CSS classes (using tip #8).

    For example, I find myself using float:right and float:left over and over in my designs. So I simply add the classes .left and .right to my stylesheet, and reference it in the elements. .left {float:left} .right {float:right}

    ...
    This way, you don't have to constantly add float:left to all the elements that need to be floated.

    Use margin: 0 auto to Center Layouts Many beginners to CSS can't figure out why you can't simply use float: center to achieve that centered effect on block-level elements. If only it were that easy! Unfortunately, you'll need to use this method to center a div, paragraphs, or other elements in your layout:

    Don't Just Wrap a div Around It When starting out, there's a temptation to wrap a div with an ID or class around an element and create a style for it.

    Header Text

    Use Browser Developer Tools Modern web browsers come bundled with some vital tools that are must-haves for any web developer. These developer tools are now part of all the major browsers, including Chrome, Firefox, Safari, and Edge. Among the many features that come bundled with the Chrome and Firefox developer tools (like debugging JavaScript, inspecting HTML, and viewing errors), you can also visually inspect, modify, and edit CSS in real time.

    Hack Less Avoid using browser-specific hacks if at all possible. There is a tremendous pressure to make sure that designs look consistent across all browsers, but using hacks only makes your designs harder to maintain in the future. Plus, using a reset file (see #4) can eliminate nearly all of the rendering irregularities between browsers.

    Don't Use Negative Margins to Hide Your h1 Often, people will use an image for their header text and then either use display:none or a negative margin to float the h1 off the page. Matt Cutts, then head of Google's Webspam team, has officially said that this is a bad idea, as Google might think it's spam. As Cutts explicitly says, avoid hiding your logo's text with CSS. Just use the alt tag. While many claim that you can still use CSS to hide a h1 tag as long as the h1 is the same as the logo text, I prefer to err on the safe side.

    Validate Your CSS and XHTML Validating your CSS and XHTML does more than give a sense of pride: it helps you quickly spot errors in your code. If you're working on a design and for some reason things just aren't looking right, try running the markup and CSS validator and see what errors pop up. Usually you'll find that you forgot to close a div somewhere or missed a semi-colon in a CSS property.

    Rems and Ems vs. Pixels There's always been a strong debate as to whether it's better to use pixels (px) or ems and rems when defining font sizes. Pixels are a more static way to define font sizes, and ems are more scalable with different browser sizes and mobile devices. With the advent of many different types of web browsing (laptop, mobile, etc.), ems and rems are increasingly becoming the default for font size measurements as they allow the greatest form of flexibility.

    Don't Underestimate the List Lists are a great way to present data in a structured format whos style is easy to modify. Thanks to the display property, you don't have to just use the list as a text attribute. Lists are also great for creating navigation menus and things of the sort.