Day 9: CSS - Font Formate

p1{

 font style: italic,

}

p2{

font-variant: small-caps;

}

p3{

font-weight: 400px:

}

p4{

font-size: 12pt

}

p5{

font-family: 

}

-----------------------------------------------------------------------------------------------------------------------

The CSS font-family Property :

  • The font-family property in CSS is used to specify the typeface of a text.     
  • If the font name has more than one word, such as "Times New Roman," quotation marks must be used.       
  • Example: The following code applies a font family to a paragraph using class ids:I       

Code :

 

Output :

     

       

      The CSS font-size Property :

      • The font-size attribute controls a font's size.     
      • It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.     
      • Font-size can also be specified in pixels (which sets the font to a fixed size in px) and percentages (which sets the font to a percentage of the font size of the parent element).     
      • (| signifies OR in syntax).      
      • Available font-sizes are x-small,xx-small, small,large, x-large, xx-large.
      • Syntax : 

      font-size : 20px

      Code:
       

      Output :

       

      font-variant property in CSS

         

          • The font-variant property determines if a text should be shown in small capitals or not.       
          • Every lowercase character is changed into uppercase characters by using a small-caps font. But compared to the text's original capital characters, the converted uppercase letters have a smaller font size.

             

              • Syntax for font-variant : 

              font-variant: value

              Values :

              1. normal : It shows text in normal font. Font-variant is set to normal by default. 
              2. small-caps : It displays fonts in small caps.

               Code:
               

              Output :

               CSS letter-spacing Property :

              Character spacing in a text can be altered via the letter-spacing property.

              • Syntax :

              letter-spacing: value;

              Values :

              • normal : defines the standard character spacing. Normal value is the default value for letter-spacing      
              • length :establishes a length that is used as the character spacing (negative values are also allowed).   
              • initial : returns this property's default setting.

              Different ways to add CSS into your document :  

              Inline style CSS : By using the inline CSS approach, CSS can be applied to a single element. The "style" attribute of the relevant element defines inline styles.

              Example :

              <p style="color: yellow"> Changes the font color to yellow for this paragraph.</p>

              Only the <p> element's font color will be altered by the code previously mentioned.

              Pros :

              1. Due to potential spam several email clients DO NOT permit the usage of external.css referencing. Embedding could be beneficial in such cases.     
              2. Saves time by eliminating the need to go back and forth between the HTML file and the CSS document for quick updates, prototyping, and easy tests.   
              3. As with the external style, you don't need to generate and upload a separate document.

                Cons :

              1. Adding the code to the HTML file can make the page larger and take longer to load.     
              2. Every HTML element must have a CSS rule added to it, which takes time and complicates the HTML structure.

              When to use Inline style CSS :

              1. When you need one-time formatting for a particular tag, utilize inline style CSS. 
              2. You wish to alter the default CSS for a particular tag, which was specified externally or at the top of the file.

              Embedded/Internal CSS : It is applied to give a single document its unique style. Embedded CSS is the process of adding CSS rules to an HTML document using the <style> element.

              Example : 

              <style>  p{color:yellow}  </style> 

              Advantages : 

              1. You don't need to upload several files because the code will only be added to the one HTML file.

              Disadvantages :

              1. Since most webmail clients remove the head-tags, certain email clients do not permit styles in the [head].   
              2. The size and loading time of the page may increase by adding the code to the HTML content.

              When to use  Internal style CSS :

              1. If the styles are only required for one file and you don't expect them ever changing to apply to other pages, you can use internal style CSS to place your css at the top of the file. 

              External CSS :To add CSS to several pages or all pages, utilize external CSS. In this case, a css file contains all of the CSS code. It must have a.css extension, such as style.css. 

              Example :  

              If the following styles are included in the style.css file: 

              p{color:yellow}

              This style.css file needs to be linked to your html pages in the following way:

              <link rel="stylesheet" type="text/css" href="style.css">  

              The head section of HTML is where the link tag must be added.

              Advantages :

              1. Your HTML files will be smaller and have a better structure because the CSS code is in a separate document.     
              2. The same.css file can be applied to many pages.

              Disadvantages :

              1. It's possible that until the external CSS is loaded, your pages won't render correctly.   
              2. The download time of your website may rise if you upload or link to several CSS files.

              When to use External style CSS :

              1. When you want to keep the look and feel consistent.   
              2. When you wish to make changes on numerous pages.

              CSS text-transform Property

              • The capitalization of text is managed via the text-transform attribute.   

              Values :

              • capitalize : It will capitalize each word’s first letter.     
              • none :The text appears as it is. None if the default value of text-transform property.         
              • uppercase : It will change all the characters to uppercase format.       
              • lowercase :  It will change all the characters to lowercase format.
              • Syntax :

              text-transform: value;

                 

                  Code :

                  Output :

                  CSS text-align Property

                  • The horizontal alignment of text within an element is specified by the text-align attribute.
                  • Values:
                  • right : text is aligned to the right direction       
                  • left : text is aligned to the left direction       
                  • center : text is aligned at center       
                  • justify : each line is stretched so that every line has the same width.

                   

                  • Syntax :

                  text-align: value;

                  Code :

                  Output:

                   



                  Comments

                  Post a Comment

                  Popular posts from this blog

                  else-if condition in if-else statements: Concatenation in JavaScript :

                  Image
                    else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
                  Read more

                  Day 27: Css Variable

                  Image
                   :root {   --main-color: #3498db; } .element {   background-color: var(--main-color); } HTML Code: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css">   <title>Sample Page</title> </head> <body>   <div class="element">     This is a sample element with the specified background color.   </div> </body> </html> CSS Code: :root {   --main-color: #3498db; } .element {   background-color: var(--main-color);   padding: 20px;   color: white; /* Text color to make it visible on the background */ }
                  Read more