CSS

CSS stands for cascading style sheets, which is a language used to determine the appearance and format of website pages. With CSS, you can set the font type, text color, and background of the page.
What about this tag /* This is comments on css */ or // This is comments on css.
Below is an example code of css :

// This comment one line
/*
* This Comments in the line continue
*/

On CSS you can add id/class of css.
Create Class on your project html.

Example Code Class :

<!DOCTYPE html>
<html>
    <head>
        <!-- Your title web -->
        <title>Guide CSS | CusMeDroid<title>
    </head>
    <style>
        // class is first
        .first {
            padding: 4px;
            font-size: 14px;
            color: #111;
        }
    </style>
    <body>
        <!-- call class first -->
        <p class='first'>What changes are you seeing?</p>
    </body>
</html>

Create Id on your project html.
Example Code Id :

<!DOCTYPE html>
<html>
    <head>
        <!-- Your title web -->
        <title>Guide CSS | CusMeDroid<title>
    </head>
    <style>
        // id is first
        #first {
            padding: 8px;
            font-size: 16px;
            color: #111;
        }
    </style>
    <body>
        <!-- call id first -->
        <p id='first'>What changes are you seeing?</p>
    </body>
</html>

How do make html and css separate files?
First you create a folder with the name of your project, then create a style.css
Fill in the code below :

// id in style.css
#myfirst {
    padding: 12px;
    font-size: 18px;
    background: orange;
    color: #111;
}
.myfirst {
    padding: 12px;
    font-size: 18px;
    background: red;
    color: #FFF;
}

And in the index you need to call style.css
Fill in the code below :

<!DOCTYPE html>
<html>
    <head>
        <!-- Your title web -->
        <title>Guide CSS | CusMeDroid<title>
        <!-- This for call style.css -->
        <link rel='stylesheet' type='text/css' href='style.css'>
    </head>
    <body>
        <!-- call id first -->
        <p id='myfirst'>What changes are you seeing?</p>
        <p class='myfirst'>Different from the above?</p>
    </body>
</html>

Lvl Up #1 →