Day-9 Adding CSS & Tribute Page

We will now introduce a little bit concept of CSS , so that we can use it with in our HTML Projects, and to make our HTML pages more attractive.

basics.txt

Just understand how css works

CSS: cascading style sheets. these are used to include styling/designing into Web pages. There are three ways to achieve CSS.

Inline: Inline CSS means in the line of html element, style will be applied as a attribute.
```
 <h1 style="color:red">something</h1>
```

2. Internal: Internal styling means apply style as a element

<style>
   selector{
    property-name:value;
   }
</style>

selectors can be directly tagnames like h1,div etc.., or classname like .class1 , .class2 etcc., or id names like #id1,#id2 etc..,

External CSS: We can write CSS in separate file with dot CSS extension and link that CSS into html file

  <link rel="stylesheet" href="link" />

CSS BAsic Properties background color(hexcode,colorname,rgb,rgba,linear-gradient,radialgradient),color,text-align,background-image

Example

creating two files

index.html

style.css

 index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
     <link rel="shortcut icon" href="https://avatars.mds.yandex.net/i?id=b507a2b8d9382967a186c654f1eeaa74-5262078-images-taas-consumers&n=27&h=480&w=480" type="image/x-icon">
 </head>
 <body id="bd">
     <p id="para1">Hello CSS</p>
      <p id="para2">Box Model</p>
 </body>
 </html>

 style.css
 #bd
 {
     /* background-image:url('https://i.pinimg.com/736x/dd/97/3a/dd973ac116a977c8dd5296b0da504b8c.jpg');
     background-size: cover; */
    /* background: linear-gradient(red,blue,red,blue,red,blue,red,blue); */
    background:radial-gradient(aqua,black);
        background-repeat:no-repeat;
        height: 100vh;
     color: white;
 }

 #para1,#para2
 {
     background-color: red;
     padding-bottom: 50px;
     margin-top:50px;
     border: 1px solid yellow;
 }

Task-

Create Tribute page

Set some background color use box model to set the background

set an image of your favorite role model .Show some text about him/her. and use CSS to make it attractive

Day-9 Adding CSS & Tribute Page

Table of contents

basics.txt

Example

Task-