Untitled

Part I:  HTML

1. What is a block element and how does it flow on the screen?

        Block-level elements are used to occupy the entire space of its parent element and it flows more on the screen as it affects the larger structure and commonly correspondes to the flow content of screens.

2. What is an inline element and how does it flow on the screen?

        Inline elements define only the space bounded by tages in order to avoid breaking the flow of content. Which is the reason inline elements provide comparebly less flow, and is commonly associated with phrasing content.

3. What box model properties are unavailable for inline elements?

        The width and height of properties of box model are not available to the inline elements.

4. List 3 inline elements that are most commonly used?

        The most commonly used inline elements that are used are <span>, <a>, and <img>.

5. What are semantic tags and why use them?

        Semantic tags are tags that clearly define the content in them, and are used to describe the meaning or use of the tag for a specific set of content.

6. What are 2 grouping tags (one inline, one block)

        Two grouping tags are <div> for block-level, and <span> for inline.

7. Write the HTML5 tags we use to structure a page, in the order you might use them?

    <html>
        <head>
            <title></title>
        </head>
        <body>
            <h1></h1>
            <p></p>
        </body>
    </html>

8. What is the difference between a tag and an element?

        The difference between tag and elements is that tags are used to indicate that start and end of an HTML element, while elements are indicative of a structure or semantics as they commonly include start tag, content, and an end tag.

9. What is the box model (Explain it)?

        Box model can be described as the design and layout of CSS. The box model consists of margins, borders, padding, and content, whiel wrapping around every HTML element.

10. How does the box-sizing: border-box; rule modify the box model?

        Box-sizing is used to define the width and height of an element are calculated whether or not padding and borders are included.

12. On form tags such as input, what attribute links a label to the form element?

        The id attribut links the input tag in this case to the for element in the label element of a form tag.

13. Are input, button and textarea block or inline tags?

        Inline tages

14. What is the viewport meta tag used for?

        Viewport meta tag is mainly used for controling the dimensions and scaling of a page.

Part II:  CSS

13. How do you separate multiple CSS selectors in the same rule set?

        The way to separate multiple CSS selectors in the same rule set is by using a comma.

14. In the following selector, what does the space mean between the tag names?

   section p { property: value; }

        The space means that the p tag is the decendant selector of the ancestor element section in this descendent combinator.

15. How do you select the 2nd paragraph tag in CSS without modifying the HTML:

<main>

    <h1>Welcome</h1>

    <p>Hi</p>

    <p>Hello</p>

    <p>Hey</p>

</main>

        <style> // You modify the 2 paragraph using the general sibling selector and its symbol ~.

        h1 ~ p {
        }

        </style>

16. Write the CSS to show the menu items only when hovering over the nav

<nav>

	<h2>MENU</h2>

	<ul>

		<li><a href="#">Home</a></li>

		<li><a href="#">About</a></li>

		<li><a href="#">Contact</a></li>

	</ul>

</nav>

        <style>
            li a {
                display: block;
            }
        </style>

17. Which category of CSS properties are all inherited?

        The category of CSS properties passed by child elements are commonly all inherited.

18. What do the units vw and vh mean?

        vw and vh are relative length units where vw is relative to 1% of the width of the viewport*, and vh is relative to 1% of the height of the viewport*.

19. How do you set a top-margin to 2% of a site's width?

        You can set the top-margin of a site's width by including body { margin-top: 2%;} in your CSS.

20. What are the 2 methods we've used to make block elements flow horizontally; what are the side effects of each method?

        The two elements that we commonly used are floating and clear. Some side effects of these two methods are that you may want to force floats to move below a floated line which could be fixed by clearing and clearing can also cause overflows in which case a clearfix element can be used to correct this issue.


21. What are collapsing margins and how do you address them?

        Collapsing margins are when the top and bottom margins of elements are sometimes collapsed into a singal margin, which is also equal to the largest of the two margins. When adressing collapsing margins it is best to use the overflow element and setting it to auto.

22. Write the CSS property: value to make an inline element flow vertically?

        display: inline-block;
        vertical-align: middle;

23. Write the CSS property: value to horizontally center a fixed-width block element inside a parent?

        margin: 0 auto;

24. Write the CSS property: value to vertically center a this text if the section tag's height is 100px:

<section>Hello</section>

        section {
            height: 100px;
            text-align: center;
        }

25. In which HTML tag rule set is it good practice to place all font/text default properties in CSS and why?

        It is good practie to place all font/text defult properties in a @font-face rule, so any font/text can first have a defined name in the font-family for later use when called upon.

26. For floated elements inside a parent, how do we fix the parent's height from

   collapsing? State the answer and write the CSS.

        We can fix the parent's height from collapsing by adding a div tag with a class "clearfix" and adding to the CSS:

                .clearfix::after {
                    content: "";
                    clear: both;
                    display: table;
                }

27. What CSS property: value; is used to stop a unfloated element from sliding

   up and behind it's floated, previous sibling?

        The CSS property float: none; can be implimented to stop any sibling element from wrapping around previous sibling.

28. position: relative positions an element is relative to what?

        Relative to its normal postion.

29. For non-static positioning, what additional properties are required?

        Top, bottom, left, and right margins.

30. The position (eg, properties top, bottom, left or right) of absolute-positioned elements are in reference to what?

         Final position

31. What do each of these selectors mean? (state what is selected for each)

article>p       This selects all the <p> elements where the parent element is a <article> element.

nav li:nth-child(2):hover     This selects every <li> element second to the parent <nav> element when mouse course is over it.

p::after  (and what property is the partner to this selector)       This allows for inserting of properties after the content of each <p> element.

p+img       This selects all the img elements immediatly following the <p> element.

input[type="radio"]     This is used to define a radio button and selecting one button out of many to assign.

32. How do you set default styles in a website so the box model values are predictable for all elements across multiple browsers?

        In order to set defult styles in a website you can use a reset stylesheet and @import into the CSS stylesheet.

33. How do you use google fonts and from which file to you access them (HTML or CSS)?

        In order to use google fonts you can use @import url and the link with the fonts you have selected included and placed on the CSS style sheet.