Cascading Style Sheets (CSS)
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It's one of the core languages of the web and enables web developers to control the layout and appearance of their web pages by separating content from design.
CSS Versions
CSS has evolved through several versions, each bringing new features, improvements, and specifications to the styling language used in web development. The primary versions are:
CSS1: The first official version, released in 1996, focused on simple styling features.
CSS2: Introduced in 1998, it added more sophisticated selectors, positioning, and media types.
CSS2.1: A revision of CSS2, resolving inconsistencies and bugs, became a recommendation in 2011.
CSS3: Not a single specification, but a collection of modular specifications covering various aspects of design and layout, such as animations, transitions, and grid layouts.
CSS4: Not officially a version, but rather refers to ongoing work on individual CSS3 modules and new features being developed.
A simple "Hello, World!" example in CSS would involve styling a basic HTML paragraph. Below is how you could do it:
HTML file:
CSS file (style.css):
The above example would render the text Hello, World! in the color red and with font size 20 px
CSS Syntax
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
The syntax of CSS is relatively straightforward. It's made up of a set of rules, where each rule consists of one or more selectors and a declaration block:
Selector: This targets the HTML element that will be styled.
Property: This is the style attribute you want to change.
Value: This specifies the new value for the property.
Using ID and Class Selectors
ID Selector: An ID is a unique identifier for an element in your HTML. You can apply styles to an element with a specific ID by using a hash (#) followed by the ID name.
Class Selector: Classes are not unique, meaning you can use the same class on multiple elements. You can also apply multiple classes to a single element. Classes are specified in CSS with a period (.) followed by the class name.
How CSS Can be Applied: Inline, Internal, and External
Inline CSS: This involves adding the style directly within an HTML element using the "style" attribute. Each HTML element can have its own style attribute.
Internal CSS (In the Head Tag): Instead of styling elements one by one, you can use an internal style sheet by placing CSS inside a <style> tag in the head section of the HTML document. This way, you can style multiple elements and even entire pages.
External CSS: For larger projects, or when you want to apply the same styles across multiple pages, you can put your CSS in a separate file. This file is then linked to from the HTML document, using the <link> tag in the head section.
Each method has its own use case: inline for quick, one-off styles, internal for page-specific styling, and external for site-wide consistency and reduced complexity and repetition in your HTML files.
Last updated
Was this helpful?