Class– A class is a style (like a group of CSS attributes) that can be applied to one or more HTML elements. It is applied to an HTML element via the class attribute and the class name.

.example-class: {background: #000;}

ID– A ID selector is a name assigned to a specific style. It can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name.

#example-id: {background: #000;}

In CSS, it is possible to specify different margins for different sides:
Example
margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

The margin property can have from one to four values.
margin:25px 50px 75px 100px;
top margin is 25px , right margin is 50px , bottom margin is 75px , left margin is 100px

margin:25px 50px 75px; , top margin is 25px , right and left margins are 50px , bottom margin is 75px

margin:25px 50px; , top and bottom margins are 25px , right and left margins are 50px

margin:25px; , all four margins are 25px

A CSS (cascading style sheet) file allows you to separate your web sites HTML content from it’s style. As always you use your HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS files

How to use the CSS?

We can use Three Ways to Insert CSS

Internal Stylesheet

First we will explore the internal method. This way you are simply placing the CSS code within the tags of each HTML file you want to style with the CSS. example below.

<head> 
<title><title> 
<style type="text/css"> CSS Content Goes Here </style>
 </head> 
<body>

With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.


External Stylesheet

<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

Or you can also use the @import method as shown below

<style type="text/css">@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the head section as shown in example below.

<head> <title><title> <link rel="stylesheet" type="text/css"href="style.css" /> </head> <body>
or
<head> <title><title> <style type="text/css"> @import url(Path To stylesheet.css) </style> </head>

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: #ff0000;">Some red text</p>

The menu we will be creating features two sub categories .

nav ul {  background: #efefef;   background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);   background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);   box-shadow: 0px 0px 9px rgba(0,0,0,0.15);  padding: 0 20px;  border-radius: 10px;    list-style: none;  position: relative;  display: inline-table; }  

nav ul:after {   content: ""; clear: both; display: block;  } 

nav ul li {  float: left; }  

nav ul li:hover {   background: #4b545f;   background: linear-gradient(top, #4f5964 0%, #5f6975 40%);   background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);   background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);  }   

nav ul li:hover a {    color: #fff;   }    

nav ul li a {   display: block; padding: 25px 40px;   color: #757575; text-decoration: none;  } 

nav ul ul {  background: #5f6975; border-radius: 0px; padding: 0;  position: absolute; top: 100%; }  

nav ul ul li {   float: none;    border-top: 1px solid #6b727c;   border-bottom: 1px solid #575f6a;   position: relative;  }

nav ul ul li a {    padding: 15px 40px;    color: #fff;   }    

nav ul ul li a:hover {     background: #4b545f;    }

nav ul ul {  display: none; } 
 
nav ul li:hover > ul {   display: block;  } 

nav ul ul ul {  position: absolute; left: 100%; top:0; }

HTML tags are composed of three things: an opening tag, content and ending tag.

HTML tags similar to keywords which has species function, for example, for paragraph we can use HTML tag(

HTML tags mostly comes in pair like,

<tag> content </tag>