Question

"Introduction to CSS" (ICSS 2)
by Carrie Dils

(Part 2 of 2)

1. Select File > Make a Copy of this Google document within your Google Drive.

2. Login to your https://linkedin.com/learning/ account

3. Search for the LinkedIn Learning course name listed above

4. Search for each of the highlighted video names listed below and click the bookmark flag of each

5. Watch your now bookmarked videos and answer the associated questions listed below

6. When done, select File > Download As > Microsoft Word (.docx) and save it to your computer

7. Return to https://canvas.seattlecentral.edu to this assignment > upload/submit your answers via a Word doc

Common CSS Concepts

1) [True or False] By default, backgrounds extend all the way to the inside edge of the element’s border.

2) [True or False] By default, backgrounds are transparent.

3) [Critical Thinking] Why does the author choose to hide the text of his heading tags from visible view while showing an image instead?

4) The CSS color property is used to define the color for the content of the element. In the case of a p tag (paragraph) what will this property effect?

5) [True or False] Absolute values are good for devices in which the exact size is already known, for example a printer.

6) [True or False] An advantage to using the relative value em is that the starting size of the text is up to the device itself. As the user changes the resolution, the relationship of the sizes based on ems will stay exactly the same.

7) [True or False] Pixels are calculated relative to the parent element.

8) [True or False] According to our author normal document flow can and should handle the majority of our layout needs.

9) Which value of the position property removes an element from normal document flow and repositions the element based on top, right, left or bottom offset values?

10) [True or False] To determine its position, an absolutely positioned element looks to the nearest parent element that has positioning. If no elements are positioned above it, it looks to the body tag for positioning.

11) [True or False] Fixed positioning is similar to absolute, but the position is always relative to the active viewport, not the parent element.

12) Which CSS property controls allow positioned elements to stack (appear on top of) other elements?

13) [True or False] When we float an element, it moves as far over as it can, either to the right or to the left, and the elements below it move up to take up the space the floated element used to occupy.

14) [True or False] When we float an element, we essentially remove it from normal document flow.

15) [Critical Thinking] If we wish the text in a paragraph tag to wrap to the left on a floated image, what value do we set to the float property of the image?

16) Which flexbox child property places child elements one on top of each other? (vertically)

17) While the grid layout is a powerful tool, it may not be fully supported by all browsers at this time. The author mentioned a couple of tactics to use grids with browsers that don’t fully support grids at this time. Name 1.

18) According to the author, what is an advantage of using lots of comments in our CSS?

19) [Critical Thinking] What is an advantage of grouping related styles in the same place?

20) According to the author, why should we consider splitting our CSS into multiple files?

21) What does the author do to inspect an element on a page?

22) What does a code linter do?

Introduction to responsive web design - 2:40

23) [Critical Thinking] In the video the author flexes the screen to approximate what the page would look like on a mobile phone. Would this be sufficient to determine how a the page would work for a phone? If not, why not?

24) [Critical Thinking] Write the exact syntax of a media query that allows you to write styles for all screens smaller than 600 pixels.

25) What does the author mean by mobile first?

CSS frameworks and grids - 1:23

26) [Critical Thinking] When should we consider using a CSS framework instead of creating our own CSS?

27) According to the author, what is the biggest reason to use CSS pre-processors?

Answer 1

1. TRUE - because it uses border-box property

2. FALSE - You can use opacity property to increase or decrease the transparency.

3. The author choses to show the image because it caches the eye and is more attractive than the text.

4. The CSS color property is used to give Colors to text elements like headers, paragraphs, ul's ,li's.

5. True - absolute values are good when the dimensions are known and fixed because they stay the same even when the window size changes,

6. True - relative values like "em" and "rem" are very useful because they also resize dynamical as you resize the window size.

7. FALSE - pixels are absolute units.

8. True - normal document flow should be utilized

9. Float property can be used

10. True positioning is based upon body tag elements.

11. True - position is relative to view port

12. The Z-index property can be used.

13. True - it moves to the maximum extent.

14. TRUE - we remove it from the normal flow.

15. We have to define both the text and image in a div tag and give the text z-index '2'.

16. flex-direction : row;

17. using '-ms' prefix could help.

18. It helps you to better understand the code and to differentiate the different elements.

19. By grouping related style sin the same place whenever you want to change the style of an element it easier to do so if they are at the same place.

20. Each section would have css code in its own unique file. you wont be loading uneeded css on every page.

21. One can use developers tools provided by various browsers to inspect an element on the page.

22. IT is basic syntax checker which helps you to write your code better and remove inefficiency.

23. using browser resizing for testing is partially sufficient just when you want to find breakpoints. It is suggested to use emulators provided bu browsers for testing mobiles.

24. @media all and (min-width : 600px){

   }

25. Mobile first designing means creating the website for mobile version first and then making changes to the styles using media queries for tablet and desktop versions.

26. CSS frameworks must be used only when you have time constraints i.e when you have deadline then only you can use frame works like bootstrap.

27. A CSS preprocessor is a program that lets you generate css from the preprocessors own unique syntax.