CSS

What is CSS?

CSS is abbreviated as Cascading Style Sheets used to style website pages. The designer can specify the design of a website page in a style sheet and then use it on the page. The same style sheet can be used on multiple web pages or websites. With the help of CSS, developers can build attractive websites with consistent designs, responsiveness and outlooks.

To change the characteristics of existing HTML tags, Cascading Style Sheets are used. A built-in style sheet is required by all Web Browsers. It tells the browser how to display certain elements on a web page. When the browser sees the <p> tag, it knows to skip a line and begin a new section. This information is saved in the built-in style sheet. The built-in style sheet is overridden when a new style sheet is established. As a result, the browser begins to obey the instructions of the new style sheet rather than the built-in style sheet.

Exapmle:

p{
    clolor: red;
    background-color: #eeeeee;
    font-weight: bold;
    font-size: 20px;
}

Style sheets give increased flexibility and the capacity to add several attributes that are not available with normal HTML. Style Sheets are used to define styles for a web page in many ways. Styles can be specified as follows:

  • Inside an individual HTML tag, named as inline style.
  • Inside the < head > element of an HTML page, named as internal style.
  • In an external CSS file, named as external style.

Benefits of CSS

Some benefits of style sheets are as follows:

  • Override the Browser: Each browser has its way of displaying web pages. In the past, developers could not control how to display the page in a browser. However, the style sheet can be used to override the browser’s style and set a new style for the web page.
  • Page Layout: Style sheets can be used to display fonts, change colors, and etc, without changing the structure of the web page. A designer can separate visual design requirements from the logical structure of a web page. A style sheet is used to define the design of the elements on a web page.
  • Style Reusability: A style sheet can be linked in many web documents by linking all web pages to a style sheet. It ensures that all web pages have the same appearance when they are displayed.
  • One-time effort: A style sheet can be linked to several documents. If the style sheet is modified, the changes will be reflected in all the pages that are linked to it.

Parts of CSS

A style sheet consists of the following three parts:

  • Selector
  • Property
  • Value

Selector {property: value}

The selector is normally the HTML element or tag to be defined. The property is the attribute of the tag to be changed, and value is the value of that property. The property and value are separated by colon and surrounded by curly braces.

Example:

H2 {color :  green}

The above example changes the default color of < H2 > tag. A style sheet can modify two or more attributes as follows:

H2 {color : green;  font-family : Arial}

It also provides ability to modify two or more tags at same time.

For example:

H1, H2, H3 {color : green}

The above example modifies the color of < H1 >, < H2 >, and < H3 > tags and set to green.

Example

p{
    color: green;
    font-family: Arial;
}
h1, h2, h3{
    color: red;
    background-color: #f6f6f6;
    font-weight: bold;
    font-size: 45px;
}
Next
Scroll to Top