#Convert from inline CSS to external CSS

CASCADINGSTYLE SHEETS

INLINE CSS

Inline Cascading Style sheets are written insidean HTML document, directly inside an element’s tag using aCascading Style Sheets property or attribute. Note that the stylesmust be directly applied to HTML tags and hence there is no needfor
the Cascading Style Sheets open and closetags.

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

Here the "style" attribute is used incombination with HTML tags to add CSS values to them. This startswith tag name then a = equal sign then double quotes with valuesinside 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 multipleproperty values within any element. Also don’t forget to addsemi-colon in
the end otherwise some browsers might not render itall.

Advantage of using InlineCSS

The main advantage of Inline CSS’sare:

• They are a single elementbased.


• Helps in fixing bugs while testing processfor design elements


• Better for targeting single elementsthrough Single objects in JavaScript
  
• Emails are scripted with Inline CSS Stylevalues for all elements.



Disadvantages of using Inline CSS




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



• Inline CSS Style requires a lot of manualchanges so it is not recommended to use within web structure.External CSS with class names is the best way forward for HTMLdevelopment. For instance, if the web pages are long there can be athousand inline elements creating a lot of issues in theprocess.


• Once written these inline styles cannot bereused anywhere.


• The use of a quotation or blockquotes isnot applicable if used the browser interprets it as the end of yourstyle.
  
• Also, you can’t write pseudo-classes stylewith inline CSS as they are single element basedonly.


• With Inline CSS you also lose the browsercache benefits.
  

  INTERNAL/EMBEDDED CSS

  Internal Cascading Style Sheet is normallyembedded in the head section of the HTML document just before theclosing head tag and enclosed inside the open and close style tags.It is also usually applied to HTML elements but notdirectly.

  To embed and apply an Internal StyleSheet:

  
  
  1. Write the CSS open tag i.e.<style>.
  
  
  2. Write the HTML element e.g. h2, p, a,hr,and h1.
  
  
  3. Open the courly bracket } Write the CSSproperties and values e.g.color:orange; font size: 30% Close thecourly bracket }
  
  
  4. Close the CSS tag</style>
  
  

  EXTERNAL CSS

  External Cascading Style Sheet is a Style Sheetsaved as a style sheet document. This implies that it is saved as a“.css” file. The style sheet’s call-up link that will call upon theexternal CSS is then placed at the head section of the HTML
  document and its properties will then be applied toall HTML tags in the web page that has a defined class and div iddefinition 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 CSSelement Selector

  The element selector selects HTML elements basedon the element name.

  Example

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

  The CSSid Selector

  
  

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

  
  

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

  
  

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

  
  

  Note: An id name cannot startwith a number!

  Example

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

  
  

  The CSS classSelector

  The class selectorselects HTML elements with a specific classattribute.

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

  Example

  
  

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

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

  Example

  In this example only <p> elementswith class="center" will be red and center-aligned:
  p.center {
    text-align: center;
    color: red;
  }
  HTML elements can also refer to more than oneclass.
  Example
  In this example the <p> element will bestyled according to class="center" and to class="large":
  <p class="center large">This paragraph refers to twoclasses.
    
  Note: A class name cannotstart with a number!
    
  The CSSUniversal Selector
    
  The universal selector (*) selects all HTMLelements on the page.
    
  Example
    
  The CSS rule below will affect every HTMLelement on the page:
  * {
    text-align: center;
    color: blue;
  }
    
  HTML Color Names
    
      
  
  
  AliceBlue
          AntiqueWhite
          Aqua
          Aquamarine
        
  
  Azure
          Beige
          Bisque
          Brown
        
  
  Black
          BlueViolet
          Coral
          Cyan
        
      
  For more HTML color namaes visit: w3schools