Tag: #CSSTRAINING

Posted on

Cascading of CSS Rules

As I previously mentioned in one of my other posts, for educational purposes, you may comingle and use inline styling, with internal styling and external styling. However, in private industry and as a best practice measure you should only use external styling. With that said, if you do use all three stylings, you should understand how conflicts between rules are resolved. In other words, if there are two or more rules that apply to the same element or tag, it is important to understand which will apply or take precedence. Before you can determine that, you must know some basic CSS rules.

Last Rule

The last rule states that if two selectors are identical, the latter of the two will take precedence. In the example listed below, the background color for the paragraph element will be red because the last rule is the one that applies.

P{
    background-color: blue;
}

P {
    background-color: red
}

Rule of Specificity

If there is a conflict between two rules where two selectors are selecting the same element or tag, the selector with the more specific selector will have precedence over the other. In the example below, the universal selector is selecting everything and styling it with a red background, however the paragraph selector is also selecting paragraphs and styling it wit a blue background. Is the paragraph element going to have a red background or a blue background? The answer is blue. Why blue? Because the “P” selector is more specific of a selector than the universal selector. Actually, the universal selector is not specific at all. It pics all the elements on a page.

* { 
    background-color: red;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>

CSS Keywords

In order to override any predetermined rules in CSS, you could use the keyword !important after any property value to indicate that a rule that otherwise would not be as important is now more important because it has the keyword !important after the declaration. keep in mind that the !important keyword must be used for each declaration that you want to declare as more important.

Using the example below, normally the rule of specificity would state that the paragraphs would be blue because the selector is more specific. However, by adding the !important keyword, we are breaking the rule of specificity for that declaration.

* { 
    background-color: red !important;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>
Posted on

CSS Rule Sets (valid syntax) & Selectors

What is a CSS Rule

A CSS Rule is a rule which states how an element or tag will look or should look. Using a valid syntax the rule can be applied to a single element or tag or many elements or tags.

CSS Selectors are case sensitive, so they must match element names and attribute values exactly.

CSS Rules Break Down

//Selector
P {
     color: blue;      //Declaration 1
     font-size: 14px;  //Declaration 2
}
Note - The declaration block is defined by the "{}".  Declarations are always placed inside the curly braces and you can place as many declarations as you would like inside of the curly braces.

Selector - selects the element or tag that the CSS rule will style.
Declaration  - defines the style to be applied (the look).
Declaration syntax - declarations are always defined by a declaration block  :  declaration value ;

The colon is the separator between the property or declaration name and the value.
The semicolon defines the end of the declaration.

Different Types of Selectors

Selector TypeDescriptionExample
Universal SelectorApplies to all elements in the document* {} targets all elements on the page
Type SelectorMatches Elements Namesh1, h2, h3 {} Targets the elements <h1>, <h2><h3> at the same time.
Class SelectorMatches an element whose class attribute value is the same one after the period..test{} Targets any element whos class value = target.
ol.test{} Targets only order lists whose class value is test.
ID SelectorMatches an element whos id attribute value matches the one after the pound or hash symbol#complete {} Matches any element or tag with an id that has a value of complete or id=”complete”
Child SelectorMatches any element who has a direct child of anotherP > a {} Matches any anchor tag that is a direct child of a paragraph.
Descendant SelectorMatches an element or tag that is a descendent of another specified element.P a {} Targets any anchor tag that sits inside of a paragraph element no matter how deep into the paragraph.
Adjacent Sibling SelectorMatches an element that is the next sibling of anotherh4 + p {} Matches any paragraph directly after the h4 but not other paragraphs
General Sibling SelectorMatches a element that is a sibling of another but doesn’t have to directly afterh4 ~p {} Matches any paragraphs that are siblings of an h4.
Selector Types Explained