Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now
CSS

What is CSS and How does CSS works?

December 23, 2020 comments off

Introduction To CSS

CSS (Cascading Style Sheets) is used to style and layout web pages – for example, to change the font, color, size, and spacing of your content, break it into multiple columns, or animations And add other decorative features.

What is CSS?

CSS stands for Cascading Style Sheet. It is a style sheet language that is used for shaping the HTML sheet, which will be displayed on the web-page of browsers. CSS is a simple mechanism for describing the presentation semantics common to each page of a website. It can control the layout of the web page all over at once. Its latest version is CSS 3.

CSS Syntax

CSS is a rules-based language – you define rules that specify groups of styles that should be applied to particular elements or groups of elements on your web page. For example, “I want to show as the main title big red text on my page.”

Selector:- The selector indicates the HTML element or HTML tag you want to style. It is used more to select or select HTML elements based on their element name, id, class, attribute.

Property:- When we write something in the property, it indicates that it is a particular property, you have to apply to the selector, which is written as a selector.

Property-Value:- In property-value, we write what we want to assign.

EX:-

p {color: red; font-size: 22px;}

p {
   color: red;
   font-size: 22px;	
  }

There are three type of CSS? And how to work.

  • Inline style
  • Internal style sheet / Embedded style sheet
  • External style sheet

Inline styles

Inline-styles are CSS declarations that affect a single HTML element, which is contained within a style attribute. An implementation of inline style in an HTML document can be as follows:

The inline CSS style that will look like below code:

<h1 style="color: green;">DevOpsSchool</h1>

Internal stylesheet

An internal stylesheet resides in an HTML document. To create an internal stylesheet, you place the CSS inside a <style> element inside the HTML <head>.

The internal CSS style that will look like below code:

<!DOCTYPE html>
<html>
  <head>
    <title> internal CSS </title>
    <style>
     h1 {
        color: green;
     } 
    </style>
  <head>
  <body>
    <h1">DevOpsSchool</h1>
  </body>
</html>

External stylesheet

An external stylesheet contains CSS in a separate file with the .css extension. CSS is the most common and useful way to get a document. You can do the same CSS file can add several web pages, all styled with a CSS stylesheet. To begin with CSS, we added an external stylesheet to our web page.

The external CSS style that will look like below code:

<style>
h1 {
   color: green;
}
</style>

Advantages of CSS:

  • Maintenance: It is easy to maintain, changing in one place will affect your web site globally. There is no need to change every specific location.
  • Time-saving: You can use any CSS script to easily reach many places.
  • Support: CSS makes the site faster and enhances the search engine capabilities to crawl web pages.
  • Native front-end: CSS has a huge list of features and functions that are helpful in designing HTML pages
  • Selectors: In CSS, there are many selectors (ID selectors, class selectors, etc.) that will be helpful in performing specific tasks.
Rajesh Kumar
Follow me
Latest posts by Rajesh Kumar (see all)