Learn CSS: Basics of Cascading Style Sheet by Vanamala Srinivas
Author:Vanamala, Srinivas [Vanamala, Srinivas]
Language: eng
Format: epub
Published: 2020-03-19T16:00:00+00:00
Live Preview
Exercise 2
Download the Exercise 2
Exercise 2: Add the “!!!’ before every paragraph
Tip: use p::before to apply the rule before the paragraph.
Live Preview
3 CSS Rules
3.1 Precedence
Usage of Precedence
There are many ways to write the same rule in different ways but which one will be applied on the browser depends on the precedence of the rule.
Some rule has higher priority or precedence over the other rules.
Here are some the rules of precedence:
Order of precedence and last one is applied and gets higher precedence.
ID selector has higher precedence than class selector.
div { color: red; }
div { color: blue’ }
div will be blue in color because of the order of the precedence.
CSS rule that is more specific has more priority and applied.
.text-blue{ color: blue; }
div.text-blue { color: blue; }
div.text-blue gets the higher precedence over normal .text-blue class selector because it is very specific to div tag.
Sample Example
Download the Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page Description">
<title>CSS Order Precedence</title>
<!-- CSS Starting -->
<style type="text/css">
h1 {
color: blue;
}
p {
color: green;
}
/* This takes the precedence over the first declaration */
p, h1
{
color: red;
}
/* First id then class then element */
/* The more specific the more precedence */
div
{
color: red;
}
#text-blue{
color: blue;
}
.text-green{
color: green;
}
div#text-blue{
color: lightblue;
}
</style>
<!-- CSS Ending -->
</head>
<body>
<h1>Heading</h1>
<p>Paragraph Text</p>
<!-- Guess what is the color of the text below -->
<div id="text-blue" class="text-green">
CSS Rule which is more specific has more precedence. <br>
id has more precedence over the class.
class is more predence over the element.
</div>
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Deep Learning with Python by François Chollet(12568)
Hello! Python by Anthony Briggs(9913)
OCA Java SE 8 Programmer I Certification Guide by Mala Gupta(9795)
The Mikado Method by Ola Ellnestam Daniel Brolund(9777)
Dependency Injection in .NET by Mark Seemann(9337)
Algorithms of the Intelligent Web by Haralambos Marmanis;Dmitry Babenko(8295)
Test-Driven iOS Development with Swift 4 by Dominik Hauser(7763)
Grails in Action by Glen Smith Peter Ledbrook(7696)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7557)
Becoming a Dynamics 365 Finance and Supply Chain Solution Architect by Brent Dawson(7054)
Microservices with Go by Alexander Shuiskov(6817)
Practical Design Patterns for Java Developers by Miroslav Wengner(6734)
Test Automation Engineering Handbook by Manikandan Sambamurthy(6675)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(6409)
Angular Projects - Third Edition by Aristeidis Bampakos(6079)
The Art of Crafting User Stories by The Art of Crafting User Stories(5607)
NetSuite for Consultants - Second Edition by Peter Ries(5547)
Demystifying Cryptography with OpenSSL 3.0 by Alexei Khlebnikov(5347)
Kotlin in Action by Dmitry Jemerov(5062)
