Basics of CSS: Part 2 (Properties of CSS)

• 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
  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 of a text, we can use the line-height property.

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

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. 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.
  

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 hovers the mouse over the link.
4. a:active: link that is clicked.

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.