WEEK 2- Time to get fancy in CSS

Tutorial

Problem Set

This is the code for the BEM. I use bbc.com main page to find the code

<div class="media  block-link" 
                <div class="media__image">
                    <div class="responsive-image"><img src="></div>                </div>

                
                <div class="media__content">

                                            <h3 class="media__title">
                            <a class="media__link" href=""> </a>
                        </h3>
                    
                                            <p class="media__summary">  </p>
                    
                                            <a class="media__tag tag tag--sport" href= rev=</a>
                    
                    
                </div>

Blogging Questions

There are certain CSS properties applied to a parent element that are “inherited” by the child elements. Name four properties that are inherited and four properties that are not inherited. Describe why you believe each is inherited or not.

4 Properties that are inherited

  • font-family;
  • font-size;
  • font-weight;
  • color;

4 Properties that are not inherited

  • margin;
  • width;
  • border-box;
  • padding;

Describe the differences between inline, block, and inline-block. Why would you want to use the inline-block value? Hint you have an example use in your Natours project.

Block elements use the entire width

Inline elements are on the same line as the content besides them. They share the width of other elements.

Inline-block elements are similar to inline elements, but they have other elements like padding and margin.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php