Question

Regarding HTML and CSS answer the following... 1: Describe the different types of positioning used in...

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;

}


0 0
Add a comment Improve this question Transcribed image text
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.

Add a comment
Know the answer?
Add Answer to:
Regarding HTML and CSS answer the following... 1: Describe the different types of positioning used in...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Langauges: HTML,CSS, AngularJS 8. Define two color schemes for your page. That is, choose 3 different...

    Langauges: HTML,CSS, AngularJS 8. Define two color schemes for your page. That is, choose 3 different elements, and give them all the same background color (1 scheme is 1 color, the other scheme is another) a. In the previous assignment, you were supposed to have written a function called changeBackground. Adapt this function and make it an Angular function called changleColorScheme b. This function should automatically toggle the color schemes (background colors) for the 3 elements you have chosen

  • please answer these two html questions, thanks 1. What will the following CSS statement cause to...

    please answer these two html questions, thanks 1. What will the following CSS statement cause to happen? Describe each part specifically in terms of what it will cause to happen on the display. For example, you will not receive credit for just saying the color will be green or th padding will be 5px - you must indicate exactly what element or part of an element will be use these rules     td, th {         border: thin dotted pink;...

  • 1. Draw a memory hierarchy diagram. 2. Briefly describe the different types of memory in the...

    1. Draw a memory hierarchy diagram. 2. Briefly describe the different types of memory in the memory hierarchy in terms of performance, access time and cost. 3. Describe the followings regarding cache: a. Block placement b. Block identification c. Block replacement d. Write strategy

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • |HTML 460 HTML Chapter 9 Integrating Audio and Video In the Labs Labs 1 and 2,...

    |HTML 460 HTML Chapter 9 Integrating Audio and Video In the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. Lab 1: Adding Video to the New Harvest Food Bank Website Problem: You volunteer at a local food bank called New Harvest Food Bank that collects community food donations and provides food and...

  • Which of the following codes is used to provide positioning relative to the nearest container? 1. a) position: fixed b) position: static; c) position: absolute d) position: relative; e) position:...

    Which of the following codes is used to provide positioning relative to the nearest container? 1. a) position: fixed b) position: static; c) position: absolute d) position: relative; e) position: none; 2. What is called a, b and c in a style as "a (b: c; d: e:]"? a) a:selector, b:property, c:value b) a:property, b:selector, cvalue c) avalue, b:selector, c:property d) a:selector, b:value, c:property e) a:property, b:value, c:selector What is the style of command when the CSS code is written...

  • 1. How many different types of gametes are made by a parent of genotype Bb? 2....

    1. How many different types of gametes are made by a parent of genotype Bb? 2. A right-handed (R) man and a left-handed (t) woman have two children, one right handed and one left-handed. What are the genotypes of all four family members? 3. A woman with freckles (F) has two children, one with freckles, and one without. What are the possible genotype(s) of the father? 4. A man who is heterozygous for eye color (Bb) marries a woman who...

  • Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 Extern...

    Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 External Style Sheet - Brandon  */ Style the h1 element with a background color of lightgreen and center the text. Style the p element with a blue text color and yellow background color. Style the p element of class .firstclass with a green text color. Style the...

  • Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

    Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/ Implement grid on the sample html file using pixels Convert to a percentage-based grid HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Out with the old...</title> <link rel="stylesheet" href="path-to-style.css"> <meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward."> <meta name="author" content="ABC"> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div...

  • 1) Answer the following questions regarding Photosynthesis: A) In your own words, describe the steps of...

    1) Answer the following questions regarding Photosynthesis: A) In your own words, describe the steps of the linear electron flow pathway of photosynthesis (3 pts). Answer: B) Compare and contrast the cyclic electron flow pathway and the linear electron flow pathway (2 pts). Answer: 2) Describe the following regarding bacterial and archacal membranes and cell wall structures and indicate which groups of organisms (phyla of bacteria or genera of archaea) each type of cell wall is found: A) The membrane...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT