28/10/2019

Lesson 5 - Supplementary explanation

CSS Rules

Priority Order

The one written later takes precedence when the same Selector or Name

EXAMPLE


<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>

result

font-size & color are overwritten by last Class Selector

Selector Priority

"id" > "class"

Selector Length

The longer the description, the higher the priority

EXAMPLE


<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>

result


<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>

result

Important

When you use "!important" , this effect become top priority.

EXAMPLE


<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>

result

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

Inline

Usually we use css by 3 way.

include css files

This way is the most popular way.

EXAMPLE

    

      <head>

        <link rel="stylesheet" type="text/css" href="/material/css/style.css">
        <link rel="stylesheet" type="text/css" href="/material/css/sub.css">


      </head>
write file directly
As creating AMP page or CSS weight reduction, we use this style.

EXAMPLE



      <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>
write inline

EXAMPLE




<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.