css font - css font family - css font size

www.niljadav.com

-css stands for cascading style sheet that use to give webpage style and add design in webpage. css font is a font styling properties. css is give nice look and make designed font. css is make webpage attractive. css define display  html element and tag  with proper formating & alignment. css is a collection of style rules and it tells the browser to display html elements. css provide the facility to arrange the html elements.

css font attribute-

-the font attribute is a propertie to use format the font. it use to give design,color,align,family,size and many more propertie.
*font properties
  • font-style
  • font-weight
  • font-size
  • font-height
  • font-family
- if any properties is not defined then its default values are apply.

font-style

-it is specify the font style 
-default value is normal

-----------------------------------------------------------------------
values                            description                                    
----------------------------------------------- ----------------------- 
normal              this is normal font and it is default font. 
italic                       this is italic. and it use to give italic look 
oblique                   this is oblique font                                   
 ------------------------------------------------ ---------------------- 

syntex-
font-style: normal|italic|oblique|initial|inherit;


html code-
<html>
<head>
<link rel="stylesheet" href="style.css">
 </head>
<body>
         <p class="1">normal</p>
         <p class="2">italic</p>
         <p class="3">oblique</p>
         <p class="4"></p>
</body>
</html> 
css code-
 .1{
  font-style: normal;
}

2.{
  font-style: italic;
}

.3{
  font-style: oblique;
}


font-weight

-font-weight is set font thik and thin how to display the font

syntax
font-weight: normal|bold|bolder|lighter|number|initial|inherit;

example-
html & css code-
<!DOCTYPE html>
<html>
<head>
<style>
.a{
  font-weight: normal;
}

.b{
  font-weight: lighter;
}

.c{
  font-weight: bold;
}

.d{
  font-weight: 900;
}
</style>
</head>
<body>

<h1>example of font-weight</h1>

<p class="a">normal font</p>
<p class="b">lighter font</p>
<p class="c">bold text</p>
<p class="d">900 weight</p>

</body>
</html>


output-
www.niljadav.com


- css font-size-

-css font size is set size of text 

 syntex-

font-size:medium|xx-small|x-small|small|large;
font-size:20px;                                                   
 fint-size:20%;                                                   

example-

html  & css code-
<!DOCTYPE html>
<html>
<head>
<style>
.a{
  font-size: 15px;
}

.b{
  font-size: large;
}

.c{
  font-size: 150%;
}
</style>
</head>
<body>
<h3>font-size css</h3>

<p class="a">15px size font</p>

<p class="b">large size font</p>

<p class="c">150% font size</p>

</body>
</html>
output-
www.niljadav.com

* font-family

-font family is a special font properties element
-there is two type of font family 
  1).font-name
  2).generic-family

* font-name
 -font family names is like "arial","time"...
*generic-family 
-font generic is like "monospace","sans-sarif","serif"....

syntex-
font-family: sans-sarif;

example-
html and css code-

<!DOCTYPE html>
<html>
<head>
<style>
.b{
  font-family: serif;
}
.a{
  font-family: Arial;
}
</style>
</head>
<body>
<h3>font-family css</h3>

<p class="a">this is arial text in css</p>

<p class="b">this is serif text in css</p>

</body>
</html>


-css font is the most powerful properties for design attractive and very cool font. font is like a heart for any website. because font is a navigate a user and attract user for visit more and stay on page. user will increase your seo and its help to rank your site .

 - lets view some other examples

1). information page-

preview-

www.niljadav.com
click image for hd preview
html code-

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <center>
    <h1>hii i'm nil jadav</h1>
<p> hello dude's i'm Anil jadav. i creted <a href=""> www.niljadav.com website</a>. this website is for
    learn coding and tech news. i also post a Android triks and tips and new gadgets. please if you like this website support us and
    like this website. any suggetion or tip please contact us and dont forget to share with your frds
</p>
<hr color="black">
<p class="date"> 28 jan 2020</p>
<p class="author">Anil jadav</p>
</center>
</body>


</html>

css code-

h1 { color: #ff4411; font-size: 48px; font-family: 'Signika', sans-serif; padding-bottom: 10px; }

p { font-family: 'Inder', sans-serif; line-height: 28px; margin-bottom: 15px; color: #666; }

a { color: #ff4411; transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; }

a:hover { color: #a03c21 }

.date { float: left }

.author { float: right }

-create two file 1.html and 2.css .then link css file in html.then change as your requirement and save file in same location and run in your browser.

note- change content only do note change class name or other css properties.

thanks for visiting us and giving your time. if you like content and code than like us and follow us.
any other tip or suggestion please mail us.

thanks you.😇
Anil jadav😍