CSS - Properties
<html>
<head>
<style type="text/css"> /*This is used for commment in css(under style tag)*/
@font-face{ /*We use @font-face rule to load custom fonts loaded on
the webpage trough src(wherever you had downloaded the fontfile) */
font-family:amaze;
src:url("Fonts/capsmall_clean.ttf") /*Try to write all lowercase as it is not case sensitive*/
}
@font-face{
font-family:wow;
src:url("fonts/warwound.otf")
}
@font-face{
font-family:wow;
src:url("fonts/warwound.otf")
}
h1{
font-family:amaze
}
#fun {
letter-spacing:4px;
color:navy
}
#fun san{
text-decoration: underline;
text-transform:uppercase
}
#fun ty {background-color: rgb(100,0,10)
}
p.champ{
color:black
}
.champ{
color:red
}
#sun{
color:teal
}
#fun p{
font-size:40px;
background-image:url(wall3.jpg);
background-attachment:fixed
}
div {
border:10px solid green
}
#man {
font-style:italic;
font-weight:900 /*values lies 100(thin)-900(thick)*/
}
.ordered {
list-style-type:upper-alpha /*values-lower-alpha,circle,square*/
}
.unorder {
list-style-image:url(marker.jpg);
margin-left:10px
}
div.xm {
position:fixed;
bottom:0; /*You need to set position (bottom,right,left etc)for a position:fixed element(as it does not have any normal( default) position like any element)*/
right:0;/*Here(when position:fixed) left,right means the distance between elements left/right edge and left/right edge of its containing block.*/
width:2cm;
height:3cm;
border:1cm solid black;
background-color:red;
word-wrap:break-word;
}
div.mr {
position:relative; /*It has a normal position(given by html) but if you adjust it at different place then you cant fit any other content in the left space.*/
margin-left:4cm;
width:2cm;
height:3cm;
border:1cm solid black;
background-color:red;
word-wrap:break-word;
}
.prog{
}
/*overflow(We have not used it in this file) property is used when the content size is more than the box.If value is "scroll" then horizontal and vertical sroll bars come.Other values are-hidden,auto,visible(default)*/
</style>
<h1>MY WEBSITE</h1>
</head>
<title>It is big</title>
<div id="fun"> <body><p>This is a website where you can do whatever you want</p>
<table ><tr><td >WE ARE ONE</td></tr></table>
<p style="position:fixed;top:400px;left:300px">THIS WILL ALWAYS STICK TO SCREEN</p>
<p style="color: blue"><san>This is a</san> <ty>very <wen id="sun">beautiful</wen> website.</ty></p>
<p class="champ">Always think out of the box </p>
<div class="champ">We are good</div>
<ten id="man" class="champ">We are using CSS to decorate data</ten>
<div style="border:10px solid red;padding:4cm;text-transform:uppercase;background-image:url(back.jpg);background-repeat:no-repeat;background-size:4000px;font-family:wow;font-size:40px"> We are doing something, dont disturb</div>
<ol class="ordered">
<li>MANGO</li>
<li>ORANGE</li>
<li>BANANA</li>
<li>PINEAPPLE</li>
</ol>
<ul class="unorder">
<li>RED</li>
<li>BLUE</li>
<li>GREEN</li>
<li>PINK</li>
</ul>
<h2 style="margin-left:20px">This is an animated progress :</h2>
<div style="font-family:serif;color:teal;font-size:40px;margin-left:20px;border:0">POWER -: <progress min="0" value="75" max="100"></progress> <span class="prog"></span></div>
<div class="xm">It is positioned:fixed</div>
<h1 style="margin-left:1cm">Relative positioned element:</h1>
<div class="mr">It is positioned:relative</div>
<script type="text/javascript">
var pro=document.getElementsByTagName("progress");
var value=document.getElementsByClassName("prog");
var i=0;
const highpro=()=>{
if (i<=100){
pro[0].value=i;
value[0].innerHTML=i;
i++;}
}
setInterval(highpro,50);
</script>
</body></div></html>
Comments
Post a Comment