Basics of CSS: Part 2 (Properties of CSS)

Introduction

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

Basics of CSS: Part 1

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

Background properties
Text properties
Font properties
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 an 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 “Descendant 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 the 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;
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 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 on 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{
6. }
7. #para2{
9. }
10. #para3{
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 character, 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 para3, space is reduced between each character by 5px.

NOTE

Font Properties

The font properties can be classified into the following:

Font-family
Font-size
Font-style
Font-variant
Font-weight
Font

Let's look at each of them practically.

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

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

<head>
<title></title>
<style type="text/css">
#para1{
#para2{
}
</style>
</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.

<style type="text/css">
#para1{
font-family: Verdana;
}
#para2{
font-family: Garamond;
}
</style>

Currently, our HTML page looks like this.

Refresh the page.

So, now the font of the paragraphs is 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 a 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, which 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 appear in smaller font sizes 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:

a:link: it is a normal state meaning the link is unvisited.
a:visited: a visited link.
a:hover: a state where the user hovers the mouse over the link.
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.

<body>
<a href="http://www.c-sharpcorner.com/">CSharpCorner</a>
</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 all four states in the same order as shown below.

<style type="text/css">
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</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.

a:link{
/*To remove the underline, pass none in the text-decoration property*/
text-decoration: none;
}

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.

a:visited{
color: black;
}

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.

a:hover{
color: yellow;
}

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.

a:active{
color: red;
background-color: black;
}

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.