What is the order of priority for my stylesheet elements
The specificity or order of css rules is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.
In case of specificity equality, the latest declaration found in the CSS is applied to the element. We are starting from the lowest ranking to the highest.
Universal selectors – (*)
CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk (*) is used to denote a CSS universal selector and is used to style all the elements of an HTML page. An asterisk can also be followed by an selector when you are wanting to set a style for all of the elements within an element of an HTML page.
At its most basic, the Universal Selector looks like this:
* {
margin: 0;
padding: 0;
}
This code sets the padding and margins on all elements to zero.
Universal selector with another selector:
body * {
margin: 0;
padding: 0;
}
This code sets the padding and margins of all elements within body to zero.
Type selectors – (em, h1, p, ul, li)
Type selectors will select any HTML element on a page that matches the selector:
Example:
em{
color: purple;
}
This rule will select any <em>
element on the page and color it blue.
Pseudo-classes – (:hover), (:visited)
For example, it can be used to:
A pseudo-class is used to define a special state of an element.
- Style an element when a user mouses over it
- Style visited and unvisited links differently
/* unvisited link */
a:link {
color: blue;
}
ID selectors – (#big)
Example of ID selector in HTML code:
<span id="important">Here's a span with some text.</span>
<span>Here's another.</span>
Class selectors are used to select any HTML element that has a id attribute matching the the id selector.
If you want to target a specific section of text in your document you would place it within in the inline element<span>
and add an ID so it can be styled in your CSS.
The CSS example could be:
{
#important {
font-size: 110%;
font-weight: bold;
font-color:Red
}
Inline style
Example of inline style applied to the paragraph:
<p style=”text-align: center;”>
<span>target</span>
</p>
Inline style are styles applied directly into the HTML code by adding the style attribute along with any CSS properties.
!important
When an !important rule is used on a style declaration, it overrides any other declaration made in the CSS including inline styles from the mark up. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.
Adwords (1)
Branding (13)
- Branding 101
- Why we don’t offer standard prices
- Graphic Design Brisbane
- How much should we spend on corporate rebrand
- How to choose a domain name
- Review of latest free web safe Google fonts
- Logo Design
- Logo Design Brisbane
- Is Company Branding Important to Logo Design?
- Questions to consider before building your website.
- Redesigning logos the right way
- Small business branding or Product branding ?
- Why redesign a website
CMS (3)
CSS (6)
Graphic Design (6)
Javascript (1)
PHP (3)
SEO (5)
tech support (5)
Web Design (10)
- Difference between fluid, reponsive & adaptive design
- Why we don’t offer standard prices
- Example of working print.css file
- Graphic design is more than just logos
- Why pay to maintain my website
- Questions to consider before building your website.
- Sample reset css file for web project
- WordPress – 5 reasons why you should use it
- Why redesign a website
- WordPress – Why not to use it.
Web Development (10)
- How risky are WordPress plugins
- Displaying dates using PHP
- jquery conflicts – how to avoid
- Modify the admin menu bar in WordPress
- Why pay to maintain my website
- Questions to consider before building your website.
- Recent updates to Google search results explained
- Sample reset css file for web project
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
Wordpress (17)
- How risky are WordPress plugins
- Bootstrap & Less – compile online
- How important is https for my website
- Create content that will be read
- Modify the admin menu bar in WordPress
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
- WordPress – 5 reasons why you should use it
- WordPress – adding Google Fonts
- WordPress – CF7 – select fields – CPT
- WordPress – what plugins should developers use
- WordPress – Tinymce extra plugins
- WordPress – Why not to use it.
- WordPress working with ACF Pro
- WordPress – working with cookies – Javascript
- WordPress – working with cookies – PHP
- Displaying categories in sidebar using javascript, jquery & php