HTML 5

Basics of CSS: Part 2 (Properties of CSS)

Before moving on with this session, I would strongly recommend you to check Part 1 of this series.

The following are the topics that we will discuss in this article.

  1. Background properties
  2. Text properties
  3. Font properties
  4. Link properties

Background properties

To define or add a background, we can use the background properties.

  • Background-color

    To specify a background color for an element or a group of element, we can use the background-color property.

    Let's look at an example of it.

    Step 1

    Create a new Index.html file and in the body section of it, add a div container tag and inside this tag add a paragraph.



    Step 2

    The next is to create an internal stylesheet and for that write the following in the head section of this current Index.html file.



    In the internal stylesheet, we created a rule of type “Descendent Selector” that we already discussed in Part 1 of this series.

    We want the background color of the paragraph to be Green and for that we can use the background-color property and set its value to Green.



    The following is the entire code snippet.
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5.          div p  
    6.          {  
    7.              background-color: green;  
    8.          }  
    9.       </style>  
    10.     </head>  
    11.     <body>  
    12.         <div>  
    13.             <p>Welcome to CSS Tutorial</p>  
    14.         </div>  
    15.     </body>  
    16. </html>  
    Open Index.html in a browser.



  • Background-image

    To add a background image for an element, use the background-image property.

    Let's look at an example of it.

    Step 1

    Create a new IndexTwo.html file and add the following to the body section.



    Step 2

    Create an internal stylesheet in the head section of IndexTwo.html. Create a new element selector rule of div and add the following.



    Pass the address in the URL block.

    The following is the entire code snippet.
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5.            div{  
    6.                width: 200px;  
    7.                height: 100px;  
    8.                background-image: url(Images/1.jpg);  
    9.            }  
    10.         </style>  
    11.     </head>  
    12.     <body>  
    13.         <div>  
    14.             <p>Background Image property</p>  
    15.         </div>  
    16.     </body>  
    17. </html>  
    Open in a browser.



    NOTE: By default the background images are repeated horizontally(x) as well as vertically(y). But we can manipulate this rule using the background-repeat property.

  • Background-repeat

    To repeat a background vertically or horizontally or both, we can use the background-repeat property.

    Currently the image repeats both vertically and horizontally.



    Let's say we want the background image to be repeated only in the horizontal direction and for that all we need to do is pass repeat-x as a value for the background-repeat property.





    If you don't want to repeat the background, pass no-repeat as a value.





  • Background-position

    Let's say for some reason we don't want to repeat the background but we want the Orange part of the background image to be displayed as a background for the paragraph.

    Set the background-position property to bottom left.





  • background-attachment

    To make a background fixed or to scroll with other content, we use the background-attachment property.

    Let's look at an example.

    Step 1

    Create a new IndexThree.html file and add thirteen paragraphs to it.



    Step 2

    Create two different rules in the internal stylesheet using element selectors.



    In the body element, we set a background image. We passed no-repeat for the background-repeat property since we don't want this image to be repeated in the body and we passed fixed as a value for the background-attachment. That means that whenever we scroll the page down, this background image remains fixed at where it is displayed.

    In the paragraph element, all we are doing is assigning White as a text color.

    Open the file in a browser.



    Look at the output we got. We just got one and two paragraphs displayed with a background image.

    But when we scroll the page down, we get the rest of the paragraphs on the same background image because the image is fixed.





    And so on.

    Entire code snippet
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5.             body  
    6.             {  
    7.                 background-image: url(Images/1.jpg);   
    8.                 background-repeat: no-repeat;  
    9.                 background-attachment: fixed;  
    10.             }  
    11.             p  
    12.             {  
    13.                 color: white;  
    14.                   
    15.             }  
    16.         </style>  
    17.     </head>  
    18.     <body>  
    19.         <p>One</p>  
    20.         <p>Two</p>  
    21.         <p>Three</p>  
    22.         <p>Four</p>  
    23.         <p>Five</p>  
    24.         <p>Six</p>  
    25.         <p>Seven</p>  
    26.         <p>Eight</p>  
    27.         <p>Nine</p>  
    28.         <p>Ten</p>  
    29.         <p>Eleven</p>  
    30.         <p>Twelve</p>  
    31.         <p>Thirteen</p>  
    32.     </body>  
    33. </html>  

Text Properties

To change the fore-color of a paragraph we use the color property that is nothing but a text property. Using the text property we can decorate the text using the Text-Decoration property or we can change the alignment of the text using the Text-Align property and many more.

Let's look at each of them.

  • Color

    Create a new HTML file and add the following paragraph.
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.     </head>  
    5.     <body>  
    6.         <p>This paragraph color is orange</p>  
    7.     </body>  
    8. </html>  
    Open in a browser.



    Let's say we want to change the fore-color of this paragraph to Orange and for that we need to create a new CSS rule.

    Create an internal stylesheet in the head section.
    1. <style type="text/css">  
    2. p{  
    3.     color: orange;  
    4. }  
    5. </style>  


    Refresh the page.



  • Text-Alignment

    To set the horizontal alignment to the text, in other words left, right, center or justify, use the text-align property.

    Let's look at an example.

    In the previous example we saw how to fill in a color in a text. Now let's change its alignment.
    1. <style type="text/css">  
    2. p{  
    3.     color: orange;  
    4.     text-align: center;  
    5. }  
    6. </style>  
    Refresh the page.



    So, now the paragraph is centered.

    If you want to align text to the right, pass right as a value for the text-align property.
    1. <style type="text/css">  
    2. p{  
    3.     color: orange;  
    4.     text-align: right;  
    5. }  
    6. </style>  


  • Text-Decoration

    To add an underline, or line-through the text or over the text, use the text-decoration property.

    Let's look at an example.

    Add another paragraph to the HTML file.
    1. <body>  
    2.     <p id="para">This paragraph color is orange</p>  
    3.     <p id="para1">This is <span>another</span> a new paragraph </p>  
    4. </body>  


    Now we have two paragraphs and both of these paragraphs have different Ids.

    Let's add some decorations in para1.

    Create a new CSS rule in the internal stylesheet and this time we will create a Descendent selector rule.

    Let's say for some reason we want to strike out the span element from the para1, for that we can set the text-decoration property to line-through.
    1. #para1 span{  
    2.    text-decoration: line-through;  
    3. }  


    Refresh the page.



    In a similar way, if you want to add a line under a text then set the text-decoration property to underline.
    Add another span element in para1.
    1. <p id="para1">This is <span>another</span> a new <span id="under">paragraph</span></p>  
    Wrap the paragraph text with span and provide an id of under.



    In the internal stylesheet, create a new CSS rule.
    1. #para1 span#under{  
    2.    text-decoration: underline;  
    3. }  


    Refresh the page.



    In a similar way, if you want to add a line over a text or the entire paragraph, set the text-decoration property to overline.

  • Text: Transform

    To change the case of a text or the entire paragraph to uppercase, lowercase or want to capitalize every first of a text, use text-transformation.
    Let's look at an example.

    Create a new HTML file and add three paragraphs as in the following:
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.     </head>  
    5.     <body>  
    6.         <p id="para1">This is a uppercase paragraph</p>  
    7.         <p id="para2">THIS IS A LOWERCASE PARAGRAPH</p>  
    8.         <p id="para3">This is a capitalized paragraph</p>  
    9.     </body>  
    10. </html>  


    Open in a browser.



    Now add an internal stylesheet to the head section and create three different CSS rules using the Id selector.
    1. <head>  
    2.     <title></title>  
    3.     <style type="text/css">  
    4.         #para1{  
    5.               
    6.         }  
    7.         #para2{  
    8.               
    9.         }  
    10.         #para3{  
    11.               
    12.         }  
    13. </style>  
    14. </head>  


    In the first Id selector, set the text-transform property value to uppercase.

    In the second Id selector, set the text- transform property value to lowercase.

    In the third Id selector, set the text- transform property value to capitalize.
    1. <head>  
    2.     <title></title>  
    3.     <style type="text/css">  
    4.         #para1{  
    5.             text-transform: uppercase;  
    6.         }  
    7.         #para2{  
    8.             text-transform: lowercase;  
    9.         }  
    10.         #para3{  
    11.             text-transform: capitalize;  
    12.         }  
    13. </style>  


    Refresh the page.



  • Letter-Spacing

    To add or remove spaces between each characters, use letter-spacing.

    To add a space use a positive value and to remove a space use a negative value.

    Let's say for some reason we want to add a space of positive 5px in para1 and a negative 5px in para3.





    In the output, para1 has 5px of space between each character and in the para3, the space is reduced between each characters by 5px.

    NOTE

      To add a space between each character we use the letter-spacing property.
      Just like that, to add a space between each word, we can use the word-spacing property.
      To increase or decrease the height to a text, we can use the line-height property.

Font Properties

The font properties can be classified into the following:

  1. Font-family
  2. Font-size
  3. Font-style
  4. Font-variant
  5. Font-weight
  6. Font

Let's look at each of them practically.

Create a new HTML file and write the following inside the body element.

  1. <body>  
  2.     <p id="para1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>  
  3.     <br/>  
  4.     <br/>  
  5.     <p id ="para2">Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
  6. </body>  


Note: The paragraph content is just a snippet provided by the sublime text editor.

Open the file in a browser.



In the same HTML file, create a new internal stylesheet in the head section and write the following in it.
  1. <head>  
  2.     <title></title>  
  3.     <style type="text/css">  
  4.     #para1{  
  5.           
  6.       
  7.     #para2{  
  8.           
  9.     }  
  10. </style>  
  11. </head>  


So, until now what we have done is, we have created a new HTML file in which we added two paragraphs with an id of para1 and para2 respectively.

In the head section of the same HTML file we created an internal stylesheet in which we created two new CSS rules using an id selector.

Now let's say we want to change the font family of para1 to Verdana and font family of para2 to Garamond. For that we can use the font-family property and pass the value as Verdana for para1 and pass the value as Garamond for para2.

  1. <style type="text/css">  
  2.     #para1{  
  3.         font-family: Verdana;  
  4.     }  
  5.     #para2{  
  6.         font-family: Garamond;  
  7.     }  
  8. </style>  


Currently our HTML page looks like this.



Refresh the page.



So, now the font of the paragraphs are changed respectively.
  • Font-Size

    Now let's increase the font size of both of these paragraphs and for that we can use the font-size property.

    The default text size in the browser is 16px and the font size value can be in percentage, or pixels, or em.

    Let's say we want to give font size of 32px in para1 and 2em in para2.
    1. <style type="text/css">  
    2.     #para1{  
    3.         font-family: Verdana;  
    4.         font-size: 32px;  
    5.     }  
    6.     #para2{  
    7.         font-family: Garamond;  
    8.         font-size: 2em;  
    9.     }  
    10. </style>  


    As we know, the default size of the text is 16px and just like that the default size of 1em is 16px and in the rule we passed the font-size as 2 em, that means 32px.

    Refresh the page.



  • Font- style

    If you want to change the text font from normal to italic, then use this property and pass italic as a value.

    Let's say we want to change the font style of para1 to italic and for that write the following in #para1 CSS rule.
    1. #para1{  
    2.    font-family: Verdana;  
    3.    font-size: 32px;  
    4.    font-style: italic;  
    5. }  


    Refresh the page.



  • Font-Variant

    The font-variant property can be used to convert the lowercase letters to upper case. But the converted uppercase letters appear in a smaller font size than the original uppercase letter size.

    DEMO

    Create a new HTML file and add two paragraphs to the body section.
    1. <p id="para1">Paragraph with uppercase transformation</p>  
    2. <p id="para2">Paragraph with small-caps font variant</p>  


    Create an internal stylesheet in the head section of your HTML file and write the following.
    1. <style type="text/css">  
    2.     #para1{  
    3.         text-transform: uppercase;  
    4.     }  
    5.     #para2{  
    6.         font-variant: small-caps;  
    7.     }  
    8. </style>  


    For paragraph one, we used the text-transform property and passed the value “uppercase” that will change the lower case text to uppercase.

    For paragraph two, we used the font-variant property and passed the value “small-caps” that will change the lowercase text to uppercase.

    Open the file in a browser.



    In the output we can see, the second paragraph in which we passed small-caps is converted to uppercase but the converted uppercase letters appears in a smaller font size than the original uppercase letter size.

  • Font-weight

    To set the thickness or thinness of a paragraph or text, use the font-weight property and pass the value of bold, bolder, or lighter.

    DEMO

    Create a new HTML file and add three paragraphs.
    1. <body>  
    2.     <p id="para1">This paragraph is lighter</p>  
    3.     <p id="para2">This paragraph is bold</p>  
    4.     <p id="para3">This pargraph is bolder</p>  
    5. </body>  


    In the head section of this HTML file, add an external stylesheet and write the following.
    1. <style type="text/css">  
    2.     #para1{  
    3.         font-weight: lighter;  
    4.     }  
    5.     #para2{  
    6.         font-weight: bold;  
    7.     }  
    8.     #para3{  
    9.         font-weight: bolder;  
    10.     }  
    11. </style>  


    Open the file in a browser.

Link Property

Whenever you want to add styles to hyperlinks then use the link properties.

There are four states of link:

  1. a:link: it is a normal state meaning the link is unvisited.
  2. a:visited: a visited link.
  3. a:hover: a state where the user hover the mouse over the link.
  4. a:active: link that is clicked.

NOTE

a:hover must come after a:link and a:visited whereas a:active must come after a:hover.

Let's look at an example of it.

DEMO

Create a new HTML file and in the body section, add an anchor tag element.

  1. <body>  
  2.     <a href="http://www.c-sharpcorner.com/">CSharpCorner</a>  
  3. </body>  


Open the file in a browser.



In the head section of the same file, create an internal stylesheet.
In this stylesheet create the rules for the all four states in the same order as shown below.


  1. <style type="text/css">  
  2.     a:link{  
  3.           
  4.     }  
  5.     a:visited{  
  6.           
  7.     }  
  8.     a:hover{  
  9.           
  10.     }  
  11.     a:active{  
  12.           
  13.     }  
  14. </style>  
Now let's say our business requirements are such that we don't want to display an underline in the link.
In the first statem a:link rule, write the following.
  1. a:link{  
  2.    /*To remove the underline, pass none in the text-decoration property*/  
  3.    text-decoration: none;  
  4. }  


Refresh the page.



Whenever a link is visited, we want to change the color from default to Black and for that pass the value Black in the color property in the visited state, in other words a:visited.
  1. a:visited{  
  2.    color: black;  
  3. }  
Refresh the page and click on the link.



Now whenever a user hovers the mouse on the link, we want to change the color of the link from default to Yellow and pass the color property value as Yellow in the hover state of the link.
  1. a:hover{  
  2.    color: yellow;  
  3. }  
Refresh the page.



Now let's say that whenever the user clicks the link, meaning when the link is active, we want to change the background color of the link to Black and the text color to Red and for that we can use the background-color and color property in the a:active state.
  1. a:active{  
  2.    color: red;  
  3.    background-color: black;  
  4. }  
Refresh the page.



Summary

This article explained the four most commonly used properties Background, Text, Font and Link.

The next article of this series will explain more about properties.

Until then keep learning.

Thank you.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs