Preview

02 - CSS

 1. Cascading Style Sheets (CSS) is a stylesheet language used to describe the ______________of a document written in HTML or XML

  database content

  modelling / spreadsheet design

  presentation / layout

  imagery

 2. Like HTML, CSS is not really a programming language. It is not a markup language either — it is a style sheet language

  False

  True

 3. CSS lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:
p {
  ___________________?
}

  css>>red;

  color: red;

  css>>colour=red:::

  red;

 4. Pasting the following line of code between the 'head' tags __________________
<link href="styles/style.css" rel="stylesheet" type="text/css">

  will cause an error - the css style sheet must always be loaded after the closing 'html' tag (right at the end)

  will cause an error - css must always be internal

  will cause the css to be applied only to the head of the document

  loads an external style sheet

 5. In this example, what element is being styled?
Example css
-----------------------

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

----------------------
Selector

The HTML element name at the start of the rule set. 

It selects the element(s) to be styled

  the whole page is being styled - as css is global

  the whole body

  the p element

  the elements are: color, width and border

 6. In the following example the property is ____ and the property value is:
h1 {
  font-size: 60px;
}

  font-size / 60px

  h1 / 60px

  font-size / h1

  h1 / font-size

 7. Read the following excerpt on CSS and the box model and fill in the blanks.
CSS layout is based principally on the box model. 

Each of the blocks taking up space on your page has properties like this:

padding, the space just around the content (e.g., around paragraph text)
border, the solid line that sits just outside the padding
__________, the space around the outside of the element

  blank spacing

  pagination

  window

  margin

 8. What would the following CSS do?
html {
  background-color: #00539F;
}

  change the background color for the outside of the page (e.g. the window border) as the selector is 'html' only

  change the background color for the headings only

  change the background color for the html tag (e.g. the top half)

  change the background color for the whole page

 9. In the following CSS, what does the width:600px property do?
body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

  this ensures that the body can only render/show images that are a maximum width of 600px

  this forces the body to always be 600 pixels wide.

  this allows a maximum of 600 characters in the body text

  This is an error - you cannot define a property 'width' for the body

 10. The following CSS simply sets a 5-pixel–wide, solid black border on all sides of the body.
border: 5px solid black; 

  TRUE

  FALSE

 11. ___________ is a key feature in CSS; it relies on the ancestor-descendant relationship to operate.
____________ is the mechanism by which properties are applied not only to a specified element, but also to its descendants

  Formatting

  Inheritance

  Polymorphism

  Cascasding

 12. Have a look at the following example demonstrating inheritance and fill in the blanks
h1 {
   color: pink;
}
Suppose there is an h1 element with an emphasizing element (em) inside:

<h1>
   This is to <em>illustrate</em> inheritance
</h1>
If no color is assigned to the em element, the emphasized word "illustrate" 

_________________________________________________________________________???


The style sheet h1 has the color pink, 
hence, the em element is likewise pink.

  will not inherit the color of the parent element as it overrides it with blank

  will cause an error, as the em tag should have been defined inside the initial CSS

  will be black, and not pink, as it is separate from the h1 definition

  inherits the color of the parent element, h1.

 13. There are three ways of inserting a style sheet. Which of the following are NOT valid ways.
Javscript kit style sheet
PHP based style sheet
External style sheet
Internal style sheet
Inline style

  All of the listed items are valid methods

  3 and 4 are both invalid

  1 and 2 are both invalid

  1 (Javascript kit style sheet)

 14. An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension

  TRUE

  FALSE

 15. Comment on the following external CSS style sheet.Which statement is most accurate
<html>

body {
    background-color - lightblue;
}

h1 {
    color - navy;
    margin-left - 20px;
}

</html>

  The style sheet has been perfectly set up and will work to create a style

  The style sheet does not need a body tag and the curly braces should be replaced with ordinary brackets

  The style sheet should not have html tags and should have colons instead of dashes

  The style sheet should start with the following (instead of the html tag) 'css.stylesheet>>BEGIN'.

 16. An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the style element, inside the head tags section of an HTML page
<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

  TRUE

  FALSE

 17. As CSS is now a standard across the web, it is not possible to use inline styles applied to single elements as shown here:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

  TRUE

  FALSE

 18. An inline style loses many of the advantages of a style sheet (by mixing content with presentation). It is advised to use this sparingly

  FALSE

  TRUE

 19. Read the following excerpt on cascasing priority. An _______ style has the highest priority, and will override external and internal styles and browser defaults
Cascading Order
What style will be used when there is more than one style specified
 for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by
 the following rules, where number one has the highest priority:

>>Inline style (inside an HTML element)
>>External and internal style sheets (in the head section)
>>Browser default

  inline

  exline

  duck typed

  font type

 20. ______________ are defined with a hash tag preceding the id name e.g. #header

  fonts

  types

  classes

  identifiers

 21. _______ work in a similar way to an identifier, but use a full stop as a prefix e.g>> .list (____ can be used multiple times on a webpage)

  classes

  types

  fonts

  identifiers

 22. Grouped styles can be applied to an HTML element such as a div element by ____________________________

  using javascript (otherwise it will not be possible)

  adding the class or id name as a parameter: div id="page"

  the use of PHP functions embedded into the CSSS

  using a hash tag before each parameter

 23. You can group selectors by separating each selector with a comma

  FALSE

  TRUE

 24. There are different type of selectors including: attribute, element, class, and ID selectors

  TRUE

  FALSE

 25. An external css file is usually named: 'css.style' and will be stored along with the images (image directory of your site)

  FALSE

  TRUE