Preview

02 - CSS

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

  imagery

  modelling / spreadsheet design

  database content

  presentation / layout

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

  True

  False

 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;

  red;

  color: red;

  css>>colour=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 - css must always be internal

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

  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 p element

  the whole page is being styled - as css is global

  the whole body

  the elements are: color, width and border

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

  h1 / font-size

  font-size / 60px

  h1 / 60px

  font-size / h1

 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

  pagination

  window

  margin

  blank spacing

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

  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 outside of the page (e.g. the window border) as the selector is 'html' only

  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 forces the body to always be 600 pixels wide.

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

  this allows a maximum of 600 characters in the body text

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

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

  FALSE

  TRUE

 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

  Polymorphism

  Cascasding

  Formatting

  Inheritance

 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 be black, and not pink, as it is separate from the h1 definition

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

  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

  1 (Javascript kit style sheet)

  1 and 2 are both invalid

  3 and 4 are both invalid

 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 does not need a body tag and the curly braces should be replaced with ordinary brackets

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

  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

  TRUE

  FALSE

 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

  exline

  font type

  inline

  duck typed

 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)

  types

  identifiers

  classes

  fonts

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

  the use of PHP functions embedded into the CSSS

  using a hash tag before each parameter

  using javascript (otherwise it will not be possible)

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

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

  TRUE

  FALSE

 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)

  TRUE

  FALSE