Skip to main content

10/100 : Constructing Style Rule in CSS (Syntax of CSS)

 Welcome to day 10 of my 100 days web development challenge. Yesterday, I started with CSS which is used for styling html documents. I learnt the what, why and how of CSS and you can check it here. Today, I learnt the following.



Topic:

Syntax of CSS:

  • An embedded style sheet consists of an opening and closing <style></style> tag which is placed between the <head> section of the HTML page.
  • When we use CSS for styling an HTML element, the style rule begins with the name of that element.
    For example: if you are creating a rule that will apply to all instances of the <h1> tag, then start the rule with h1.
<style>
        h1
    </style>

  • No brackets are necessary around h1 because it's already enclosed in the <style> tag.
  • A CSS compromises of style rules that are interpreted by the browser and then applied to the corresponding elements in the HTML document.


3 Parts of CSS Style Rule:

A style rule is made of three parts:

  1. Selector:
    • A selector is an HTML tag at which style will be applied.
    • This could be any HTML tag like <h1>, <p>, <table> etc.

  1. Property:
    • A property is a type of attribute of HTML tag.
    • Simply, all the HTML attributes are converted into CSS properties.
    • They could be color, background-color, border etc.

  1. Value:
    • Values are assigned to properties.
    • For example: "color" property can have a value "red".

A CSS rule consists of a selector and a declaration block:



  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a property name and a value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.
  • For example:
<style>
        h1{
            color: aqua;
        }
        p{
            color: blue
        }
    </style>


  • If we want multiple tags to have the same rule applied to them, we can list them together and separate them by commas.
  • For example: if all the heading styles <h1> to <h6> should be red, we could write the following rule:
<style>
        h1, h2, h3, h4, h5, h6{
            color: aqua;
        }
    </style>



You can check all the blogs of this challenge below.

All links:




Comments