You may also see a lot of inline styles in HTML email to achieve compatibility with as many email clients as possible. For the exercise that follows, create a folder on your computer. You can name the folder whatever you want. Inside the folder, copy the text below to create two files:.
A selector targets HTML to apply styles to content. We have already discovered a variety of selectors in the Getting started with CSS tutorial. If CSS is not applying to content as expected, your selector may not match the way you think it should match. Each CSS rule starts with a selector — or a list of selectors — in order to tell the browser which element or elements the rules should apply to.
All the examples below are valid selectors or lists of selectors. Try creating some CSS rules that use the selectors above. Add HTML to be styled by the selectors. If any of the syntax above is not familiar, try searching MDN. Note: You will learn more about selectors in the next module: CSS selectors.
You may encounter scenarios where two selectors select the same HTML element. Consider the stylesheet below, with a p selector that sets paragraph text to blue. However, there is also a class that sets the text of selected elements to red. Suppose that in our HTML document, we have a paragraph with a class of special.
Both rules apply. Which selector prevails? Do you expect to see blue or red paragraph text? The CSS language has rules to control which selector is stronger in the event of a conflict.
These rules are called cascade and specificity. In the code block below, we define two rules for the p selector, but the paragraph text will be blue. This is because the declaration that sets the paragraph text to blue appears later in the stylesheet.
Later styles replace conflicting styles that appear earlier in the stylesheet. This is the cascade rule. However, in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering the paragraph text red. How can this happen even though a conflicting style appears later in the stylesheet?
A class is rated as being more specific, as in having more specificity than the element selector, so it cancels the other conflicting style declaration. Try this experiment for yourself! Next, change the first p selector to. The rules of specificity and the cascade can seem complicated at first. These rules are easier to understand as you become more familiar with CSS. The Cascade and inheritance section in the next module explains this in detail, including how to calculate specificity.
For now, remember that specificity exists. Sometimes, CSS might not apply as you expected because something else in the stylesheet has more specificity. Recognizing that more than one rule could apply to an element is the first step in fixing these kinds of issues.
The example below highlights a single property and value. The property name is color and the value is blue. When a property is paired with a value, this pairing is called a CSS declaration.
In the example below, highlighting identifies the CSS declaration block. The example below contains two rules: one for the h1 selector and one for the p selector. The colored highlighting identifies the h1 rule. The property is the style attribute you want to change; they could be font, color, background, etc. Each property has a value, for example color property can have value either blue or FF etc.
In the example above h1 is a selector, color and text-align are the CSS properties, and the given blue and center are the corresponding values of these properties. Comments are usually added with the purpose of making the source code easier to understand. It may help other developer or you in the future when you edit the source code to understand what you were trying to do with the CSS. Comments are significant to programmers but ignored by browsers.
As mentioned, user stylesheets can include! A special needs user can add! In this case, the text size was adjustable without using! If, however, the text size for body copy was set in the author stylesheet using an! The inclusion of! There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly.
In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. The highlighted background style rule has a line through it , indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired. In the CSS cascade, inline styles will override regular styles , so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules.
You can circumvent this problem using an! You can give an individual page its own styles using the code presented in this post on the Digging Into Wordpress blog. The use of! So you should do your best to give your CSS proper forethought and avoid using!
Even in many of the uses described above, the inclusion of!
0コメント