You will find that style sheet syntax is relatively easy to learn, once you understand the basic principles.\u00a0 Style sheets establish rules that declare how certain elements are displayed on the webpage.\u00a0 Every style sheet rule has two parts: A selector and a declaration.<\/p>\n\n\n\n
The Selector<\/h2>\n\n\n\n
The selector is connected to a particular style within the HTML.\u00a0 The selector defines which element will be affected by the declaration.\u00a0 Any element used in html can be a selector, such as \u2018p\u2019, \u2018h1\u2019, or \u2018ul\u2019<\/p>\n\n\n\n
The Declaration<\/h2>\n\n\n\n
The declaration applies a style to the selector and is split up into two parts: property and value.\u00a0 The property is the aspect of the selector that is being defined.\u00a0 The value lays out the exact specification of the property.<\/p>\n\n\n\n
Here is an example of the different parts that make up a rule:<\/p>\n\n\n\n Look at the image above and you\u2019ll notice a few basic rules to follow when using style sheets:<\/p>\n\n\n\n More often than not, you will want to declare a few properties for the same selector. Grouping properties follows the same format as above, and can be displayed like this:<\/p>\n\n\n\n When defining multiple properties for the same selector, make sure that every value is followed with a semicolon.<\/p>\n\n\n\n When dealing with a selector containing multiple properties as shown above, it is good practice to lay out the code in such a way that is simple to read.\u00a0 Obviously, placing 5 properties on the same line can look messy and be difficult to read.\u00a0 The key to readability is proper use of white space.\u00a0 When using style sheets, white space is a matter of preference.\u00a0 You can add as little or as much space in between properties as you like.\u00a0 With that in mind, it is a good practice to place multiple properties on separate lines, like this:<\/p>\n\n\n\n Do you see how much easier that is to read than a linear format?\u00a0 Just like HTML, it is important that you write clean code with CSS.<\/p>\n\n\n\n Let\u2019s say that you want a few different elements to have the same style. Rather than declaring each style separately, you can group similar selectors together and save space. Simply separate each selector with a comma, like this:<\/p>\n\n\n\n Using the fundamentals laid out above, below is an example of actual CSS code and the corresponding HTML.\u00a0<\/p>\n\n\n\n![\"\"\/](\"https:\/\/www.mrc-productivity.com\/forum\/images\/selectorimage.jpg\")
<\/figure>\n<\/div>\n\n\n\nBasic Rules<\/h2>\n\n\n\n
\n
Grouping Properties<\/h2>\n\n\n\n
h1 { font-family: arial; color: red; font-weight: bold; }<\/pre>\r\n<\/div><\/code><\/pre>\n\n\n\nVisual Formatting<\/h2>\n\n\n\n
p {\r\n color: red;\r\n font-family: arial;\r\n font-weight: bold;\r\n background-color: blue;\r\n }<\/code><\/pre>\n\n\n\nGrouping Selectors<\/h2>\n\n\n\n
p, h1, th {\r\n color: red;\r\n font-family: arial;\r\n background-color: blue;\r\n }<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
<html>\r\n<head>\r\n<style type=\"text\/css\">\r\np {\r\n font-family: arial;\r\n color: blue;\r\n background-color: gray;\r\n border: 2px solid black;\r\n font-weight: bold;\r\n width: 200px;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<p>\rThis is blue text on a gray background.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n