Skip to content
In the World Wide Web (www), CSS is the acronym for Cascading Style Sheets. CSS is a style sheet language used for describing the presentation of a document written in a markup language, commonly HTML. CSS rules how the layout and content of a web page are to be displayed on a screen, paper, or in other media. CSS saves a lot of work because it controls the layout of multiple web pages all at once.
A document is commonly a text file structured using a markup language like HTML. Presenting a document means converting it into a usable form presented visually on a computer screen through a web browser like Chrome, Firefox, Opera, Microsoft Edge, and others. Web browsers apply CSS rules to a document to affect how they are displayed.
This blog is a general introduction to Cascading Style Sheets (CSS), defining what they are, and what they are used for on the Web. This is an introduction that answers basic questions about it without entering deep into the wonderful and interesting world of CSS.
CSS initiated in 1994. It was created and is maintained by W3C. The CSS Working Group of the W3C creates documents called specifications. After specifications have been discussed and officially ratified by the W3C members, they become a recommendation.
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. CSS2 became a W3C recommendation in May 1998. CSS level 3, which was started in 1998, is still under development. CSS3 is a combination of CSS2 specifications and new specifications called modules. A CSS specification is formed from a set of properties, which have values set to update how the HTML content is displayed.
CSS came to simplify the process of presenting our mark-up language documents. You can control a variety of properties like:
- color of the text,
- style of fonts,
- spacing between paragraphs,
- how columns are sized and laid out,
- background images or colors,
- layout designs,
- variations in display according to screen sizes (Media Queries).
How do we apply CSS?
There are four ways to apply styles to our HTML documents. Most commonly used methods are External CSS files that are embedded in a <style> element inside our HTML document. If different sheet styles are specified, the styles will cascade into new styles with the following priority (higher the number less important):
Priority 4: Browser default
Browsers include some styles pre-written for us. Sometimes we don’t want these pre-loaded styles, so we can override them. There are some browsers who do not support modern CSS specifications or have their own form of using the CSS properties. Because of this, we should take care while writing our CSS in an HTML document.
Priority 3: External style sheet file
The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with the “.css” extension. We define all the style rules within this text file and then we include this file in any HTML document inside the <head>…</head> tags using <link> element.
<link rel="stylesheet" type="text/css" href="style.css" />
Priority 2: Embedded in the HTML document
We can put our CSS rules into an HTML document using the <style> element to contain the rules. The <style>…</style> tags are placed inside the <head>…</head> tags.
<style>
selector {
property: value;
}
</style>
Priority 1: Inline in our HTML elements
We can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only.
<p style="property: value;">Hello World!</p>
CSS Rules Overriding
We have described four ways to apply style sheet rules to our HTML document. Here is the rule to override any Style Sheet Rule:
Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>…</style> tags or rules defined in any external style sheet file.
Any rule defined in <style>…</style> tags will override rules defined in any external style sheet file.
Any rule defined in the external style sheet file takes the lowest priority, and rules defined in this file will be applied only when the above two rules are not applicable.
CSS Selectors
A CSS rule is interpreted by the browser and then applied to the corresponding elements in our HTML document. A style rule is composed of three parts:
- Selector − is used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.
- Property − is a type of style of the CSS. It could be color, border, background, font, display, text alignment, margins, line spacing, etc.
- Value − is assigned to properties. For example, background-color property can have a value of either red or green.
CSS Rule Syntax
The syntax of a CSS rule consists of a selector and a declaration of property and value:
selector { property: value; }
The selector points to the HTML element to style.
The declaration block (in curly braces) contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
We can write a CSS rule and then reuse the same rule in multiple HTML elements and documents. Using CSS, we do not need to write HTML inline tag attributes every time which applies only to the element styled. We just write one CSS rule and apply it to all the occurrences of that tag element. So, less code means faster pages.
Changes and maintenance of our HTML document are simple when we use external or embedded style rules. We simply change the style rule, and all elements in our HTML documents will be updated automatically. With CSS we have access to multiple device screen sizes through Media Queries. Media queries allow us to optimize our HTML document for more than one type of device. Using the same HTML document, we can present different versions of our web pages.
Read More
Again, this post barely opens the reader’s interest in learning about CSS, and the variety of things available to control our HTML documents. It’s super powerful and very important part of the web. Some main resources where you can dive deeper into it are:
