Wednesday, February 27, 2019

How to set font style and background? CSS Tutorial 03

                1 comment   

set font style and background
In this CSS tutorial, we will discuss a different type of font style, text style, and set background with color and image. After completion of this article, your concept of CSS properties will be clear because there are given a very simple description and syntax with an appropriate example.
 
  1. CSS Tutorial: Font Style
  2. CSS Tutorial: Text Style
  3. CSS Tutorial: Set Background  

CSS Tutorial: Font Style

You can change the font size, style, weight, line-height, etc. by using CSS properties. A separate property has been created for all these changes. Let us know about these properties.

Font-Family Property

You can use the font-family property to set the family of the font of any HTML element. You can give the name of any font family for the value of this property. Some of the font families are listed below which you can use as a value.
  • Times New Roman
  • Verdana
  • Arial
  • Courier
  • serif
  • sans-serif
  • Times
  • Helvetica
  • cursive
Let's try to understand the CSS font-family property with an example.
<!DOCTYPE html>
<html>
<head>
<title> Font Family Property Example </title>
<style>
    h1{
    font-family: "Times New Roman";
    }
     .p1{
    font-family: Verdana;
    }
     .p2{
    font-family: Arial;
    }
    .p3{
    font-family: Courier;
    }
.p4{
  font-family: serif;
}
.p5{
font-family: sans-serif;
}
.p6{
font-family: cursive;
}
.p7{
font-family: Times;
}
.p8{
font-family: Helvetica;
}
</style>
</head>
<body>
<h1> Heading Font in Times New Roman </h1>
<p class="p1"> This is a paragraph1 where you can see font in verdana </p>
<p class="p2"> This is a paragraph2 where you can see font in arial </p>
<p class="p3"> This is a paragraph3 where you can see font in courier </p>
<p class="p4"> This is a paragraph4 where you can see font in serif </p>
<p class="p5"> This is a paragraph5 where you can see font in sans-serif </p>
<p class="p6"> This is a paragraph6 where you can see font in cursive </p>
<p class="p7"> This is a paragraph7 where you can see font in Times </p>
<p class="p8"> This is a paragraph8 where you can see font in Helvetica </p>
</body>
</html>

The above code will generate the below output.
font family property

Font-style Property

You can use the font-style property to change the font style using CSS properties. The values of this property can be normal, italic and oblique. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> Font style Property </title>
<style>
.p1{
    font-style: italic;
}
.p2{
font-style: normal;
}
.p3{
font-style: oblique;
}
</style>
</head>
<body>
<h1> Font style Property Example </h1>
<p class="p1"> The Text of this paragraph is in Italic Font Style </p>
<p class="p2"> The Text of this paragraph is in Normal Font Style </p>
<p class="p3"> The Text of this paragraph is in Oblique Font Style </p>
</body>
</html>

There is no big difference between Italic and oblique. It looks almost the same. The above code will generate the below output.
font style property


Font-Variant Property

You can define the variants of the font with the help of this property where you can show fonts in capital letters. The values of this property can be normal and small-caps. On using normal value, only the first letter of the sentence will be capital whereas small-caps value will create all letters in the capital. An example has given below.
<!DOCTYPE html>
<html>
<head>
<title> Font Variant Property </title>
<style>
h1{
font-variant: small-caps;
}
.p1{
font-variant: normal;
}
.p2{
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>font variant property example</h1>
<p class="p1"> This is a Normal Paragraph which is example of font-variant </p>
<p class="p2"> This paragraph will be in capital letters which is a example of font-variant </p>
</body>
</html>

The above code will generate the below output.
font variant property

Font-Weight Property

From this property, you can define the weight of the font. This property defines how bold the font will be. Values of this property can be bold, bolder and lighter. You can also define custom font weight. An example is given below.
<!DOCTYPE html>
<html>
<head>
<title> Font-Weight Property </title>
<style>
.p1{
font-weight: normal;
}
.p2{
font-weight: bold;
}
.p3{
font-weight: lighter;
}
.p4{
font-weight: bolder;
}
.p5{
font-weight: 900;
}
</style>
</head>
<body>
<h1>Font-weight property example</h1>
<p class="p1"> This is an example of font weight normal </p>
<p class="p2"> This is an example of font weight bold </p>
<p class="p3"> This is an example of font weight lighter </p>
<p class="p4"> This is an example of font weight bolder </p>
<p class="p5"> This is an example of font weight 900 </p>
</body>
</html>

 The above code will generate the below output.
font weight property

Font-Size Property

With this property, you can change the font size of any HTML element. You can also give the value of this property in pixels and %. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> Font Size Property </title>
<style>
h1 {
font-size: 30px;
}
.p1 {
font-size: 22px;
}
.p2 {
font-size: 15px;
}
</style>
</head>
<body>
<h1> Font Size Property Example </h1>
<p class="p1"> In this paragraph1 you are learning about font size property </h1>
<p class="p2"> In this paragraph2 you are learning about font size property </h1>
</body>
</html>

 The above code will generate the below output.
font size property

Font-Size-Adjust Property

You can adjust the font size by this property. When you define this property, whatever the font family will be, browser height automatically adjusts the font.  An example of this has given below.
<!DOCTYPE html>
<html>
<head>
        <title> Font Size Adjust Property  </title>
<style>
p
{
 font-size-adjust: 0.48;
}
#p1
{
font-family: Verdana;
font-size-adjust: 0.48;
}
.p2{
font-family: Arial;
font-size-adjust: 0.48;
}
</style>
</head>
<body>
  <p>This is a First Paragraph where you are learning Font Size Adjust Property with Example</p>
 <p id="p1">This is a First Paragraph where you are learning Font Size Adjust Property with Example </p>
 <p class="p2">This is a First Paragraph where you are learning Font Size Adjust Property with Example</p>
</body>
</html>

The above code will generate the below output.
font size adjust property

Font-Stretch Property

You can stretch the font through this property. The value of this property can be normal, wider, narrower and condensed. Now no browser supports this property. Let's try to understand it with an example.
<!DOCTYPE html>
<html>
<head>
<title> Font Stretch Property Example </title> 
         <style> 
                      #p1 { 
                             font-stretch: wider; 
                             } 
        </style>
</head>
<body>
<p> This is a paragraph. </p> 
     <p id = "p1"> This is a paragraph. </p>
</body>
</html>

The above code will generate the below output.
font stretch property

CSS Tutorial: Text Style

You can also design and format the text of the webpage with CSS. CSS provides you many properties. Many times designers become confused between font properties and text properties. So before knowing about the text properties, let's see what is the difference between these two?

Such as the shapes of different font families (Times New Roman etc.) are different. With different shapes that you draw the character, they are called text (a, b, c, d @, #, etc). CSS provides you the following properties to style the text on the webpage.
  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • text-direction
  • text-shadow
  • word-spacing
  • letter-spacing
Now let's try to know about these properties in detail.

Color Property

This property is used to set the text color. You can apply it to different HTML elements. If you apply it to the <body> tag and the value you give to this property, the same color gets all the text of the webpage. As a value of this property, you can give the color name or its hex value. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> color property </title>
<style>
div {
width: 20%;
}
p {
color: green;
}
</style>
</head>
<body>
<div>
<p> This is a paragraph Its text color is green. </P>
</div>
</body>
</html>

In the above example, all paragraph text has been set to color green. This example will produce the below output.
color property


Text-Align

Through this text-align property, you can set the alignment of text on the webpage. You can use four values for this property, which are given below.
  • left - This value uses to align text in the left side.
  • right - This value used to align text on the right side.
  • justify - With this value, you can align the text like a book.
  • center - It aligns text in the center.
An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> text align example </title>
<style>
div {
width: 20%;
border: 2px
solid blue;
}
p {
text-align: center;
}
#p1{
text-align: left;
}
#p2{
text-align: right;
}
.p3{
text-align: justify;
}
</style>
</head>
<body>
<div>
<p> A paragraph in center </p>
<p id="p1"> A paragraph in left </p>
<p id="p2"> A paragraph in right </p>
<p class="p3"> This is an example of a paragraph for text align where you can justify.
Your paragraph will be same on the both side left and right. </p>
</div>
</body>
</html>

 In the above example, the alignment center left and right of all the paragraphs of the webpage has been set. This example will produce the below output.
text align property

Text-Decoration

You can decorate text by this text-decoration property such as underline, overline of the text, etc. You can set any value for this property from below four values.
  • none – This is used for no decoration on the text.
  • underline - By setting this value, the line appears below the text.
  • overline - When you apply this value, the line appears above the text.
  • line-through - Using this value, a line is drawn in the middle of the text.
This example has given below.
<!DOCTYPE html>
<html>
<head>
<title> Text decoration property </title>
<style>
p{
color: red;
}
#underline{
text-decoration: underline;            
  }
#none{
text-decoration: none;
}
#overline{
text-decoration: overline;
}
#line-through{
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="underline"> This text for underline value. </p>
<p id="none"> This text for none value. </p>
<p id="overline"> This text for overline value. </p>
<p id="line-through"> This text for line-through value. </p>
</body>
</html>

 In the above example, the text of all paragraphs is underline. You can check the property to put all values one by one. The above example will produce the below output.
text decoration property

Text-Transform

You can set the case of text by using this text-transform property whether you want to show text in upper case or in lower case. You can set any value of this property from the below four values.
  • none
  • uppercase
  • lowercase
  • capitalize
An example of this property has given below.
<!DOCTYPE html>
<html>
<head> <title> Text transform property </title> 
    <style> 
        p{ 
             text-transform: none; 
             font-size: 24px; 
            } 
        #p1{ 
             text-transform: lowercase; 
             } 
        .p2 {
            text-transform: capitalize;
           }
        .p3{ 
           text-transform: uppercase;
           }
    </style> 
 </head> 
 <body> 
      <p> This is some text </p> 
      <p id="p1"> This is some text </p>
      <p class="p2"> This is some text </p>
      <p class="p3"> This is some text </p>
</body>
</html>

 In the above example, the text of all paragraphs has been transformed into none, lowercase, uppercase and capitalized. Its output has given below.
Text transform property

Text-Indent

From this text-indent property, you can set the indent of the first line of the paragraph. The first line of the Indent paragraph is an extra space which shows that line different from the second line. The value of this property can be given in length or again in percent. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
   <title> Text indent example </title>
   <style> 
         div{ 
              width: 20%; 
              border: 1px solid; 
             } 
          p {
             text-indent: 20px; 
             } 
  </style>
</head>
<body>
  <div>
       <h1>This is a Heading</h1> 
       <p> This is a paragraph1 It is used in text indent property in CSS. </P> 
       <p> This is a paragraph2 It is used in text indent property in CSS. </P> 
       <p> This is a paragraph3 It is used in text indent property in CSS. </P> 
   </div>
</body>
</html>

 In the above example, the indent of the first line of all paragraph on the webpage has been set to 20 pixels. Its output has given below.
Text Indent property

Direction

Through this property, you can set the direction of the text. That is, from which side do you want to start writing the text? It can be left to right and right to left. From the given values, you can set any value for this property.
  • ltr - With this value, you can set the direction of text from left to right. This is default
  • rtl - By this property, you can set the direction of text from right to left. You can use it for the language which writes from right to left such as Arabic and Urdu. 
  • initial - With this property, you can set the default direction of the text.
  • inherit - When you set this value, the direction of the text is the same as the parent element.
  • unset - Works as either value is "inherit" or "initial".
An example of this property has given below.
<!DOCTYPE html>
<html>
<head>
       <title> Text Direction Example </title>
<style>
div{
    width: 30%;
  border: 1px solid;
}
#ltr{
      direction: ltr;     
      }        
 #rtl{         
direction: rtl;      
      }
#initial{
        direction: initial;
        }
#inherit{
        direction: inherit;
        }
#unset{
        direction: unset;
        }
</style>
</head>
<body>
<div>
<p id="ltr"> Examples of using ltr text direction property </p>       <p id="rtl"> ŘŁŮ…Ř«Ů„Ř© على استخدام خاصية اتجاه النص rtl. </p>
      <p id="initial"> Examples of using initial text direction property. </p>
      <p id="inherit"> Examples of using inherit text direction property. </p>
      <p id="unset"> Examples of using unset text direction property. </p>     
</div>
</body>
</html>

In the above example, the direction of the paragraphs of the webpage has been set from right to left. Its output has given below.
Text direction property

CSS Tutorial: Set Background 

Any HTML element's background can be set by CSS. For example, if you want to highlight the headings, in such situations, you can set the background of all the headings through CSS.

Background can be set in two ways whether you want to set a solid color in the background or even set an image. CSS provides you many properties to set background. Let's try to know about this property.

Setting Background Color

You can use the background-color property to set the background color by CSS. You can give the value of this property either the color name or hex code. Let's understand this with an example.
<!DOCTYPE html>
<html>
<head>
  <title> Background Color </title>
<style>
p{
    background-color: gold;     
}
</style>
</head>
<body>
<h1> Setting Background Color </h1>
<p>This is a paragraph1 where you are learning how to set <br> background color in paragraph. </p>
<p>This is a paragraph2 where you are learning how to set <br> background color in paragraph. </p>
</body>
</html>

 In the above example, the background color of the paragraph has been changed by CSS. Similarly, you can also change the background color of other HTML elements. The above script will generate the below output.
set background color
Let's now learn how to set the image in the background by CSS.

Setting Image Background

The image can be set as a background by CSS. For this, the background-image property is used. The URL of the image is given as the value of this property. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> Set Image Background </title>
<style>
body
{
    background-image: url('images/flower.jpg');
       background-repeat: repeat;
}
</style>
</head>
<body>
<h1> Setting Image Background </h1>
<p> There is an image behind the text </p>
</body>
</html>

The above script will generate the below output.
background image property
Sometimes it may be that your image is too small and it does not fill the entire background. In such a situation, you can use background-repeat property after the background-image property.

This property has two values repeat and no-repeat. When you define the repeat value, your image gets to repeat and fills the entire background.

Let's try to understand it with an example.
<!DOCTYPE html>
<html>
<head>
<title> Background Repeat Property </title>
<style>
body
{
   background-image: url("images/imagerepeat.jpg");
   background-repeat: no-repeat;
/* background-repeat: repeat;*/   
}
</style>
</head>
<body>
<h1> Image Background Repeat Example </h1>
<p> This is an example of background image repeating. Behind this text there is an image and it is repeating itself so that it can fill the entire background; </p>
</body>
</html>

The above script will generate the output below.
background repeat property
In addition, to repeat the background image, you can set the image at a certain position in the background. For example, if you want to place the image 60px from the left side, it is possible to do this. This is done by a background-position property. Let me tell you about this property.

Background position property gives you two values. The first value defines the image's distance from the left side, and the second value defines the distance image from the top. 

Let's try to understand it with an example.
<!DOCTYPE html>
<html>
<head>
<title> Background Position Example </title>
<style>
body {
background-image: url('images/flower.jpg');
background-position: 100px 70px;
background-repeat: no-repeat;
}
</style>
</head>
 <body>
<h1> Image </h1>
<p> This image is positioned at 100px on x-axis and 70px on y-axis </P>
</body>
</html>

The above code will generate the below output.


background-position-property
Another property is provided by CSS which you can use with background images. Through this property, you can make a background image fixed or scroll-able.

This property is background-attachment. This property has two values fixed and scroll. The fixed value keeps the image fixed, it can’t be scrolled, and the scroll value can make the image scroll-able. An example of this has given below.
<!DOCTYPE html>
<html>
<head>
<title> Background attachment example </title>
<style>
  body{
background-image: url("images/flower.jpg");
background-attachment: scroll;
/*background-attachment: fixed;*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> Background attachment </h1>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
<p> This is a scrollable background image. </P>
</body>
</html>

The above code will generate the below output.


background attachment property
       <<- PREVIOUS                                                                        NEXT ->>






1 comment:

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.