Cascading Style Sheets
Cascading Style Sheets
In this tutorial, you will learn CSS, its features and benefits. When you browse websites, you’ll notice that each page has a unique look and feel — from fonts and colors to layout and animations. Cascading Style Sheets (CSS) works hand-in-hand with HTML to bring webpages to life by controlling how content appears in a browser. While HTML provides the structure of the content, CSS handles its presentation.
- CSS stands for Cascading Style Sheets.
- It is used to style and layout web pages — for example, to change fonts, colors, spacing, and positioning of elements.
- CSS can be applied internally within HTML, externally via a separate CSS file, or inline within individual elements.
- It allows developers to maintain consistent design across multiple web pages.
- CSS is supported by all major web browsers and is an essential part of modern web development.
CSS is a stylesheet language that describes the presentation of an HTML/XML document. CSS describes how HTML elements must be rendered on the screen or in other media. It describes the Look and feel and formats HTML documents written in a markup language like HTML.
The main advantage of CSS is that we can declare the presentational style attributes only once in the .css file.
CSS Syntax
CSS uses several English keywords to specify the names of various style properties. A CSS rule-set consists of a CSS selector and a CSS declaration block.
The general CSS syntax is as follows:
selector { property: value; }
The selector is the HTML element that we want to style.
The CSS declaration block contains one or more declarations separated by
semicolons. A CSS declaration always ends with a semicolon.
{ property: value; } is a declaration block that consists of a list of declarations in braces. Each declaration itself consists of a CSS property, a colon (:) and a value. Multiple declarations can be inserted in a single block.
CSS Example
Some examples are as follows:
h1 { color: blue; }
The CSS code will make all the h1 headings in the document blue in color.
Multiple CSS declarations
h1 { color: blue; font-size:24px; }
Benefits of Using CSS
CSS is used to define the styles of web pages, including the design, layout, and variations in display for different devices and screen sizes. For example, CSS can control the layout of web pages on a computer screen, laptop screens, tablets, mobile device screens, etc.
- Improved Website Speed: External CSS reduces code duplication and improves load times.
- Easy Maintenance: Changes made in a single CSS file automatically apply to all linked HTML pages.
- Better User Experience: Clean and consistent styling enhances readability and navigation.
- Professional Appearance: Allows designers to create attractive and modern layouts.
- Accessibility: CSS enables better design customization for users with different needs.
Insert CSS
We can specify the CSS inline, within the HTML or refer to an external stylesheet. External stylesheets are stored in the *.css files.
To insert CSS code to a web page:
Difference Between CSS and HTML
| HTML Code | CSS Code |
|---|---|
| Defines the structure and content of a webpage. | Defines the style, presentation and appearance of HTML elements. |
| Uses tags like <h1>, <p>, <div>, etc. | Uses selectors, properties, and values. |
| Written directly in the HTML file. | Can be written in a separate file (.css) or inside a <style> tag. |
| Focuses on what content is shown. | Focuses on how content is shown. |
| Does not support styling options on its own. | Provides styling like color, size, spacing, layout, etc. |
Learning CSS is easy and a must for anyone working with web design. CSS web designers should have basic knowledge of HTML and JavaScript.
HTML Tutorials
HTML Tutorials on this website:
