CSS Fundamentals – Content of a StyleSheet
A CSS declaration comprises a property and its value separated by a colon.
nanadwumor
- CSS Stylesheet contains rules
- CSS rule comprises selector and declaration block
- Vendor prefixing
- Comments
RECOMMENDED ARTICLES
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling! Pseudo-classes apply styles based on user interaction, element position, or relationships between elements. Normal classes are applied directly as attributes, whereas...
A CSS Stylesheet contains rules which mostly look like this :
|
1 2 3 4 5 6 7 8 9 10 |
h1{ font-size : 50px; font-family : Helvetica; Arial; color: Green; } body{ background-color : navy-blue; font-style : italic ; } |
In the rules above, we have the selector and the declaration block. The selector is the html element we want to style. In the above, we have h1 and body as the two selectors.
|
1 |
font-size : 50px; |
Again, background-color is a property and its value is navy-blue. If several declarations are grouped into a brace, it’s called a declaration block. For example, all the declarations styling the h1 selector or element forms a declaration block. That’s,
|
1 2 3 4 5 |
h1{ font-size : 50px; font-family : Helvetica; Arial; color: Green; } |
The declaration block above contains three declarations. The declaration block specifies that the h1 element should have a font-size of 50px anywhere throughout the browser. It should have a font-family of Helvetica or shift to Arial if Helvetica is not supported by the browser. The color of the h1 text should be green.
Vendor Prefixing
Vendor prefixing in CSS refers to the practice of adding specific prefixes to CSS properties to ensure compatibility with different web browsers during the period when a feature is still in development or not fully standardized.
Developers prefix new CSS proprietary or their own proprietary properties with their own symbols or letters as a way of making sure that only intended browsers understand and implement it and do not cause problems in other unintended platforms.
The general format of a vendor prefix is a hyphen, a
label, and a hyphen. For example, -moz- is a prefix for Mozilla-based browsers like Firefox.
The following are the unique prefixes some vendors use for their special CSS properties.
-webkit- used for WebKit-based browsers like Chrome and Safari.
-moz- used for Mozilla-based browsers like Firefox
-ms- used for Microsoft browsers like Internet Explorer and Edge
-o- used for Opera browsers
Let’s look at examples of vendor-based properties with their corresponding standard CSS properties.
border-radius : 5px; – standard property
-webkit-border-radius : 5px; – Webkit-bases property
-ms-border-radius : 5px; – Microsoft property
-moz-border-radius : 5px; – Mozilla-based property
-o-border-radius : 5px; – opera property
Whitespace in CSS
Generally, CSS ignores whitespace between and within rules. There are a few exceptions to this rule though.
When CSS code is parsed, any consecutive whitespace characters are changed to just one space. For example,
|
1 2 3 4 5 6 7 8 9 10 11 |
body{ background-color : navy-blue; font-style : italic ; font-family : Georgia; color : red; line-height : 2em; } |
Whitespace can also be reduced in your CSS code. This is called minified CSS. For example,
|
1 2 3 4 5 6 |
h2{ font-color : blue ; } |
is similar to
|
1 |
h2{ font-color :blue ;} |
In the first code, the declaration was spread across several lines while in the second presentation, we typed the entire declaration on one line.
CSS Comments
You can add comments to your CSS code. A comment is a descriptive text the developer adds to explain lines of code. For example,
|
1 2 |
/* This is a CSS comment*/ h1{ color : red;} |
CSS comments begin with /* and end with */ just as in C/C++ or Java. CSS does not have single line comment command like we see in Java, python.
Both single line and multi line comments are scanned by /* */. For example
|
1 2 3 4 5 6 7 8 9 |
/* This is a CSS comment*/ h1{ color : red;} /*This is a multi line CSS comment spanning three lines. The texts between the asterisks are comments*/ body{ font-size : 25px; color : #222222;} |
Comments can be put on the same line after CSS rule. For example,
|
1 2 3 4 5 |
h1{ color : red;} /* this changes h1 to red*/ body{ background-color : yellow;} /*this changes background color of browser to yellow*/ a{text-decoration : none;} /*this removes the text underline */ |
Mark-up
CSS does not have markup. However, HTML comment markup is accepted in <style> element.
|
1 2 3 |
<style> <!--This is HTML comment within a style tag--> </style> |
Recent Comments