Ans.1 There are four different position values •static •relat.pdf
- 1. Ans.1 There are four different position values: •static •relative •fixed •absolute (a) Static: This is default position. And they are not affected by any tag properties like top,left,bottom and right. Ex: Hello this is Static Explanation: The property left:50px will not do any affect to this p tag, as said it just displays as normal flow. (b)Relative An element with position: relative; is positioned relative to its normal position. That is if theres any other element above this element, then it wont effect or cover that above element. Ex: Please dont come here! Hello this is relative Explanation: Give any top,left,right or bottom value to the p tag it wont affect the h1 tag above it, instead it will arrange itself at a position relative to that h1 tag. (c)Fixed This is somewhat powerful than static and relative. An element with position: fixed; is positioned relative to the viewport. Ex: Hey you will hide me for sure. Im fixed element! Explanation: The line in p tag is positioned to top:0px, so the element above p tag which is h1 tag will be affected by this p tag. Inorder to put at right place you need to position it carefully. (d)Absolute This is somewhat similar to fixed and relative. Here the element is positioned(or fixed) according to the last element.And can't go top of its top element. Ex:
- 2. Hi I won't be coveredHello I will be covered Hi Im absolute element. Explanation: The p tag which is 'absolute' positioned to top= 0px will affect its tag above it, that is h2 tag. But it wont affect h1 tag, so you need to position accordingly. Ans.2 In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements. The <"section"> element is defined as a block of related elements. The article element got headers. Ex: Ans.3 HTML5 semantic elements: tag Description Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time Ans.4 a. #myId, .myClass p, #myidTwo p:first-child a { color;blue; } b. #myId { color:blue; }
- 3. .myClass p { color:blue; } #myidTwo p:first-child a { color:blue; } Explanation: Actually both (a) and (b) do same job that is putting blue color property, but they are implemented in different ways: In (a) it includes style property defined on set of classes and ids. So any property defined inside it will be applied to all classes/ids(#myId, .myClass p, #myidTwo p:first-child a).This is useful when you are going to give same colour to some set of elements . In (b) it defines css style properties for each class/id separately. It is usefull when you want to give different colours for different elements. Solution Ans.1 There are four different position values: •static •relative •fixed •absolute (a) Static: This is default position. And they are not affected by any tag properties like top,left,bottom and right. Ex: Hello this is Static Explanation: The property left:50px will not do any affect to this p tag, as said it just displays as normal flow. (b)Relative An element with position: relative; is positioned relative to its normal position. That is if theres any other element above this element, then it wont effect or cover that above element. Ex: Please dont come here!
- 4. Hello this is relative Explanation: Give any top,left,right or bottom value to the p tag it wont affect the h1 tag above it, instead it will arrange itself at a position relative to that h1 tag. (c)Fixed This is somewhat powerful than static and relative. An element with position: fixed; is positioned relative to the viewport. Ex: Hey you will hide me for sure. Im fixed element! Explanation: The line in p tag is positioned to top:0px, so the element above p tag which is h1 tag will be affected by this p tag. Inorder to put at right place you need to position it carefully. (d)Absolute This is somewhat similar to fixed and relative. Here the element is positioned(or fixed) according to the last element.And can't go top of its top element. Ex: Hi I won't be coveredHello I will be covered Hi Im absolute element. Explanation: The p tag which is 'absolute' positioned to top= 0px will affect its tag above it, that is h2 tag. But it wont affect h1 tag, so you need to position accordingly. Ans.2 In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements. The <"section"> element is defined as a block of related elements. The article element got headers. Ex: Ans.3 HTML5 semantic elements: tag Description Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section
- 5. Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time Ans.4 a. #myId, .myClass p, #myidTwo p:first-child a { color;blue; } b. #myId { color:blue; } .myClass p { color:blue; } #myidTwo p:first-child a { color:blue; } Explanation: Actually both (a) and (b) do same job that is putting blue color property, but they are implemented in different ways: In (a) it includes style property defined on set of classes and ids. So any property defined inside it will be applied to all classes/ids(#myId, .myClass p, #myidTwo p:first-child a).This is useful when you are going to give same colour to some set of elements . In (b) it defines css style properties for each class/id separately. It is usefull when you want to give different colours for different elements.