Introduction to Cascading Style Sheets (CSS)

Introduction to Cascading Style Sheets (CSS)

What is CSS

CSS stands for ‘Cascading Style Sheets’ and it is an extension to basic HTML that allows you to style your web pages. The main aim of the CSS is to display elements on the screen, paper, or in other media. It saves lot of work and controls the layout of multiple web pages. External style sheets are also stored in CSS files. You must be aware about the HTML and web design before starting the CSS. It is very easy to learn and understand but it offers the powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

It is used for handling the look and feel part of a web page. With the help of CSS you can control the spacing between paragraphs, color of the text, background images or colors, the style of fonts, how columns are sized and laid out, layout designs, variations in display for different devices and screen sizes.

Types of CSS:

External Style Sheet

The main function of the external style sheet is to change the look of an entire website by changing just one file. An external style sheet can be written in any text editor. The style sheet file must be saved with a .CSS extension.

Every page must include a reference to the external style sheet file inside the <link> element. The head section consists of link elements.

Internal Style Sheet

Internal style sheet can be used if one single page has a unique style. Internal styles can be defined within the <style> element, inside the <head> section of an HTML page.

Inline Styles

The inline style sheets are used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The attribute of inline styles can contain any CSS property.

Benefits of CSS:

  • CSS saves time 

  • Pages load

  • Easy maintenance 

  • Superior styles to HTML 

  • Multiple Device Compatibility 

  • Global web standards 

  • Offline Browsing 

  • Platform Independence 

CSS Modules

  • Selectors

  • Backgrounds and Borders

  • Text Effects

  • Animations

  • User Interface

  • Box Model

  • Image Values and Replaced Content

  • 2D/3D Transformations

  • Multiple Column Layout

Phone: (+91) 8800417876
Noida, 201301