2.2: Core Concepts in CSS Coding
These videos introduce CSS coding and will help orient you to the subsequent lessons dealing with specific elements and attributes used in CSS coding. Note that these videos deal with some more advanced topics (like formatting colors, menus, and images) that will be addressed in subsequent units.
2.2.1: Comments in External CSS Files
The use of comments in CSS is very similar to the use of comments in HTML. However, as you will soon see, CSS for even a simple webpage takes requires a trained eye. As you develop that eye, it will be very useful for you to use comments liberally: consider commenting every rule in your style sheet, indicating what you intend the rule to do, so that if you have surprising results you can compare what you intended to your actual output and try to pinpoint where you went wrong.
2.2.2: Basic Syntax for Styles in CSS
This short chapter spells out the syntax for style rules in CSS that you may have already deduced from the examples in the "Syntax" chapter of Cascading Style Sheets you read in sub-subunit 1.4.3: The Essential Anatomy of an External CSS File.
Based on what you have just read, take a look at your "mystylesheets.css" file and see if you can identify the different parts of each style and guess their function. Consider experimenting with these styles to see if you can change how your "index.htm" file appears in the Web browser - but remember to keep back-up copies of your files!
2.2.3: Formatting Text Using CSS
One typical use of CSS is formatting fonts and text when you present the content of an HTML file. The Fonts and Text chapter introduces many of the core techniques for modifying the appearance of text, while the Lengths and Units chapter introduces the measuring systems used for changing the size and position of HTML elements.
Based on what you have just read, you should experiment with using several of these text-formatting techniques by modifying your "mystylesheets.css" file to produce different appearances for your "index.htm" file.
2.2.4: Inline Styles, Embedded CSS, and Externally Linked CSS
We have already learned in sub-subunit: 1.3.3 Applying CSS to HTML that there are three different ways of applying styles to HTML. While we have already created an example of "external" or "linked" CSS (which is generally the best practice for web coding), it is important for you to be able to distinguish between inline, embedded, and external use-cases of CSS. This is particularly true if you are working with existing websites that may more than one of these techniques, or if you are using a content management system that prevents you from linking to external style sheets.
For the purposes of learning these different techniques, create a few copies of "index.htm" in different directories and try using the techniques you have learned in this unit to modify the presentation of your paragraphs and headings using each technique. Also try using two or more of these techniques to modify the same version of your "index.htm" file - you will likely have unexpected results if your styles conflict. Keep this in mind as you advance through the rest of this unit, as the reasons for this will become more clear as you come to understand the "cascading" nature of "Cascading Style Sheets."
2.2.5: CSS Selectors
Selectors are the means through which a CSS file "selects" specific elements from an HTML file and then applies a specified style to those elements. For example, if you want to apply a style to some, but not all paragraphs on your webpage, class selectors will allow you to do this; similarly, if you want to apply a style just one element on your webpage, id selectors will make this possible. In this regard, selectors are the core technique that enables you to abstract presentational information into the CSS file while leaving semantic information in the HTML file. NOTE: Since Internet Explorer 6 is extremely outdated at this point, you may choose to ignore the advice given in this chapter about incompatibilities with this browser; also don't worry about discussion of XML or later versions of CSS that appear in this chapter, as these are not concepts you need to know to continue working with your example webpage.
Spend some time looking at the CSS file you have already created and experimenting with selectors to modify the presentation of your HTML file. Remember that id and class selectors will only work if you specify the ids or classes in your "index.htm" file - go ahead and experiment with this using the examples in this chapter.
2.2.6: Cascading, Inheritance, and Conflicting Styles in CSS
What does the "cascade" in "cascading style sheets" mean? What happens if there is presentational markup in an HTML file and conflicting information in an external style sheet? Though difficult, the concepts in this chapter are crucial for understanding how and when style rules are applied, especially when inline, embedded, and externally linked style rules are present in the same page or site.