Introduction to CSS font-weight
The CSS font-weight is one of the property is used to set the weight is nothing but the boldness of the fonts is also available, and it mainly depends upon the font family used on the web pages based on the customer requirements the property not only set weight is also set-like thickness or boldness for either available fonts which has been already installed on the faces inside on the font families or weights defined by the browsers is also accepted with either the keyword values or any built-in values it must be in numerical format.
Syntax and Parameters:
The CSS codes are written with the html page using a style tag; we can follow some rules and syntax to customise the web pages more attractive. We can use fonts style to create the user-friendly web applications with their own attributes, sproperties and elements with user-specified values.
<html>
<head>
<style>
.first
{
font-weight: ; //numeric format values only supported
}
</style>
</head>
<body>
---some html codes----
</body>
</html>The above codes are the basic syntax for initialized the font-weight property values in the CSS style sheet. We used only the numeric supported values, either the keyword type of values or predefined values in the CSS codes. Using these two types of supported values, we can call them as parameter or sets of arguments in the font style sheet.
How does font-weight work in CSS?
- The CSS style codes, we used a lot of attributes, properties with default values it will be both texts, numbers, special characters etc. using these types of values, we can enable the particular property of their CSS attributes for making the presentation with more user-friendly customer satisfaction is important for the business prospective. For example, we can use the font element attributes in the html codes; it’s one of the default html tags, ID or Some built-in classes.
- When we use CSS fonts in HTML, the tag-based upon the elements like font-weight is one of the default and most widely used in the html codes for placing the text has more boldness and thickness with different ranges and presentation of the CSS styles also it helps the elements in the CSS Style codes it is mostly used in the <body> tag of the html because <style> also declare and initialized the font style attribute values most probably used in the <head> section of the html web pages.
- In font-weight property, we already said it accepts only the numerical type of values that can be either keyword type of values or some predefined type of numerical values. Some of the keywords are normal, bold, lighter and bolder. The available numerical type of values with some ranges between 100 to 900 based on the user needs may vary if suppose the keyword value is normal. So it maps to the numerical value is 400 and the value also bold it’s mapped into the 700 in order to see with the any type of effect values ranges rather than the 400 or 700 the font is being used with some built-in faces that matches with those specified weights.
- Suppose the font value ranges of the bold have 700 and normal have 400. In that case, the version has part of the font families whatever the browser will use that ranges if the attributes are not available the user browser will be mimicked and automatically it changes the bold or normal version it will not mimicked the other unavailable weights fonts often mainly used with the regular and light type of formats to identify the font weights of the web page with alternate ideas.
Examples of CSS font-weight
Given below are the examples of CSS font-weight:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
padding: 0 20px;
font-family: 'Open Sans';
}
div.second {
font-weight: 100;
}
div.third {
font-weight: 300;
}
div.four {
font-weight: 200;
}
div.five {
font-weight: 400;
}
div.six {
font-weight: 500;
}
div.seven {
font-weight: 600;
}
div.eight {
font-weight: 700;
}
div.nine {
font-weight: 800;
}
div.ten {
font-weight: 900;
}
div.eleven {
font-weight: 200;
}
div.twelve {
font-weight: 100;
}
</style>
</head>
<body>
<div class="first">
<h3>Have a Nice day</h3>
<div class="second">Welcome</div>
<div class="third">Welcome</div>
<div class="four">Welcome</div>
<div class="five">Welcome</div>
<div class="six">Welcome</div>
<div class="seven">Welcome</div>
<div class="eight">Welcome</div>
<div class="nine">Welcome</div>
<div class="ten">Welcome</div>
<div class="eleven">Welcome</div>
<div class="twelve">Welcome</div>
</div>
<div class="first">
<h3>Welcome Users</h3>
<div class="second">
Have a nice Day
<p>Gud day</p>
</div>
<div class="second">
Welcome
<p>Welcome</p>
</div>
<div class="opacity80">
Gud day
<p>Welcome</p>
</div>
<div class="opacity70">
Gud day
<p>Welcome</p>
</div>
<div class="opacity60">
Gud day
<p>Welcome</p>
</div>
<div class="opacity50">
Gud day
<p>Welcome</p>
</div>
<div class="opacity40">
Gud day
<p>Welcome</p>
</div>
<div class="opacity30">
Gud day
<p>Welcome</p>
</div>
<div class="opacity20">
Gud day
<p>Welcome</p>
</div>
<div class="opacity10">
Gud day
<p>Welcome</p>
</div>
<div class="opacity0">
Gud day
<p>Welcome</p>
</div>
<p><small>Welcome <code>To</code> My Domain</small></p>
</div>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-weight: lighter;
}
</style>
</head>
<body>
<h1>Welcome To My Domain</h1>
<p id="first">We can choose the Opacity value in the given scroll box</p>
<select onchange="demo(this);" size="5">
<option>0.2
<option>0.3
<option>0.4
<option>0.7
<option selected="selected">1
</select>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
src: url('WWW.facebook.com');
font-family:'MutatorSans';
font-style: normal;
}
div.second {
font: 1rem monospace;
white-space: nowrap;
}
div.third {
font-weight: inherit;
text-transform: uppercase;
font: 1.5rem 'MutatorSans', sans-serif;
}
div.four {
font-weight: initial;
}
div.five {
font-weight: unset;
}
</style>
</head>
<body>
<div class="first">
<h3>Have a Nice day</h3>
<div class="second">Welcome</div>
<div class="third">Welcome</div>
<div class="four">Welcome</div>
<div class="five">Welcome</div>
</div>
<div class="first">
<h3>Welcome Users</h3>
<div class="second">
Have a nice Day
<p>Gud day</p>
</div>
<p><small>Welcome <code>To</code> My Domain</small></p>
</div>
</body>
</html>Output:
Conclusion
The font-weight property is used for highlighting the fonts showing in web pages with numerical type of values. The web pages used the values in correct positions because it checks and confirms the other datas are not affected in the web pages.
Recommended Articles
This is a guide to CSS font-weight. Here we discuss the introduction, how does font-weight work in CSS? and examples, respectively. You may also have a look at the following articles to learn more –
