3 Ways to CSS a Website

3 Ways to CSS a Website
Ad3 Ways to CSS a Websited caption


What is CSS?

We use CSS (Cascading Style Sheets) to make a website beautiful. That is, when creating a website, this CSS is used to make it easier to use and beautiful. We will understand the things that can be done with css. 

You can with css control,

  • Color, 
  • Font, 
  • Size of text, 
  • Spacing between elements, 
  • How elements are positioned and laid out, 
  • What background images or background colors to be used, 
  • Different displays for different devices and screen sizes, 


CSS can be added to HTML documents in 3 ways,

  1. Inline - by using the style attribute inside HTML elements
  2. Internal - by using a <style> element in the <head> section
  3. External - by using a <link> element to link to an external CSS file


(1) Inline CSS

In-line CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red,

Inline CSS


(2) Internal CSS

Internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color. 

Internal-css


(3) External CSS

Many HTML pages use an external design sheet to define the style. To use an external style sheet, add a link to it in the <head> section of each HTML page.

External-CSS



The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" file looks like: