HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS Font Size


CSS Font Size


<< Previous Page
HTML Text and Paragrafs
Next Page >>
HTML Colors

CSS Tutorial » CSS Font Size

CSS font-size property sets the size of a text.

font-size:medium or xx-small or x-small or small or large or x-large or xx-large or smaller or larger or length or initial or inherit;


We can add CSS font size properties as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css
Note: Use external CSS instead.


How to create CSS Font Size - examples


You can try to execute the following code to change CSS font-size on this page.
If you like this, you can simply copy the code and paste it on your website.


Example:
Example 1, How to create CSS font-size - examples:
<!DOCTYPE html>
<html>
<head>
<style>
.em-text {
font-size: 2em;
font-family: "Courier New", Courier, monospace;
background-color: #00CC66; /* Green */
}
.em-text1 {
font-size: 3em;
font-family: "Courier New", Courier, monospace;
background-color: #00CC66; /* Green */
}
.responsive-text {
font-size: 6vw;<br /> font-family: "Courier New", Courier, monospace;
background-color: #00CC66; /* Green */
}
.animation-text {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font-size: 40px;}
}
.large-text {
font-size: large;
font-family: "Courier New", Courier, monospace;
background-color: #00CC66; /* Green */
}
.bold-text {
font-size: large;
font-family: "Courier New", Courier, monospace;
background-color: #00CC66; /* Green */
}
</style>
</head>
<body>
<h3 align="center">How to make CSS font-size type</h3>
<p align="center">Change CSS font size types on this editor and execute code</p>
<p align="center">

<div class="em-text">Your font-size em text here</div>
<div class="em-text1">Your font-size em text here</div>
<div class="responsive-text">Your font-size responsive text here</div>
<div class="animation-text">Your font-size animation text here</div>
<div class="large-text">Your font-size large text here</div>
<div class="bold-text">Your font-size bold text here</div>
<div style="font-size: 150%; font-family:Arial, Helvetica, sans-serif; font-weight:bold"> inline css style - text </div>
</p>

</body>
</html>


CSS Font Size, em, responsive, rem, bold, adjust, inline, reset, according to width, does't work, large, relative to screen CSS Font Size - css tutorial

3298. CSS background image opacity without affecting child elements, text or content, css tutorial
CSS background image opacity without affecting child elements, text or content css tutorial
https://www.agernic.com/css-tutorial/css-background-image-opacity-without-affecting-text-content.html

3182. CSS Border Style Width and Color, css tutorial
CSS Border Style Width and Color css tutorial
https://www.agernic.com/css-tutorial/css-border-style-width-and-color.html

809. CSS background properties - CSS tutorials - w3resource

https://www.w3resource.com/css/background/CSS-background.php

3179. CSS align content Property - CSS align text - how to create, css tutorial
CSS align content Property - CSS align text - how to create css tutorial
https://www.agernic.com/css-tutorial/css-align-content-property-css-align-text-how-to-create.html

818. CSS Font Families - CSS tutorials - w3resource

https://www.w3resource.com/css/fonts/font-families.php

2706. CSS Links - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslinks.htm

Your add here
PHP str_split() function

PHP print() function

PHP trim() function

PHP ucfirst() function

PHP str_replace() function

PHP ltrim() function

PHP htmlspecialchars() function

PHP rtrim() function

PHP implode() function

PHP strcmp() function

PHP htmlentities() function

PHP similar_text() function

PHP htmlspecialchars_decode() function

PHP strlen() function

PHP str_repeat() function

PHP strstr() function

mysql_query(): The mysql extension is deprecated and will be removed i
CSS Style Text
Basic Syntax of CSS - How to Code CSS
Function eregi_replace() is deprecated in php - How to fix
HTML link open in new tab or window - how to create link
CSS text-align