CSS - Internet Technologies

What is Internet programming Language - CSS?

CSS is short form of Cascading Style Sheets. It helps in defining the outlook of HTML elements as a different file known as CSS file with .css extension.

Using CSS, the HTML elements are formatted just by changing the file at one place. Once the change is made, the HTML file is automatically reflected with the changes wherever the element appeared.

CSS Rules

Rules are created in order to create style sheets. Below is the CSS syntax to follow.

Key Points

  • HTML element is the Selector to which CSS rule is applied.
  • Property is the attribute that should be changed corresponding to the selector.
  • Property can take specified value.
  • A colon (:) is used to separate Property and Value.
  • Each declaration is separated by semi colon (;).

Examples of CSS rules are below:

Embedding CSS into HTML

Below four methods for adding CSS to HTML documents.

  • Inline Style Sheets
  • Embedded Style Sheets
  • External Style Sheets
  • Imported Style Sheets

Inline Style Sheets

HTML element has the Inline Style Sheet i.e. they are placed inline with the element. A style attribute is declared to add inline CSS.

Syntax:

Let us see the below example using Inline Style Sheets:

Output −

inline_style_sheet

Embedded Style Sheets

To apply same appearance to all occurrence of a particular element, Embedded Style Sheets are used defined in <head> element by using the <style> element.

The <style> element must include type attribute. The value of type attribute specifies what type of syntax it includes when rendered by the browser.

Syntax

embedded_style_sheet

External Style Sheets

These are the .css files that contain the CSS rules separately. They are linked to any HTML document with <link> tag with rel attribute.

Syntax:

Follow the below steps in order to create external css and link it to HTML document:

Create a CSS file and define all the rules for various HTML elements say external.css.

Create a HTML document and name is as externaldemo.html.

external_style_sheet

Imported Style Sheets

Using these sheets, rules from other sheets are used in our style sheets. Use @import before all the rules in a style sheet to make use of it.

Syntax:

Let us see the below example using Inline Style Sheets:

imported_style_sheet

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Internet Technologies Topics