CSS text-align and CSS Variables Easily Explained: With Easy-to-use Examples!
Want to understand CSS Text-align and CSS Variables? Then this is the right article to answer all your questions with easy-to-use examples! Let us begin with CSS Text-align and then proceed to CSS Variables.
CSS Text-align
CSS Text alignment is to position text in HTML web pages. You could position your text left, right, center, top, or bottom. It all depends on where and what you want to achieve. Understanding web page layout will let you understand how to properly align or position your text
In a table-cell box or block element, this CSS property is used to specify the element's horizontal alignment. Although it aligns horizontally instead of vertically, it is similar to the vertical-align property.
CSS Text-align Possible Values
Justify: Magazines and newspapers frequently use this value. To display each line with an equal width, this value stretches the content of the element.
Center: This value centers the inline text.
Right: This value is used to align the text to the right.
Left: This value is used to align the text to the left.
Here is a text-align property example to help you understand it.
Example
<html>
<head>
</head>
<style>
h2{
color: red;
}
</style>
<body>
<h1>An example of text-align proeprty</h1>
<h2 style = "text-align: center;">
text-align: center;
</h2>
<h2 style = "text-align: right;">
text-align: right;
</h2>
<h2 style = "text-align: left;">
text-align: left;
</h2>
<h2 style = "text-align: justify;">
Text-align: Justify; Use it in a long paragraph to see the results.
</h2>
</body>
</html>
CSS Variables
The values of the custom properties are added to our website using the CSS variables. Some people use the terms "cascading variables" or "CSS variables" to describe the custom properties. The authors define these entities with specific values that can be reused throughout the document. The custom property notation is used to set these entities, and the var() function is used to access them.
The variables have a range in which they can be used and serve as storage for values. The benefit of CSS variables is that we can reuse the same value across multiple locations. The variable's name is simpler to comprehend and use than the color values.
Observe the following syntax:
element {
--main-color: brown;
}
The element in the syntax above denotes the selector that defines the custom property's scope. To define a variable in CSS, two dashes (--) are used at the beginning, followed by its name, which is case-sensitive. Our HTML document will receive a global application of the custom properties if we define them on the :root pseudo-class. The case affects how the names of the custom properties are read, so --main-color and --Main-color will be regarded as different custom properties.
The var() function
CSS's var() function is used to insert the custom property value. The name of the variable can be passed as the argument to the var() function.
Parameters
The var() function permits just two arguments, and they are defined as follows:
--custom-name: The name of the custom property may be entered here. The two dashes (--) at the start are required. It is a necessary parameter.
Value: This parameter is optional and accepts the default value. When the custom property is invalid, it is used as a replacement.
The compatibility of the browser is not fixed using fallback values. Any browser that doesn't support the custom properties will render the fallback value useless. In the event that the variable has an incorrect value or is not defined, the fallback value acts as a replacement for the browser that supports CSS custom properties to select a different value.
Observe the following examples to understand CSS variables fully.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Example</title>
<style>
:root {
--bg-color: lightblue;
--text-color: green;
}
/* var() function used here */
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color);
}
div {
color: var(--text-color);
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the TechStack Revolution</h1>
<div>
Here is an example of CSS variables
<h3>--bg-color: lightblue;</h3>
<h3>--text-color: green;</h3>
</div>
</body>
</html>
Notice that the fallback values are not present in the example above. Now, we'll use the fallback values in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Example</title>
<style>
:root {
--bg-color: lightblue;
}
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color, red); /* --text-color is not set, so the fallback value 'red' will be used */
}
div {
color: var(--text-color, black);
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the TechStack Revolution</h1>
<div>
Here is an example of CSS variables
<h3>--bg-color: lightblue;</h3>
</div>
</body>
</html>
It is clear from the above example that the CSS variable --text-color has no value; therefore, the fallback value will be used to replace the variable.
Use of calc() with the var()
The variable values can be used with calc(). Let's look at an example where the calc() and var() functions are used together.
To change the padding and font size of the elements in this example, we combine the calc() function with the var() function.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Example</title>
<style>
:root {
--bg-color: lightblue;
--extra-padding: 1.2em;
--txt-size: 90px;
}
body {
background-color: var(--bg-color);
text-align: center;
}
h1 {
color: var(--text-color, red); /* --text-color is not set, so the fallback value 'red' will be used */
font-size: calc(var(--txt-size) - 20px);
}
div {
color: var(--text-color, black);
font-size: 30px;
border: 8px ridge red;
padding: calc(var(--extra-padding) + 20px);
}
</style>
</head>
<body>
<h1>Welcome to the TechStack Revolution</h1>
<div>
Here is an example using the calc() function with the var() function
</div>
</body>
</html>
To learn more about CSS, visit our CSS Tutorial Page.
