<style type="text/css">
.lyrics{
font-size:32px;
color:red;
}
.lyrics-second{
font-size:32px;
color:block;
}
.lyrics{
font-size:16px;
color:blue;
}
</style>
<p class="lyrics">I want to be the minority</p>
<p class="lyrics-second">I don't need your authority</p>
<p class="lyrics">Down with the moral majority</p>
<p class="lyrics">'Cause I want to be the minority</p>
font-size & color are overwritten by last Class Selector
"id" > "class"
The longer the description, the higher the priority
<style type="text/css">
.lyrics{
font-size:32px;
color:red;
}
p.lyrics{
font-size:32px;
color:block;
}
</style>
<p class="lyrics">I want to be the minority</p>
<p class="lyrics">I don't need your authority</p>
<p class="lyrics">Down with the moral majority</p>
<p class="lyrics">'Cause I want to be the minority</p>
<style type="text/css">
.lyrics{
font-size:32px;
color:red;
}
p.lyrics{
font-size:32px;
color:block;
}
div p.lyrics{
font-size:16px;
color:blue;
}
</style>
<div>
<p class="lyrics">I want to be the minority</p>
<p class="lyrics">I don't need your authority</p>
<p class="lyrics">Down with the moral majority</p>
<p class="lyrics">'Cause I want to be the minority</p>
</div>
When you use "!important" , this effect become top priority.
<style type="text/css">
p{
color:red!important;
}
p{
color:block;
}
</style>
<p>I want to be the minority</p>
<p>I don't need your authority</p>
<p>Down with the moral majority</p>
<p>'Cause I want to be the minority</p>
I pledge allegiance to the underworld One nation under dog There of which I stand alone A face in the crowd Unsung, against the mold Without a doubt Singled out The only way I know
Usually we use css by 3 way.
This way is the most popular way.
<head>
<link rel="stylesheet" type="text/css" href="/material/css/style.css">
<link rel="stylesheet" type="text/css" href="/material/css/sub.css">
</head>
<head>
<link rel="stylesheet" type="text/css" href="/material/css/style.css">
<link rel="stylesheet" type="text/css" href="/material/css/sub.css">
<style type="text/css">
html{
box-sizing:border-box;
}
p{
font-size:16px;
color:block;
}
</style>
</head>
<body>
<style type="text/css">
h1{
font-size:32px;
color: #E91E63;
padding:16px;
}
h2{
font-size:28px;
color: #333;
border-bottom:1px dotted;
}
</style>
</body>
<div>
<p class="lyrics" style="font-size:48px;color:#3f51b5;">I want to be the minority</p>
<p class="lyrics">I don't need your authority</p>
<p class="lyrics">Down with the moral majority</p>
<p class="lyrics">'Cause I want to be the minority</p>
</div>
Priority are write inline >> write file directly >> include css files.
Using "!important" change the top priority than anything else.
We use Above website by free. Let's click button and try freely.