H1  TAG 

h1{
    color: red;
    background-color: yellow;
    font-size: 50px;
}

main.css 

<html>
<head>

    <link rel="stylesheet" href="main.css">

</head>
<body>
<h1>Hi I'm your header</h1>
</body>
</html>

home.html

What you see

Hi I'm your header

H1  TAG 

h1{
    color: red;
    background: yellow;
    font-size: 50px;
    padding: 10px;
    border-width: 5px;
    border-color: blue;
    border-style: solid;

}

main.css

 What you see

Hi I'm your header

The BOX Model

H1  TAG 

h1{
    color: red;
    background: yellow;
    padding-left: 30px;
    padding-right: 40px;
    padding-top: 50px;
    padding-bottom: 60px;
    border-color: blue;
    border-style: solid;
    border-left-width: 10px;
    border-right-width: 20px;
    border-top-width: 30px;
    border-bottom-width: 40px;
    border-left-color: red;
    border-right-color: green;
    border-top-color: black;
    border-bottom-color: pink;
    margin-top: 50px;
    margin-bottom: 25px;

}

main.css

Division tag

<div>     </div>

You can put whatever you want inside the <div>: text, images, other tags, or anything else.

Div tag

<html>
<head>

    <link rel="stylesheet" href="main.css">

</head>
<body>

<div>

<h1>Welcome</h1>
<h2>to</h2>
<p>Hi every-one</p>
<img src="">
<table></table>
<a href="">Hello</a>

</div>

</body>
</html>
div{
    color: red;
    background: yellow;
    padding-left: 30px;
    padding-right: 40px;
    padding-top: 50px;
    padding-bottom: 60px;
    border-color: blue;
    border-style: solid;
    border-left-width: 10px;
    border-right-width: 20px;
    border-top-width: 30px;
    border-bottom-width: 40px;
    border-left-color: red;
    border-right-color: green;
    border-top-color: black;
    border-bottom-color: pink;
    margin-top: 50px;
    margin-bottom: 25px;

}

home.html

main.css

Developer Weekend #3

By Prashanth Reddy

Source: Parth

Developer Weekend #3

next to deck

  • 983

More from Prashanth Reddy