CSS for Beginners

CSS

  • CSS can be abbreviated as 'Cascading Style Sheet'.
  • CSS is a stylesheet language that describes the style of an HTML document.
  • CSS describes how the HTML elements should be displayed on the web page.

Syntax:

  • selector {property: value;}

The syntax includes the below,

A. Selector

B. Property

C. Value

A. Selector Description:

  • Selector denotes the tag name, ID or class of a HTML element.

Example:

    • h2 {color: green;}
    • p {font-size: 21px;}
    • div {height: 100px;}

In the above example 'h2, p and div' are selectors.

Types of selectors:

  1. Element selector
  2. ID selector
  3. Class selector

Selectors type definition:

1. Element selector:

  • Accessing an HTML element with its tag name.

Example:

    • h2 {color: green;}

In the above example 'h2' is a HTML tag.

2. ID selector:

  • Accessing an HTML element with its ID.
  • An ID can be denoted with '#'.

Example:

    • #headline {color: green;}

In the above example, 'headline' is an ID.

3. Class selector:

  • Accessing an HTML element with its class name.
  • A class can be denoted with '.'(dot).

Example:

    • .category {color: green;}

In the above example 'category' is a class.

*Heads up: A class name can be same for multiple HTML elements but ID should be unique within an HTML document.

B. Property Description:

  • Defining the type of style to be set to an HTML element.

Example:

    • h2 {color: green;}
    • p {font-size: 21px;}
    • div {height: 100px;}

In the above example 'color, font-size and height' are properties.

C. Value Description:

  • Defining the values for the respective HTML element.

Example:

    • h2 {color: green;}
    • p {font-size: 21px;}
    • div {height: 100px;}

In the above example 'green, 21px and 100px' are values.

Types of style sheets:

  1. Inline Style Sheet
  2. Internal Style Sheet
  3. External Style Sheet

1. Inline Style Sheet:

  • Defining the style of an HTML element within the HTML tag.
  • The style should be defined with the word 'style'.

Example:

CODE:

<html>
   <head>
      <title>
         Title goes here!
      </title>
   </head>
   <body>
      <h1 style="color: red;">Inline CSS Example</h1>
      <p>Study the CSS in 'www.yeskawin.com'</p>
   </body>
</html>

OUTPUT:

inline_css

 

2. Internal Style Sheet:

  • Defining the style of a HTML element within the <style> tag.
  • The <style> tag should placed within <head> tag.

Example:

CODE:

<html>
   <head>
      <title>
         Title goes here!
      </title>
      <style>
         h1{color: blue;}
      </style>
   </head>
   <body>
      <h1>Inline CSS Example</h1>
      <p>Study the CSS in 'www.yeskawin.com'</p>
   </body>
</html>

OUTPUT:

internal_css

3. External Style Sheet:

  • Defining the style of an HTML element in a separate style sheet.
  • The path of the external style sheet should be mentioned within the <head> tag.

Example:

CODE (index.html):

<html>
   <head>
      <title>
         Title goes here!
      </title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
   </head>
   <body>
      <h1>External CSS Example</h1>
      <p>Study the CSS in 'www.yeskawin.com'</p>
   </body>
</html>

CODE (stylesheet.css):

h1{color: yellow;}

OUTPUT:

external_css

For more details on CSS, write to 'yes.kawin@yahoo.com'.

Please follow and like us:
error30

Leave a Reply

Your email address will not be published. Required fields are marked *