CSS Help for Weather Tile

SharpTools.io (web)
7

Once you start getting into that level and amount of customization with CSS, it becomes difficult to just look at the CSS and understand all the potential implications. It’s really important to have a solid understanding of the fundamentals of CSS and how to troubleshoot using the tools in your browser.

There’s a variety of great resources available. Here’s a few you might find interesting:

CSS Tutorials
  1. MDN Web Docs - CSS Basics: This is a comprehensive guide that starts from the very basics. It’s well-structured and offers interactive examples.
  2. W3Schools - CSS Tutorial: This is a great resource for quick learning. It provides examples that users can try out in their browser.
  3. CSS-Tricks - A Complete Guide to CSS: This is more of an in-depth guide that covers almost every aspect of CSS. It’s great for users who want to dive deep.
  4. freeCodeCamp - Responsive Web Design Certification: This is a free course that not only teaches CSS but also how to make a web page responsive. It includes hands-on projects.
  5. YouTube - Net Ninja CSS Tutorial for Beginners: This is a video series that covers CSS in a very engaging manner. It’s great for visual learners.
CSS and Browser DevTools
  1. Google Developers - Get Started with Viewing and Changing CSS: This is a beginner-friendly guide that walks you through the basics of inspecting and modifying CSS using Chrome DevTools.
  2. MDN Web Docs - Examine and Edit CSS: This guide from Mozilla provides a detailed look at how to examine and edit CSS using Firefox DevTools.
  3. YouTube - Traversy Media: Chrome Dev Tools Crash Course: This video tutorial covers various aspects of Chrome DevTools, including a section dedicated to CSS.
  4. CSS-Tricks - A Guide to New and Experimental CSS DevTools in Firefox: This article is for those who want to explore some of the newer and experimental features in Firefox DevTools.
  5. Frontend Masters - Mastering Chrome Developer Tools v2: This is a more in-depth course that covers DevTools extensively, including how to debug CSS.
  6. Scotch.io - Debugging CSS with Chrome DevTools: This tutorial goes into the specifics of debugging CSS issues using Chrome DevTools.

If you already have a good understanding of CSS fundamentals, reviewing Google’s DevTools Introduction is probably a good next step for better understanding how to troubleshoot CSS rules.

–

From a quick look, I’m not seeing anything that really sticks out to me. A few minor things, but nothing I would have thought would ‘break’ things.

  • .tile .title will shift the top position and font size of the Title
  • .tile.weather .title will align the Title of the Weather tile left
  • If the weather named style is applied:
    • .tile.--theme-style-weather .title moves the title back to the top left and adjusts the font size
    • Note that the !important is applied incorrectly here. It needs to be within the ; of the property you are trying to apply it to as it is applied per-property.