CASCADING STYLE SHEETS

INLINE CSS

Inline Cascading Style sheets are written inside an HTML document, directly inside an elements tag using a Cascading Style Sheets property or attribute. Note that the styles must be directly applied to HTML tags and hence there is no need for

the Cascading Style Sheets open and close tags.

This is one of the easiest ways to add CSS to HTML elements by writing them along with them. It is a single element based process i.e, Inline CSS Style.

Here the "style" attribute is used in combination with HTML tags to add CSS values to them. This starts with tag name then a = equal sign then double quotes with values inside them.

So Style: property:value; is the right way to represent Inline CSS style. This can be added to any element HTML tag. And you can add multiple property values within any element. Also dont forget to add semi-colon in

the end otherwise some browsers might not render it all.

Advantage of using Inline CSS

The main advantage of Inline CSSs are:

• They are a single element based.
• Helps in fixing bugs while testing process for design elements
• Better for targeting single elements through Single objects in JavaScript

• Emails are scripted with Inline CSS Style values for all elements.

Disadvantages of using Inline CSS

There are several disadvantages associated with the use of Inline CSS in general.

• Inline CSS Style requires a lot of manual changes so it is not recommended to use within web structure. External CSS with class names is the best way forward for HTML development. For instance, if the web pages are long there can be a thousand inline elements creating a lot of issues in the process.
• Once written these inline styles cannot be reused anywhere.
• The use of a quotation or blockquotes is not applicable if used the browser interprets it as the end of your style.

• Also, you cant write pseudo-classes style with inline CSS as they are single element based only.
• With Inline CSS you also lose the browser cache benefits.

  INTERNAL/EMBEDDED CSS

  Internal Cascading Style Sheet is normally embedded in the head section of the HTML document just before the closing head tag and enclosed inside the open and close style tags. It is also usually applied to HTML elements but not directly.

  To embed and apply an Internal Style Sheet:

  1. Write the CSS open tag i.e.

  EXTERNAL CSS

  External Cascading Style Sheet is a Style Sheet saved as a style sheet document. This implies that it is saved as a .css file. The style sheets call-up link that will call upon the external CSS is then placed at the head section of the HTML

  document and its properties will then be applied to all HTML tags in the web page that has a defined class and div id definition included in the external style sheet file.

  CSS Selectors

  • The CSS element Selector
  • The CSS id Selector
  • The CSS class Selector
  • The CSS Universal Selector

  The CSS element Selector

  The element selector selects HTML elements based on the element name.

  Example

  Here, all 
   elements on the page will be center-aligned, with a red text color:
   
   
   
  p {
   
   text-align: center;
   
   color: red;
   
  }

  The CSS id Selector

  The id selector uses the id attribute of an HTML element to select a specific element.

  The id of an element is unique within a page, so the id selector is used to select one unique element!

  To select an element with a specific id, write a hash (#) character, followed by the id of the element.

  Note: An id name cannot start with a number!

  Example

  The CSS rule below will be applied to the HTML element with id="para1":
   
   
   
  #para1 {
   
   text-align: center;
   
   color: red;
   
  }

  The CSS class Selector

  The class selector selects HTML elements with a specific class attribute.

  To select elements with a specific class, write a period (.) character, followed by the class name.

  Example

  In this example all HTML elements with class="center" will be red and center-aligned:
   
   
   
  .center {
   
   text-align: center;
   
   color: red;
   
  }

  You can also specify that only specific HTML elements should be affected by a class.

  Example

  In this example only 
   elements with class="center" will be red and center-aligned:
   
   
   
  p.center {
   
   text-align: center;
   
   color: red;
   
  } 
   
   
  HTML elements can also refer to more than one class.
   
   
   
  Example
   
   
   
  In this example the 
   element will be styled according to class="center" and to class="large":
   
   
   
  This paragraph refers to two classes.
   
   
   
   
  Note: A class name cannot start with a number!
   
   
   
   
  The CSS Universal Selector
   
   
   
   
  The universal selector (*) selects all HTML elements on the page.
   
   
   
   
  Example
   
   
   
   
  The CSS rule below will affect every HTML element on the page:
   
   
   
  * {
   
   text-align: center;
   
   color: blue;
   
  }
   
   
   
   
  HTML Color Names
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  Alice Blue
   
  AntiqueWhite
   
  Aqua
   
  Aquamarine
   
   
   
  Azure
   
  Beige
   
  Bisque
   
  Brown
   
   
   
  Black
   
  BlueViolet
   
  Coral
   
  Cyan
   
   
   
   
   
   
  For more HTML color namaes visit: w3schools
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  USE ATOM ,First create an html page
   
  Run the page, Fix any errors
   
  Remove all inline CSS and move it to INternal/Embedded style.
   
  The page should keep the same look-and-feel after the change.
   
  Check that all elements are compete (opening tag, content, closing tag)
   
  Check that all elements are properly nested.