A first glimpse at CSS--courtesy of XenForo. This is definitely a hands-on tutorial, so grab yourself a web page (XenForo works well) and give this a whirl. First, find an interesting element on the page, maybe a header or a text box, and right (option) click on it. Kind of like this: Wow, look at all that code! Try sliding the blue bar up and down to see the different elements highlighted on the web page. Told you this would be fun. But there's more to this than just looking. You can actually try different styles right there in the Inspector. Don't worry, this isn't permanent. No one can see what's going on here except you. Let's take a shot at turning some text red. First activate the color picker on your element. Then move the slider to red, or something equally ostentatious. That was easy, wasn't it? But unfortunately, the changes affect more than just the breadcrumb text! If you look closely you'll see that 'Add tags' was changed too, and probably other elements that aren't visible on this screen. Did you see things changed other than what you selected? If you did this will call for some more precise styling, which fortunately is at your fingertips in the style rule window. First, refresh the page to get back the original color scheme. (More on that later.) Now it's time to get serious and work on the most specific styles. Did you try that? Did it look something like this? Did your breadcrumb text behave itself much better? Whew! What a lot of effort for just a few letters. Fortunately, we don't have to do all that from scratch! The funnest part though is this works for almost all other websites. Right click, and Shazam!, you can play with color schemes almost anywhere! Your assignment for this lesson: Find a website that drives you crazy, and change up the color scheme a little. Post a screenshot of your efforts on this thread.
