CSS Syntax

A CSS rule consists of a selector ,a declaration block, property and value.

A style rule is made below parts.

  1. Selector : The selector points to the HTML element you want to style.
  2. Declaration Block : The declaration block can contain one or more declarations separated by a semicolon.
  3. Property : A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
  4. Value : Values are assigned to CSS properties.

You can put CSS Style Rule Syntax as below.
selector { property: value }

CSS Example :
h1{
     background: #CAA215;
     color: #fff;
     font-size: 24px;
}

h1 tag is heading tag which is called as selector.

Open and closing curly brackets { } is called as declaration block.

background, color and font-size are called as property.

#CAA215, #fff, 24px are called as value.

 

You can define selectors in various simple ways as per as below.

  1. The Type Selectors : Apply same property to all same selector.
    h1 {
      color: #CAA215;
    }
     
  2. The Universal Selectors : Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.
    * {
      color: #CAA215;
    }
     
  3. The Descendant Selectors : Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <li> element only when it lies inside <ul> tag.

    ul li {
      color: #CAA215;
    }

  4. The Class Selectors : You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

    .main{
      color: #CAA215;
    }

     

  5. The ID Selectors : You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.
    #main{
      color: #CAA215;
    }
     
  6. The Child Selectors : You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality.

    header > p{
      color: #CAA215;
    }

  7. The Attribute Selectors : You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text .

    input[type = "text"]
    {
      color: #CAA215;
    }

  8. Grouping Selectors : You can apply a style to many selectors.

    h1, h2, h3 {
      color: #CAA215;
    }

    #main, #header, #content {
      color: #CAA215;
    }

Comments

Leave a Reply

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

84901