Cascading Style Sheets(CSS)

Cascading Style Sheets(CSS) delivers a wide range of stylization and effects, enhancing the web app without sacrificing semantic structure or performance .
Master CSS
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
Explore further World Wide Web Consortium (W3C)

  1. Learn about selectors: how they work? what is available? when to use each?
  2. Learn about properties: how they work? what is available? when to use each?
  3. Practice! practice a lot!
    1. Start with valid HTML5 code. (Review HTML5 regularly)
    2. Identify and evaluate how each component of the content is to be presented. (Overview of CSS3)
    3. Create each CSS rule, starting with the general, start with the top of DOM, to achieve the desired presentation.
    4. Test, experiment, make observations. Look for improvements.
    5. Follow guidelines, document your code well, and keep your CSS tidy.
  4. Repeat. Commit to 30-45 minutes a day for a month. Always push the boundaries to learn more. Practice to achieve higher level of mastery.
Follow guidelines
Organize your code
  • Resetting browser defaults Each browser has default values that will be applied to elements in the absence of CSS style rule. This can cause inconsistencies in the appeaarance of the page design across different browsers. It is important to reset the browser's default values to ensure that your style sheet has total control of the design.
  • Modularizing style sheets When styling large websites, it is ueful to make individual sheets for different purposes and then link them in a single mater style sheet.
  • Describing sections Each style sheet should be separated into sections with commented headings, desribing the purpose of that section. This makes the code easier for others to understand and easier for you to understand when revisiting the code some time later.
  • Keeping your code consistent List the rule declarations in alphabetical property order to more readily find a declaration. Give preference to including the terminating semi-colon after the final declaration. (although optional, easy to miss later when appending further declarations)
Optimize style rules
  • Inheriting values It is important to recognize that many property values of a parent element are inherited by the child element it contains. Most commonly the font and color properties are inherited from the containing parent element. If a style rule sets these properties for the parent element a further rule need not repeat them for the child element (unless different values are desired).
  • Sizing text When specifying text size, it is best practice to avoid absolute unit values in order to allow the user to enlarge text. The preferred method is to size text relative to the browser using em units. Standard browser font size is 1em, which is equal to 16px.
  • Employing shorthand Always use CSS shorthand properties rather than individual properties to keep style sheet code concise.
  • Employing multiple classes The HTML element's class attribute can be assigned multiple values, each separated by a space. This is a very powerful feature, allowing you to apply styles from more than one class to any element.
Validate style sheets
Web broswers make no attempt to validate code, so it is important to verify every HTML document and CSS style sheet before the web page is published, even when the page looks fine in your browser. When the browser encounters code errors, it makes a guess at what is intended, but different browsers may make different interpretations and so display the page incorrectly. W3C provides free online validator tools that check web page code for errors and warnings.
Keep your CSS tidy
  • Keep it consistent
  • Format readable CSS
  • Comment your CSS
  • Create logical sections in your stylesheet
  • Avoid overly-specific selectors
  • Break large stylesheets into multiple smaller ones
Read more @ MDN
Document with comments

As with HTML, you are encouraged to make comments in your CSS, to help you understand how your code works when coming back to it after several months, and to help others coming to the code to work on it understand it.

Comments in CSS begin with /* and end with */. In the below code block I have used comments to mark the start of different distinct code sections. This is useful to help you navigate your codebase as it gets larger — you can search for the comments in your code editor.