HTML and CSS Basics – Learning Outcomes Quiz

The Odin Project shows you the learning outcomes at the beginning of the lesson. Then invites you to test yourself on those questions after studying the materials.

These are the questions from HTML and CSS Basics in the Web Development 101 Course.

Note: These are just my answers from my current (limited) understanding. So, if you notice any mistakes or misunderstandings, please leave a comment below.

  1. Why do we separate HTML and CSS?
    Efficiency.
    1) One CSS file can affect many webpages.
    2) If you need to make a change you only need to change on file, not every page where you want the style to change.
    3) Reduced loading time/bandwidth use.
  2. What are classes and IDs (and how are they different)?
    Classes and IDs are ways to specify an element of the HTML. We specify the class or ID in the HTML element. Then we use that as a reference in the CSS to apply styles to that element. It also allows us to apply the same style to many different kinds of elements.
    Classes are less specific – use a dot in the selector in CSS (.class)
    IDs are more specific – use a hash in the selector in CSS (#ID)
  3. What are elements?
    Elements in HTML are things contained in tags. For example,
    <header>The Header</header>
  4. What are tags?
    Tags are the things that identify the element in HTML. For example,
    <br> <a> <h1> 
  5. What are attributes?
    Attributes are in the opening tag of an HTML element. They control the behavior of the element or provide information about it. For example,
    href="link.html"    alt="alt text" 
  6. What are forms?
    Forms are inputs for data from the user of the website. The user can input in the form and submit it. Forms are specified within the HTML.
  7. What is a div?
    A divider in the HTML. It is often used as a container for other HTML. It allows us to specify and apply CSS to that particular section.
  8. What are selectors?
    Selectors are the way we target an HTML element. For example, the tag itself, a class, an ID, an element within a class, or a behavior.
    p div a h1
    .content .navbar
    #content-top #biglist
    .content:hover
    .content p
  9. What are properties?
    Properties are the things we can change and specify for in CSS. For example,
    color: ;  font-face: ; padding: ;
  10. What are values?
    Values are the actual values we input into the properties to decide the size or color.
    For example,

    red sans-serif 10px
  11. What is the “query string” in a URL and what does it do?
    It shows what was submitted from a form. It appears when the form submission method is set to”get” (which is the default). It is only used for non-sensitive data like searches in a search engine. Since it is a string in the URL, it allows you to bookmark that webpage.
  12. What is the difference between “pixels” and “ems”?
    Pixels are set sizes on the page, like 12px is 12 pixels wide on the screen. It is measured relative to the screen size. They are useful for use in exact control of design but it takes away control from the user.
    Ems is relative to the default font size of the document. 1em is 100%. For example, if your default font size is set to 12px:
    0.5em is 6px
    1em is 12px
    1.5em is 18px
    2em is 24px
    They are useful for allowing flexibility in displaying well and adapting to different view ports. It is more fluid design and more accessible for users with sight issues.
  13. How do CSS styles for a particular element get inherited? i.e. how does an element get its “default” styles?
    Default styles already exist in HTML and CSS. Unless you specify otherwise the default CSS rules will apply.
    If you specify a CSS rule for a particular element it has singled out that element so it is more specific than the default, so it will override the default.
    CSS in inherited based on specificity and order in the CSS file. Styles of the same specificity level which are found lower in the CSS document will be applied (as the document is read from top to bottom). If we imagine the computer running down the document, first it will see “.content-box {color: red;}” and make the text red, then see “.content-box {color: blue;}” and make it blue.
    This order can be overriden if one is more specific. For example, if it was”#todaysnews {color: blue;}” then “.content-box {color: red;}”  the first is an ID so it is more specific and would override the class, which is less specific.
  14. What are two CSS attributes you can change to push an element around on the page?
    I feel unsure of this question as the phrase “push around” is a bit vague – does it mean to change position on the page. Or when you resize the window, the content will move around and be flexible in it’s position?
    During the CSS lessons we covered:
    display
    position
    float
  15. What are the three different ways to include CSS in your project or use CSS to style a particular element?
    Inline – inside the HTML element that you want to style
    For example,
    <h1 style=”color:red;padding:10px”>
    Internal – Write the CSS within style tags inside the head of the HTML document.
    <style>
    h1 {
    color: red;
    padding: 10px;
    }
    </style>
    External – in a style.css document which is linked to in the head of the HTML document.
  16. What is the “default stylesheet” or “user agent stylesheet”?
    These are both names for the default CSS stylesheet set by the browser.

  17. Why use a CSS reset file?
    If you want to reset the default stylesheet you can use a CSS reset file. For example, the default stylesheet automatically has some padding so you can override this with 0 padding.
    This allows you to start your style coding from a baseline that should avoid issues – like the browser automatically adding padding and making your calculations for your layout off.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s