VCD208

What is meant by the term "cascade"?

Cascade is a system of hierarchy that determines which CSS rule will be followed when several sources of style info is assigned to the same elements

What happens if no style sheet is applied to a web page?

If you don't apply any style information to a web page, it will be rendered according to the browser's internal style sheet

How do numeric values of the optional blur radius measurement work?

0 is no blur, and the blur gets softer with higher values

*For the following eight sources for styling list them such that any higher source on the list overrides all those source items listed below it.

-any style rule marked !important by the reader (user) -any style rule marked !important by the author -inline style information (added with the style attribute in an opening tag) -embedded style sheets (added with the style element) -imported style sheets (added with the @import function) -linked external style sheet (added with the link element) -user style settings (set in a browser as a "reader style sheet" -browser default settings

Describe two solutions or containment techniques to resolve the problem when the container box closes up.

-float the containing element as well and give it a width of 100% -take advantage of the behavior of the overflow property. Setting the overflow of the containing element to auto or hidden will also make the containing element stretch to contain the floated elements

*Draw and label these parts of an element box: content area, padding, border, and margin.

-outer edge -margin -border -padding area -inner edge -content area

*What are the benefits of using CSS?

-precise type and layout control formats text; controls spacing and type -less work: one CSS can style an entire site -more accessible sites CSS handles presentation, so content can be marked up meaningfully and more accessible for non-visual and mobile devices -reliable support: all browsers support CSS2 and many parts of CSS3

Define style sheet, rule, selector and an element type selector, declaration, property, value, and declaration block.

-style sheet: made up of one or more style instructions, called rules -selector: selects element to be affected -element selector: selects just an element -declaration: declares a style for the selected element; has two parts: a property followed by a colon and a space, and then a value; each must end in semi-colon followed by a space -property: identifies what to change -value: tells how to change it -declaration block: curly brackets and declarations are within them

*Write this comment "Don't forget to do layout style sheets" for insertion in a CSS and so that the comment does not display in the browser window.

/* Don't forget to do layout style sheets */

*List 3 key behaviors of all floated elements.

1) a floated element is like an island in a stream of water. Text characters have to reflow to make room for the floated element 2) margins on floated elements are maintained and d o not collapse 3) floats stay in the content area of the containing element

*Describe 3 more subtle concepts at work with floated text and inline elements.

1) always provide a width for floated text elements 2) floated inline elements behave like block elements when they follow the display rules for block elements 3) margins on floated elements do not collapse

*Explain the three ways that style sheets can be applied to an HTML document. Which method is preferred?

1) external style sheets are separate text-only document ending in .css; most powerful and preferred method 2) embedded style sheets are placed in style element inside the head tags to apply to HTML document; applies only to that document 3) inline style sheets applies CSS properties and values only to a single element, using style attribute within the element itself; used to override a style defined in an external or embedded style sheet

What are three important syntax requirements for the use of font names?

1) font names, with the exception of generic font families, must be capitalized; ex: Arial 2) use commas to separate multiple font names 3) font names that contain a character space must appear within quotation marks

What are three ways to provide CSS styles to an HTML document? Write an example for each method. Which is the best supported method?

1) inline styles: use a style attribute to apply various style rules to a single HTML element Example: styles applied to h1 element <h1 style="font-size: 300%; color: red">Local news</h1> 2)embed the style sheets in the head section of the HTML document, using the style element Example: <style>/*all the CSS style rules are placed here*/ </style> 3) external style sheet: preferred way for attaching style sheets. An external style sheet is a separate text-only document that contains CSS rules. It must be named with the .css suffix. It may not include any HTML tags. The external style sheet is linked to or imported into the HTML document Example: <link rel="stylesheet" href="mybook.css">

Describe briefly the five generic font families.

1) serif: slab-like appendages on some letters 2) sans-serif: straight letter strokes that o not end in serifs 3) monospace: all letters have the same width 4) cursive: imitates script or handwriting 5) fantasy: purely decorative; rarely used

Explain the two methods of applying the width and height properties?

1) sizing the content box (default method). The default method applies the width and height properties to the content box. That is the way all current browsers interpret dimensions you specify for width and height plus the amount of padding and borders that have been added to the element 2) Border-box method. The other method is to specify the size of an element is to apply width and height dimensions to the entire visible box, including the content area, padding, and border. Because this is not the default browser behavior, you'll need to explicitly set box-sizing: border-box in the style sheet

List the 5 steps for creating a horizontal nav bar from a list of links.

1) turn off the bullets, and set padding and margins to 0 2) each list item is floated to the left so they line up, taking advantage of the multiple float behavior described earlier 3) using the display property, make the anchor elements in the list items display as block elements so you can next set the dimensions, padding, margins, and other visual styles 4) clear the element that comes after the nav menu in the document so it starts below the nav menu 5) add some padding and/or margins to the anchor elements to give the links a little breathing room, but you can add any of the styles-colors, borders, rounded corners, background images- to give the nav the look you want

Give3 tips for working with tiling background images.

1) use as simple image that won't interfere with the legibility of the text over it 2) always provide a background-color value that matches the primary color of the background image. If the background image fails to display, at least the overall design of the page will be similar. This is particularly important is the text color would be illegible against the browser's default white background. 3) as usual for the web, keep the file size of background images as small as possible

*Explain the four values/methods of the position property.

1)static- the element is placed in the normal document flow, the default 2) relative- the element is positioned relative to its original position in the normal flow. The distinctive behavior of relative is that the space the element would have occupied in the normal flow is preserved as an empty space. 3) absolute- an absolutely positioned element is removed from the document flow and is positioned with respect to the closest containing block element. Unlike a relatively positioned element, the space it would have occupied is closed up 4) fixed- are removed from the document flow and positioned relative to the browser window rather than to another element in the document. The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even if the document scrolls

What is the border? Identify the eight visible border styles.

A border is simply a line drawn around the content area and its padding. Same thing as the padding with top, right, bottom, and left. You can apply border styles such as dotted, dashed, solid, double, groove, ridge, inset, and outset

Describe the descendant selector. What do character spaces between element names mean?

A descendant contextual selector targets elements that are contained within another element. Descendant selectors are indicated in a list separated by a character space.A character space between element names means that the second element must be contained within the first

What is a gradient? What are the two types of gradients and what does each type do?

A gradient is a transition from one color to another, sometimes through multiple colors. Browsers generate these color blends. Use them as you would use a background image. Two types include: -Linear gradients: change colors along a line, from one edge of the element to the other -radial gradients: start at a point and spread outward in a circular or elliptical shape

*What is a hexadecimal RGB color value?

A hex number is one of the RGB formats, but it is not part of the decimal numbering system. A numeric hexadecimal value is another way that describes an RGB color. You use the 6-digit hexadecimal number, called hex, that we saw circled in the color picker. Instead of the decimal system, base 10, it uses a base 16 system

*What is a margin? What is the purpose of a margin?

A margin is an optional amount of space that you can add on the outside of the border. The purpose of margins is to keep elements from bumping into one another or the edge of the browser window

*What is a pseudo-class selector and why is it used?

A pseudo class selector is a CS selector used to describe the state of an element; it is something the browser keeps track of, so it's sort of like a class- but a fake or imitation or pseudo class. In CSS, you can apply styles to elements in various states, using a pseudo class selector

Explain the new relative measurement rem (root em) and the advantage of using it.

A rem is a unit of measurement that bases the font size on the size of the root element. This gets rid of the compounding problem that makes nested ems complex to measure

*What happens as a result of adding a margin to the body element?

Adding a margin to the body element adds space between the page content and the edges of the browser window

*How do you round off the corners of an element?

All current browser versions can put rounded corners on elements using the CSS border-radius property alone

*What is floating and what does floating do?

Floating is the CSS method for breaking an element out of the normal flow. Floating an element moves it as far as possible to the left or right, and allows the text/content that follows to wrap around it.

Explain descendants, child, parent, and siblings.

An element that is directly contained within another element is said to be the child of that element. The containing element is the parent. All the elements higher than a particular element in the hierarchy are its ancestors. Two elements with the same parent are siblings

Define the em unit of measurement. If the body is set at 100%, and the current font size if the default 16 pixels, then what would be the size in pixels of an h1 set to 2.5ems?

An em is a unit of measurement equal to the current font size. 16+16+8=40ems

How are style sheets typically written with respect to white space?

Because CSS ignores white space and line returns within the declaration block, authors typically write each declaration in the block on its own line during development. Many developers then minify the document, that is remove all the white space, for deployment

*Describe the behavior of block and inline elements in the normal flow.

Block elements stack up on top of one another and fill the available width of the browser window or other containing element. Inline elements and text characters line up next to each other to fill the block elements. When a browser window or containing element is resized, the block elements expand or contract to accommodate the new width, and the inline content reflows to fit the new width of the block element.

Why should you provide a font-stack that includes several back-up fonts?

Browsers are limited to displaying fonts they have access to. If the browser can't find a specific font, then the browser uses its default font instead. CSS allows us to provide a list of back-up fonts should our first choice be unavailable

What are cascading style sheets? Is CSS part of the HTML markup language?

CSS is the W3C standard for defining the presentation of documents written in HTML. CSS is a separate language with its own syntax; it allows you to separate the structure of a page from the presentation

*What does a class selector target? What symbol indicates that the following word is a class selector? How do you apply a property to all elements of the same class?

Class selectors target elements that belong to the same class. Class selectors are preceded by a period

*Which text styling properties can be inherited?

Font-related properties are inherited only by text elements. Font-related properties include the styling of text, such as font-size, color, font-family

What is the one significant difference between fixed positioning and absolute positioning?

Fixed positioning works just like absolute positioning. The difference is that the offset values for fixed elements are always relative to the browser window, which means the positioned element stays put even when the rest of the page scrolls

*What do ID selectors allow? Give an example. Which symbol identifies an id selector?

ID selectors allow you to target elements by their id values. The symbol that identifies ID selectors is the octothorpe (#), also known as a hash or number or pound sign. Here is an HTML example of a list item with an id reference. A style rule for this list item using an ID selector

If there is no containing block present, that is, the positioned element is not contained within another positioned element, then what is used as the containing block?

If the to-be-positioned element is not contained within another positioned element because there is none present, then it will be placed relative to the browser window, which is the initial containing block created by the html

*What exactly is a "float drop"?

If the total width of all the columns exceeds the available width of the browser or other containing element, you'll get what is known as "float drop". That is, the final floated column will run out of room and get bumped down below the column next to it

If there are conflicts within style rules of identical weight, then what rule is applied?

If there are conflicts within style rules of identical weight, whichever one comes last in the list "wins"

Since absolutely positioned elements are not always placed relative to the browser window, what actually does happen?

If there is a containing block, or you create a containing block, then instead of being placed relative to the browser window, this rule holds: If the element to be absolutely positioned has an ancestor and at the same time the ancestor has its position is either set to relative, absolute, or fixed- not static, then the containing block for the absolutely positioned element is the nearest positioned ancestor element

*Why should a width property always be specified for floated block elements?

If you do not provide a width value, the width of the floated block will be set to auto, which fills the available width of the browser window or other containing element. There's not much sense in having a full-width floated box, because the idea is to wrap text next to the float, not start below it.

If you do not specify border width, what is the default width that is used? If no color is specified for the border, what color is used?

If you do not specify a width, the default medium width is used. If there is no color specified, the border used the foreground color of the element, same color as text

Differentiate between default rendering, user agent style sheet, and user style sheet

If you don't apply any style information to a web page, it will be rendered according to the browser's internal style sheet, which is called the default rendering; the W3C calls it the user agent style sheet. If the author of the web page has attached a style sheet, that is called the author style sheet

What are five possible values for the text-decoration property? What does the none value do?

If you want to put a line under, over, or through text, or if you'd like to turn the underline off under links, then text-decoration is the property to use. Underline, overline, line-through, blink makes text flash on and off, none

*What is RGB color?

In the RGB system, a color is described by a series of three 3-digit numbers for the red, green, and blue values

By default, in what order do elements stack up or overlap? How can you change the stacking order?

Order in which they appear in the document, but you can change the stacking order with the z-index property

Why does overlapping happen in relative positioning or any positioning?

Overlapping happens when an element becomes a positioned element. In the normal flow, elements don't overlap; they collapse and make room for each other

*To which element do you apply the clear property? What do the left, right, and both values of the clear property do to with respect to this targeted element?

It's applied to the element you want to start below the floated element, not the floated element itself. The left value starts the element below any elements that have been floated to the left. Similarly, the right value makes the element clear all floats on the right edge of the containing block. If there are multiple floated elements, and you want to be sure an element starts below all of them, use the both value to clear on both sides

List three ways to make the line height 2.5 times the height of the current font size in a paragraph

Line height values can be: a) a number b) a length measurement c) a percentage

Once you have established the positioning method, then how do you specify the actual position where the element is to be positioned?

Next you code one or more of the offset properties: top, right, bottom, left to specify the exact new position. Those values are length measurement/ percentage/ auto

What is opacity?

Opacity is the extent that something allows light through it. Opacity can make an element see-through, or slightly see-through, or not at all see-through

*What is padding? How do you add padding to the individual sides of an element box? How do you add padding to all the sides at once?

Padding is the space between the content area and the border ( or the place the border would be if one isn't specified). You can add padding to the individual sides of any element (block-level or inline). The padding-top, right, bottom, and left properties specify an amount of padding for each side of an element. As an alternative to setting padding one side at a time, you can use the shorthand padding property to add padding all around the element. You can specify 4, 3, 2, or 1 value for a single padding property

What does positioning do?

Positioning is a way to specify the location of an element anywhere on a page. The position property determines the type of positioning that will be used

*What does the position property indicate?

Positioning is a way to specify the location of an element anywhere on a page. The position property indicates the type of positioning that will be used

What is meant by the term presentation?

Presentation refers to the way a document is displayed or delivered to the user

*Which text styling properties are not passed on?

Properties like borders, margins, and backgrounds are not inherited

*How is a pseudo class selector indicated and where is it placed?

Pseudo class selectors are indicated by a colon, they typically go right after an element's name

Explain the letter a in RGBa.

RGBa color allows you to specify a color and also make it as transparent or as opaque as you like. The a in RGBa stands for alpha, which is an additional channel that controls the level of transparency on a scale from 0(fully transparent) to 1(fully opaque)

To what kind of elements do the width and height properties apply?

Regardless of the method you choose, you can only specify the width and height for block-level elements and non-text inline elements such as images. The width and height properties do not apply to inline text elements and will be ignored by the browser. In other words, you cannot specify the width and height of an anchor element or a strong element

Explain what is meant by relative and absolute units of measurement. Of these two types of units, which one should be avoided and why?

Relative units are based on the size of something else, such as the default text size or the size of the parent element. Absolute units have a predefined exact meaning exact meaning or a real world equivalent. Absolute units should be avoided for a web page because they are not relevant or practical for computer screens

*What does the term specificity refer to? List the four selector types from the most specific (has the most weight and overrides the other selectors) to the least specific.

Specificity refers to the fact that more specific selectors have more weight or importance when it comes to handling style rule conflicts; four types of selectors, listed from the most specific to the least specific, are: -inline styles weight 1000 -ID selectors are more specific than weight 100 -Class selectors, which are more specific than weigh 10 -individual element selectors weigh 1

Describe the child selector. Which symbol indicates a child selector?

Targets only the direct children of a given element. Symbol is >

In what ways is the box-shadow property like the text-shadow property? What more can the box-shadow property do that the text-shadow property does not do?

Text shadow property adds a drop shadow to text. The box-shadow property applies a drop shadow around the entire visible element box. Like the text shadow property, with the box-shadow property you also specify the horizontal and vertical offset distances, the amount the shadow should blue, and a color

What does the background image property do?

The background image property adds a background image to any element. The value of background-image is a sort of URL holder that contains the location of the image

*Explain the background-position property.

The background-position property specifies the position of the origin image in the background. The origin image is the first image, placed in the background, from which tiling images extend. The default origin position is left, top

What are the benefits and disadvantages of using relative keywords for font-size?

The benefit of keywords is that current browsers won't let text sized in keywords render smaller than 9 pixels, so they protect against illegible type. The disadvantage is that keywords are imprecise and unpredictable. For example, while most browsers scale each level up by 120%, some browsers use a scaling factor of 150%

What is the easiest way to pick a color and find all its RGB color values?

The best way to find the RGB color values for a color is to use a color picker, such as Photoshop or colorpicker.com, selected the color, copy down the RGB values, and put those values in a style rule

Sometimes it happens that the nearest containing block is the root or html element, meaning the whole document. What is the containing block of the root or html element also called?

The browser window is the containing box for the root ot html element

*What can you say about what results when each of the three RGB colors gets closer to 225 or 100%?

The closer each of the three colors gets to 225 or 100%, the closer the resulting color gets to white

What does a background color fill?

The content area and any padding around the content and it extends behind the border, up to the border's outer edge

When is the font-style property used? Which two values will you use the most?

The font style property affects the posture of the text that is, whether the letter shapes are vertical (normal) or slanted (italic and oblique)

For what purpose is the font-family property used?

The font-family is used to specify a font or list of fonts by name

When is the font-weight property used? Which two values will you use in most cases?

The font-weight property applied to boldness. The only font-weight values you will use are bold and normal

What does the foreground of an element consist of?

The foreground consists of its text and border

In displayed text, which property inserts space between letters? Which inserts space between words?

The letter-spacing property inserts space between letters; the word-spacing property inserts space between words

What does the line-height property define? What does the term baseline mean?

The line-height defines for text minimum distance from baseline to baseline. A baseline is the imaginary line upon which the bottoms of characters sit.

Which CSS property allows you to use your own image as a bullet?

The list-style-image property

Which CSS property is used to choose the position of list markers by pulling the list marker/bullet/number inside the content area of the list content?

The list-style-position property

Which CSS property is used to choose the type of list markers or to turn off the list markers all together?

The list-style-type property. Using this property with its value set to none removes the bullets or numbers from a list

Once you have positioned an element, what does it become?

The new containing block for all the elements it contains

Why is style the most important border property?

The style is the most important of the border properties because according to CSS specification if there is no border style specified, the border does not exist. In other words, you must always declare the style of the border, or the other border properties will be ignored

Explain the text-shadow property. Which values are included in a minimal text shadow declaration?

The text shadow property adds a drop shadow to text. Text shadows are drawn behind the text but in front of the background and border if there is one. The required values for the text-shadow property is three items: a horizontal offset, a vertical offset, plus a color. The blur radius is optional

What does the text-indent property do?

The text-indent property indents just the first line of a block of text, by an indicated amount. You can specify a length measurement or a percentage value for the text-indent. Percentage values are calculated based on the width of the parent element

Which two attributes must be included when you use the link element in the heads of the document? Explain what each of these attributes do.

The two attributes for a link element that links to an external file are the rel attribute, with a value of style sheet, and the href attribute that provides the location of a file

How must one write the number and the unit of measurement that follows it?

The unit abbreviation follows the number with no character space in between.

Explain the values of opacity.

The value for opacity is a number between 0(completely transparent) and 1(completely opaque). A value of .5 gives the element an opacity of 50%

Explain how the z-index property functions.

The value of the z-index property is any number. The higher the number, the higher the element will appear in the stack. Lower numbers and negative values move the element lower in the stack

What does the default auto value of the width and height properties do?

The width and height of a block element are calculated automatically by the browser by default, which is the auto value

What happens to the container box when all of its contents are floated?

There will be no elements remaining in the flow to hold the containing element open

How are the floats designed by default?

To hang out of the element they are contained in

*How do you limit the default behavior of a background property?

To limit the default behavior of a background image, use the background-repeat property, whose values are: repeat-x, repeat-y, and no-repeat

Explain what you can do if you want a rule not to be overridden by a subsequent conflicting rule.

To prevent a specific rule from being overridden, you can assign it "importance" with the !important indicator

*what happens when a series of sequential paragraph elements are floated to the same side and there isn't enough room for all of them?

To the first few floats start stacking up from the left edge, but when there isn't enough room for the fourth, it moves down and to the left until it bumps into something- or at least bumps into the edge of the browser window

*Be able to calculate the total width of a content-box model and a border-box model of an element.

Total width of a content-box model = the number specified for width because that number applies only to the content Total width of a border-box (the visible box) = the width of the left border+the left padding+the content area+the right padding+the right border

How can you keep text from bumping up against a floated element?

Use the margin property in a style sheet to add some pixels of space on all sides of the floated element and the text will no longer be bumping against the floated element

*What are the values of the background-repeat property?

Values are: repeat-x, repeat-y, and no-repeat

What is the technical name for a browser window?

Viewport

What are four possible values for the text-transform property? What do these values mean?

When you apply the text-transform property to a text element, it changes its capitalization when it renders without changing the way it's typed in the source. The values are as follows: none, capitalize, lowercase, uppercase

*When is the font-variant property used? Which two values are used the most?

When you want to use letters that are small uppercase letters. Normal and small caps are used the most. Normal turns off the property

What are the four possible values for the text-align property?

With the text-align property, you can align text for web pages just as you would in a word processing program. The text-align property can have these values: left, right, center, and justify

Are foreground colors inherited? Can you apply a foreground color to any and all HTML elements?

Yes, can be inherited by any child elements, such as the p and em elements

*How do you turn off the text wrapping feature?

You do this by clearing the element that you want to start below the float

*Explain to what these two pseudo-element selectors apply.

a) :first-line- this selector applies a style rule to the first line of the specified element b) :first-letter- this applies a style rule to the first letter of the specified element

*Explain to what these five pseudo- class selectors apply.

a) :link- applies a style to unclicked links b) :visited- applies a style to links that have already been clicked c) :focus- applies when the element is seected and ready for input d) :hover- applies when the mouse pointer is over the element e) :active- applies when the element is in the process of being clicked or tapped

List four ways you can specify the value of font-sizes. Give an example of each way. Which ways are the preferred values to use?

a) at a specific size b) as a percentage value sized relative to the element's default size c) using one of the keywords: xx-small, x-small, small, medium, large, x-large, etc. d) using a relative keyword: (larger or smaller) compared to the surrounding text

*Explain the function and results of:

a) collapsing margins: the most significant margin behavior to be aware of is that the top and bottom margins of neighboring elements collapse. This means that instead of accumulating, adjacent margins overlap, and only the largest value will be used. The only time top and bottom margins don't collapse is for floated or absolutely positioned elements b) margins on the left and right sides: never collapse, so they're nice and predictable c) margins on inline elements: you can apply top and bottom margins to inline text elements but it won't add space above and below the element and the height of the line will not change. However, when you apply left and right margins to inline elements, margin space will be held clear before and after the text in the flow of the element, even if that element breaks over several lines. Margins on images do render on all sides and therefore do affect the height of the line

*Explain the rule used when you have a varying number of values in a shorthand property.

a) if you list four values- when you supply four padding values, they are applied to each side in clockwise order, starting at the top, right, bottom, left edge b) if you list three values- if the left and right padding are the same, you can shorten it by supplying only three values: top, right/left, bottom c) if you list two values- is you provide two values, the first one is used for the top and bottom edges, and the second one is for the left and right edges d) If you list only one value- it will be applied to all four sides of the element

*What are some good strategies for putting together a font stack?

a) start with your first choice of fonts b) provide some similar alternative fonts c) lastly, end with a generic font family that gets users in the right stylistic ballpark A good font stack should include stylistically related fonts that are known to be installed on most computers. Sticking with fonts that come with the Windows, Mac OS, Linux operating systems as well as fonts that get installed with popular software packages such as Microsoft Office and Adobe Creative Suite gives you a solid list of "web-safe" fonts to choose from

*What happens when these values are applied to the overflow property?

a) visible- the default value is visible, which allows the content to hangout over the element box so that it can all be seen b) hidden- when overflow is set to hidden, the content that does not fit gets clipped off and does not appear beyond the edges of the element's content area c) scroll- when scroll is specified, scrollbars are added to the element box to let users scroll through the content. When you set the value to scroll, the scrollbars will always be there, even if the content fits in the specified height just fine d) auto (when the text is short)- the auto value allows the browser to decide how to handle overflow e) auto (when the text is long)- the auto value also allows the browser to decide how to handle the overflow when the text is long. In cases of long text, scrollbars are automatically added when the content doesn't fit and the scroll bars are needed

When specifying font-size with absolute keywords what is the default keyword size?

medium