Learn About Basic CSS Rules and Inclusions in HTML

0
121
Basic CSS Rules

In this article, we are going to discuss about basic CSS rules and inclusions. CSS stands for Cascading Style Sheets and it is responsible for styling and designing the HTML document which constitutes any website.

Basic CSS Rules

CSS comprises set of styling rules which are interpreted and applied to the elements in our document by the web browser. Basically, a style rule consists of the following three parts.

  1. Selector A style is applied to a selector which is an HTML tag. E.g., HTML tag <h2>, <table>, <h1>, etc. are selectors.

  2. Property A HTML tag has a property as its attribute i.e. HTML attributes are transformed into CSS properties. Example of such properties could be background color, border, height, width, etc.

  3. Value HTML tag has property and we assign a value to this property. E.g., we can assign a color value to a property as ‘blue’ or hex code as #0000FF, etc.

A CSS Style Rule Syntax will look as shown below. Here, “table” is a selector, “border“ is property and ‘2px’ is a value.

CSS Style Rule Syntax

table {

border:2px

solid #D00;

}

Further, selectors can be classified in the way they are defined in CSS.

  1. The Type Selectors In the Type selector, we provide HTML tag name, associated property and value in the below given fashion.

    Type Selector Example

    h2 {

    color: #0000FF;

    }

  2. The Universal Selectors In the universal selector, instead of providing specific selector or HTML tag we can specify the universal selector that matches the name of any element type. Below example rule will render the content of every element in the given document in blue.

    Type Universal Example

    * {

    color: #0000FF;

    }

  3. The Descendant Selectors In the descendant selector, we can apply a style rule to a particular element that exists within a particular element. In the below example, the style rule will be applied to <em> element that exist inside <ul> tag.

    Type Descendant Example

    ul em {

    color: #0000FF;

    }

  4. The Class Selectors In the class selector, the style rule is based on the class attribute of the element or HTML tag. In the below example, an element which has this class defined will be formatted with blue color as defined in the rule.

    Type Class Example

    . blue {

    color: #0000FF;

    }

    Alternatively, the rule can be made more prominent and can be applied to one element only as shown below. Here, the rule will render the content of a document in blue for the <h2> element only.

    Type Class Example

    h2. blue {

    color: #0000FF;

    }

  5. The ID Selectors In the ID selector, we can define the style rule based on the id attribute of the element or HTML tag. In the below example, the elements with id as ‘blue’ will be formatted with the blue color as defined in the styling rule.

    Type ID Example

    #blue {

    color: #0000FF;

    }

    Alternatively, the rule can be made more prominent and can be applied to one element only as shown below. Here, the rule will render the content of a document in blue for the <h2> element with id as ‘blue’ only.

    Type ID Example

    h2#blue {

    color: #0000FF;

    }

    Alternatively, the rule can be applied to one element type with its multiple occurrences in the document shown below. Here, the rule will render the content of a document in blue for all <h2> element occurring in the document using the same stylesheet (CSS).

    Type ID Example

    #blue h2 {

    color: #0000FF;

    }

  6. The Child Selectors In the child selector, we can define the style rule based on the direct child of the element or HTML tag. In the below example, all the paragraphs will be formatted in blue color if they are the direct child of a <body> element. In this case, if we put the paragraph <p> under any other elements such as <div>, <td>, etc. elements then the paragraph won’t be formatted in blue at all.

    Type Child Example

    body > p {

    color: #0000FF;

    }

  7. The Attribute Selectors In the attribute selector, we can define the style rule based on the HTML elements with particular attributes. In the below example, the style rule will be applied to all input HTML elements which has type attribute’s value as “password”.

    Type Attribute Example

    Input [type = “password”] {

    color: #0000FF;

    }

  8. Multiple Style Rules In the multiple style rule selector, we can define multiple style rules for one element. As a result, multiple properties and corresponding values can be defined for one element as a single block as shown below in the example. This should be noted that all the property and value pairs are separated by a semi-colon in the block and these can be placed in a single line or multiple lines.

    Multiple Style Example

    h1 {

    color: #0000FF;

    font-weight: normal;

    letter-spacing: .5em;

    margin-bottom: 2em;

    text-transform: uppercase;

    }

  9. Grouping Selectors In grouping selectors, we can group and apply style rule to many selectors by just separating the elements by comma as shown below.

    Multiple Style Example

    h1, h2, h3, h4 {

    color: #0000FF;

    font-weight: normal;

    letter-spacing: .5em;

    margin-bottom: 2em;

    text-transform: uppercase;

    }

    Alternatively, we can integrate together the id selectors as shown below.

    Multiple Style Example

    #content, #footer, #supplement {

    position: absolute;

    left: 420px;

    width: 300px;

    }

CSS – Inclusion: CSS inclusion is the technique through which we can include CSS for styling in our HTML document. We can include CSS with our HTML document in the following four ways.

  1. Embedded CSS – The <style> Element: In this case, we can implement our CSS rules under the <style> element present in the <head> section of the HTML document as shown below.

    Embedded CSS – The <style> Element

    <! DOCTYPE html>

    <html>

    <head>

    <style type = “text/css” media = “all”>

    body {

    background-color: blue;

    }

    h2 {

    color: red;

    margin-left: 50px;

    }

    </style>

    </head>

    <body>

    <h2>This is a heading of h2 type</h2>

    <p>Start your paragraph here. </p>

    </body>

    </html>

  2. Inline CSS – The Style Attribute: In inline CSS, we can use inherent style attribute of any HTML element in order to define style rules as shown below.

    Inline CSS – The Style Attribute

    <html>

    <head>

    </head>

    <body>

    <h2 style = “color: #0000FF;”> This is how we implement inline CSS through style attribute. </h2>

    </body>

    </html>

  3. External CSS – The <link> Element: In external CSS approach, we use the <link> element to include an external stylesheet file in our HTML document. Here, we will prepare an external css file (say external.css) which contains all the styling rules. The file should have a.css extension. We can include the external CSS file by using the <link> element inside the head section of the HTML document as shown below.

    External CSS – The <link> Element

    <html>

    <head>

    <link type = “text/css” href = “external.css” />

    </head>

    <body>

    <h2 style = “color: #0000FF;”> External CSS approach </h2>

    </body>

    </html>

  4. Imported CSS – @import Rule: In imported CSS, we can use annotation as @import in order to import an external stylesheet in the same manner as we use the <link> element. Below is an example.

    Imported CSS – @import Rule

    <html>

    <head>

    <@import url (“URL“);

    </head>

    <body>

    <h2 style = “color: #0000FF;”> Imported CSS approach </h2>

    </body>

    </html>

Conclusion
In this article, we have discussed about basic CSS rules and different types of selectors for CSS. After this we discussed about 4 approaches through which we can include CSS style rules in the HTML documents.

LEAVE A REPLY

Please enter your comment!
Please enter your name here