css font - css font family - css font size
-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
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="3">oblique</p>
<p class="4"></p>
</body>
</html>
css code-
.1{
font-style: normal;}
2.{
font-style: italic;}
.3{
font-style: oblique;}
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-
syntex-
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-
-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-
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😍
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 fontsyntax
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-
- css font-size-
-css font size is set size of textsyntex-
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-
* 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-
|
| click image for hd preview |
<!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😍