DEMYSTIFYING CSS RULE SET
Cascading Style Sheets (CSS) is used to control the style of a web document simply and easily.
What CSS Controls?
CSS controls the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. In this article, I will be making the ruleset simpler. Without wasting much time let’s delve in.
Ruleset?
Just as the name implies ruleset is a collection of rules that guides how we use CSS to style web document. A ruleset comprises of a declaration block which contains one or more declarations separated by a semicolon (“;”). Each declaration is made up of a CSS property name a value that is separated by a colon (“:”).
Therefore for one to be successful in the career of becoming a good front end web developer, one needs to digest ruleset properly.
CODE EXAMPLES
Example 1
div {
background-color: #000;
text-align: center;
}
From the CSS code above (“div”) is the selector which is the code that selects the HTML element that you want to style and (“background-color”, “text-align”) are the properties, the (“#000”) hexadecimal color code and (“center”) are the values.
Example 2
h1 {
color: blue;
font-size: 25px;
font-weight: 600;
}
In this example 2 our selector is (“h1”) and with more properties inside the declaration block (color, font-size, font-weight) with their various values immediately after the colon (“:”).
Example 3
p {
color: white;
font-size: 12px;
font-weight: bold;
}
Here in example 3 our selector is (“p”) and inside the curly braces is our declaration block which is made up of our various properties and values separated with a semi-colon.
Remember! Everything inside the curly braces is the declaration block which is the codes that describes the styles you want to apply to the said HTML. The declaration block is made up of properties with values. Declarations are the lines of codes written inside the curly ({ }) braces.
See the image below
THE CODE
CONCLUSION
Thanks for reading you have just successfully digest what ruleset is, don’t forget to clap, and share 😃. Thanks to the editor Blessing Krofegha i’m grateful 👍.
Want to learn CSS selectors?
See this article written by Venky Royals
