Question

Regarding HTML and CSS answer the following...

1: Describe the different types of positioning used in CSS.

2: What is the difference between section and article elements in HTML5

3: What are the various types of semantic elements in HTML5. Please describe them briefly

4: What is the difference in a and b

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;

}

Answer 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: <p style='position:static;left:50px'>Hello this is Static</p>
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:
<h1>Please dont come here!</h1>
<p style='position:relative;left:50px'>Hello this is relative</p>
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:
<h1> Hey you will hide me for sure.</h1>
<p style='position:fixed;top:0px'>Im fixed element!</p>
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:
<h1>Hi I won't be covered</h1>
<h2>Hello I will be covered</h2>
<p style='position: absolute;top:0px'>Hi Im absolute element.</p>
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:
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>

Ans.3
HTML5 semantic elements:
tag             Description
<article>      Defines an article
<aside>        Defines content aside from the page content
<details>      Defines additional details that the user can view or hide
<figcaption>   Defines a caption for a <figure> element
<figure>       Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>       Defines a footer for a document or section
<header>       Specifies a header for a document or section
<main>         Specifies the main content of a document
<mark>         Defines marked/highlighted text
<nav>          Defines navigation links
<section>      Defines a section in a document
<summary>      Defines a visible heading for a <details> element
<time>         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.