5 Steps to Improve Your CSS Knowledge in 24 Hours

1. 5 Steps to Improve Your CSS Knowledge in 24 Hours You’ve been coding for a while and are familiar with CSS files. You’re no master, but with a little fiddling, you can get where you want to go. You’re wondering if you’ll ever get past the point where CSS is so difficult. Will you ever be able to create a complex layout without relying on trial and error to determine what works and what doesn’t? The good news is that you can get past the frustrating point where you know enough CSS to code a website but lack the solid foundation that allows you to code without the annoyance of not knowing exactly how you’re going to get there, and this point is much closer than you think. I propose five topics that will significantly improve your understanding of CSS. Spend some time reading about each of them over the next twenty-four hours, and you’ll forever change the way you code. 1.Wrap Your Mind Around Positioning Contexts If you truly want to understand how to use CSS to move HTML elements where you want them to go, you must first understand positioning contexts. And I don’t just mean a passing understanding; I mean a thorough understanding of their differences, behaviours, quirks, and so on.There are five position values that you should be aware of. If you can’t name all five without looking them up, you’re

2. definitely a good candidate for this course. They are as follows: static, fixed, relative, absolute, and inherit. All five must be known and understood, but the big two that will change the way you code are absolute and relative positioning. I promise that learning to use these two positioning contexts separately and then combining them will fundamentally change the way you view CSS layout. It’s a revelation that will make your life so much easier. Resources to Help You Get There The Difference Between Absolute and Relative PositioningThis is my in-depth examination of the topic of positioning context. I mention and explain all five briefly, but I really focus on the big two: how they differ, how they’re different, and how they work together. After reading this article, you’ll be well on your way to CSS positioning headache-free. CSS Positioning 101

3. This piece comes from the venerable A List Apart blog, so you know it’s going to be thorough as well as extremely educational. The article was published in 2010, but the information remains current and serves as an excellent introduction to all five positioning contexts. It’s not a visually appealing article, but it does provide plenty of simple code examples to help you understand each concept. Learn CSS Positioning in Ten Steps This is an excellently concise overview of the various positioning contexts. Instead of a single lengthy article, this page displays a small box with ten tabs. Each tab contains a snippet of code as well as a sentence or two explaining the code. A live example layout that updates with each tab is shown to the right. This format is fantastic for visually connecting code snippets to the layouts they generate, and highly recommend checking it out if you struggle with mostly text explanations like the one above from ALA. 2. Master Floats When you first start learning CSS, floats appear to be one of the most broken layout systems imaginable. Once you understand how to use them on a basic level, you must learn all about how parents with only floated children have a collapsed height, which leads to 47 different ways to solve the problem using clearfixes and overflow manipulations.Fortunately, you get used to the concepts behind floats over time, and they can even become so simple to use that you don’t

4. give them much thought. The only thing standing in your way is a solid article or two that delves deep and thoroughly explains float behaviour and techniques from the ground up. Resources To Get You There Everything You Never Knew About CSS Floats In this article, I cover nearly the entire range of CSS float topics. It begins with a basic explanation of what floats are and how they work. Following that, I discuss how floats affect the boxes of the elements involved, how floats behave strangely with elements of varying heights, the nine float rules, and, of course, the collapsing height debacle and how to fix it. All About Floats

5. Chris Coyier has always been my favourite author for CSS-related topics, and his introduction to floats is no exception. This article will provide you with a brief but straightforward explanation of how to work with floats. The simple, appealing illustrations used throughout the article are particularly appealing to me. The Mystery Of The CSS Float Property While Chris Coyier’s articles are typically brief and to the point, the content on Smashing Magazine is typically quite extensive, with numerous examples and relevant discussion. This article introduces the concept of floats, explains how to use and clear them, and then moves on to a discussion of where floats are commonly used in real- world sites. This one is for you if you want to see the theory come to life. Improve Skill with CSS Quiz- The CSS quiz contains multiple-choice questions (MCQs) about CSS. You must read each of the provided answers and choose the most accurate one. If you’re not sure about the answer, click the Show Answer button to confirm it. Press the Next Quiz button to view a new set of quiz questions. 3. Know Your Selectors

6. One of the keys to writing good clean CSS is to understand what CSS selectors are available to you, how they work, and how well they are supported by various browsers. It may appear to be a simple topic, but the world of CSS selectors is actually quite complex.There’s a lot to learn here, from using attribute value selectors and targeting keywords in class names to how the universal selector can help you debug your code. Even if you believe you can get by without understanding a bunch of fancy selectors, the truth is that other coders use this stuff every day, and you must be able to understand what you’re seeing when you hit view source! Resources To Get You There CSS Selectors: Just the Tricky Bits This is a fun article that focuses on the more complicated aspects of CSS selectors. I skip the fundamentals and get right into how the DOM

7. concept translates to CSS targeting of various aspects of your document. You’ll learn how to select children and siblings, as well as how to chain selectors and much more. The 30 CSS Selectors you Must Memorize Jeffrey Way is a web development rockstar, and articles like this demonstrate why. This Nettuts+ article covers a wide range of CSS selectors in a straightforward and concise manner that emphasises browser compatibility. Jeff even created live demonstration pages for each of the thirty selectors. CSS Attribute Selectors: How and Why You Should Be Using Them Attribute value selectors are one of the most powerful subsets of CSS selectors, and CSS3 significantly expands their capabilities. With a little attribute value magic, you won’t believe how versatile your selectors can become. You’ll be able to use phrases like “arbitrary substring attribute value selector” like a pro after reading this article. 4. Learn DRY Coding Concepts “Do Not Repetition Yourself.” When it comes to coding, this simple phrase has far-reaching implications. When you dive deep into DRY coding practises, you get cleaner code, less work, and a beautiful new workflow that is as empowering as it is awesome.Unlike the other

8. topics mentioned above, which are fairly narrow in scope, this one covers a wide range of practises, techniques, and ideas. Surprisingly, one of the things that has recently drawn my attention to DRY coding practises is the use of CSS preprocessors. Many people believe that preprocessors cause poor coding practises, but the reality is quite the opposite. Preprocessors, of course, help to avoid manual repetition, but it goes beyond that. Examining the output of tools such as LESS and SASS, as well as the goals of the languages in general, has resulted in me writing better pure CSS! When you master Sass concepts like @extend, you can’t help but consider the implications when coding with only CSS. Resources To Get You There DRY CSS: Don’t Repeat Your CSS Steven Bradley introduces you to the topic of DRY CSS and discusses some of its main principles and goals in this article. He distils the practise down to three simple ideas and demonstrates how to apply these ideas in a real-world workflow. The ideas are largely based on a Jeremy Clarke presentation on the same subject. An Introduction To Object Oriented CSS (OOCSS) As I previously stated, the ideas inherent in the DRY CSS movement are quite broad and directly related to concepts in other constructs.

9. OOCS is a popular methodology for creating faster, more efficient stylesheets with superior organisation and less repetition. Separation of structure from skin and separation of containers and content are the two main principles at work in OOCS. This Smashing Magazine article will walk you through the fundamental concepts and help you apply them to your own work. An Introduction To SMACSS Guidelines For Writing CSS Remember Steven Bradley from the first DRY CSS article? He also wrote this piece, which describes a project that is similar to but not the same as OOCS: SMACSS (a project from Jonathan Snook). SMACSS, like OOCSS, has two primary goals. The first is to boost the semantic value of a section of HTML and content, while the second is to lower expectations of a specific HTML structure. This article explains both goals in detail and includes code examples to demonstrate SMACSS in action. 5. Know Your Browser Support The fifth and final key to CSS improvement is understanding what works where. CSS3 is far too appealing for most of us to ignore, but the hard truth is that much of it doesn’t work in certain browsers (by “certain browsers,” of course, I mean Internet Explorer).The big secret that newbie web developers must learn is that they do not need to memorise every single CSS feature and how every browser known to man handles it; instead, there are absolutely amazing resources

10. available to you that provide this information for free; you simply need to know where to look. Resources To Get You There CSS3 and HTML5 Browser Support: Invaluable Resources to Use Today In this article, I will introduce you to the few sites that I have saved for checking browser support. These resources are fantastic, visually appealing, and provide you with the information you require quickly so you can get back to coding. Take a look to find out what they are! Browser Support for CSS3: What’s the Current Status? This article was written over a year ago, so the “current status” section is debatable, but not enough has changed to render the information in this article obsolete. It provides an extremely useful overview of various CSS3 properties, divided into sections based on what works everywhere and what you should avoid. It will only take you a few minutes to read and is well worth your time. The Importance of Cross-Browser Compatibility: Resources and Tips If you’re new to CSS and want a basic introduction to the topic of browser compatibility and why it’s important, check out this Noupe article. It does more than just sell you on the concept of compatibility;

11. it also lists a number of excellent resources that you can use to ensure maximum compatibility. The list of tools for testing your site in different browsers is particularly interesting.