Day 5: Ids and classes : div tag :span tag :

 Ids and classes :

  • ids and classes cannot have spaces i.e. "firsttable" is a valid id and class, but "first table" is not a valid id or class.  

<div> tag :

    • <div> tag is used to create a division/section in an HTML document.     
    • It is used as a container for various HTML elements, which can be used to style that section with CSS or can be used to apply javascript to that particular div.           
    • It can be styled with the help of class or id attribute.           
    • It supports all types of content.         
    • It is a block-level element, hence it always starts from a new line.     
    • It  takes up the entire width that is available.

     

      <span> tag :

      • It is an inline container which can be used to mark a particular part of text or even a document.     
      • As it is an inline element, it does not begin on a new line (unlike the block element)           
      • Inline elements will only take up the width that is necessary and not the entire width available.

       

      Example demonstrating difference between <div> (Block element) and <span> inline element :

       

         

        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

        LCM & HCF- Tricks

          Trick-1 As learned in the previous video, the greatest number that will exactly divide x, y, & z is the HCF of x, y, & z. If asked to find out the greatest number that will divide x, y, & z leaving reminders a, b, & c, respectively, the number would be HCF of (x-a), (y-b), and (z-c). Example-  Find the greatest number that will divide the 204 and 327 leaving remainders 4 and 7, respectively. Solution:  Greatest number will be HCF of (204-4) and (327-7) HCF of 200 and 320 = 40 Therefore, 40 will divide 204 and 327 leaving remainders 4 and 7, respectively.   Trick-2 As learned in the previous video, the least number which when divided by x, y, and z leave no remainder is LCM of x, y, and z. The least number which when divided by x, y, and z leave remainders a, b and c, respectively is given by [(LCM of x, y, & z) - k]. Where, k = x-a = y-b = z-c Example-  Find the least number divided by 12, 15, and 20 leaves remainders 4, 7, and 12, respecti...
        Read more

        Day 9: CSS - Font Formate

        Image
        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 f...
        Read more