Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
styling
cascading
sheets

What is CSS?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

CSS (Cascading Style Sheets) describes how HTML elements will be displayed on a webpage. It controls the design elements of a webpage such as color schemes, dimensions of the HTML elements, webpage layout, and variations in display for different devices and screen sizes.

Syntax

A CSS rule consists of a selector and a declaration block​:

svg viewer

The selector points the HTML element to a style. In the illustration above, the selector is pointing to an h1 element. The declaration block contains one or more declaration, separated by semi-colons. Each declaration includes a CSS property name and a value separated by a colon.

This particular CSS rule will color all h1 elements blue and make them bold.

Where is CSS written?

CSS rules can be written in the same HTML files between <style> </style> tags, as shown below:

They can also be defined inline:

CSS rules can also be defined in an external CSS file with a .css extension. This file needs to be imported into the relevant HTML file(s).

Styling specific elements

In the examples above, the CSS rule applies a particular style to all h1 elements. However, if one wants to only style one particular element, then it needs to be targeted by either its ID or its class.

This functionality is shown in the code below:

Note how the class is styled with a . before the class’s name, and the ID is styled using a # before the ID’s name.

RELATED TAGS

css
styling
cascading
sheets
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring