HTML + CSS
Create a generic CSS class named nfl-logo that sets the background image to the url http://www.nfl.com/images/nfl-logo-large.png, the position in pixels to (-100, 0) and does not repeat it.
.nfl-logo { background-image: url("http://www.nfl.com/images/nfl-logo-large.png") background-position:-100px 0; background-repeat: no-repeat; }
What is the precedence of Style Settings? For example, if a HTML element has a different style rules for its class attribute and element, which one is used?
The more precise the style-rule is specified, the more likely is to be used. The following order is used from the highest to the lowest precedence: - An in-line style attribute. - An element.class style rule. - A .class style rule. - An element style rule. - Styles defined in a separate CSS file.
What is the purpose of adding the !DOCTYPE tag?
To make the web page look the same in all the browsers.
Explain the following CSS line: #page { margin-left: auto; margin-right: auto; width: 934px; position: relative; top: 0px; }
It creates a CSS style rule to modify the margins, size and position (top center) of a HTML element with id="page".
What does this declaration do? .isGeneric .contentWrap{margin:20px 20px 0;}
It defines two new CSS Style classes, and when both are applied, they reset the margin.
What does this declaration do? a,body{color:#f00;text-decoration:none}
It modifies the color and removes the text decoration for all the instances of the anchor and body tag.
Explain the following CSS line: a:active, a:hover { color: #4E7DC2; text-decoration: underline; }
It modifies the color and underlines the text for hyperlink elements that have the mouse over or are active.
What does "patent" mean? .patent { font-size: 82%; font-family: Tahoma; margin: 0px 17px 10px 0px; color: #AECADE; clear: both; }
It's the class name of a HTML element.
What does "superNav" mean? #superNav { position: absolute; top: 49px; right: 15px; width: 192px; z-index: 70; }
It's the id name of a HTML element.
What is the box model?
It's the term used to describe the rules surrounding the physical properties of all HTML element.
Mention the HTML elements that have no initial presentation properties.
- <DIV> is for block elements such as <p>, and it actually has only one property: a line break before and after. - <SPAN> is for in-line elements such as <b>.
What does the following selectors (pseudo classes) mean? :active :hover :link :visited :first-child
- Active: selects the active link (the moment it's clicked) - Hover: selects links with the mouse over - Link: select all unvisited links - Visited: select all visited links - First-child: selects every <p> element that is the first child of its parent For example, to set the style for active anchors, we would set a selector as: a:active { }
Explain the following examples of pseudo-elements (CSS selectors): ::first-line ::first-letter ::before ::after
- First-line: Selects the first line of every <p> element. - First-letter: Selects the first letter of every <p> element. - Before: Insert something before the content of each <p> element - After: Insert something after the content of each <p> element.
What are the properties of the box model?
- Padding - Margin - Width - Height
Mention types of selectors in CSS
- The Element selector. Selects elements based on the element name like <p> elements. p { text-align: center; color: red; } - The ID selector. It uses the id attribute of an HTML element to select a specific element. Write a hash (#) character followed by the id of the element. #para1 { text-align: center; color: red; } - The Class selector. It selects elements with a specific class attribute. .center { text-align: center; color: red; }
Write in the CSS to create a "class" named hp_my_logo that changes the CSS properties of background-position to 10 pixels, the margin-top to -75 pixels and the height to 121 pixels.
.hp_my_logo { background-position: 10px; margin-top: -75px; height: 121px; }
Give one (1) HTML example of usage of the declaration below: a img,:link img,:visited img{border:0;}
<a href="www.google.com"> <img src="google.jpg"></img> </a>
Give an HTML example usage of the declaration below: .contentWrap #contentMain .centerColumn {width:380px; float:left; margin:0;}
<div class="contentWrap"> <strong id="contentMain"> <h1 class="centerColumn"> This text is centered </h1> </strong> </div>
Give an HTML example usage of the declaration below, with 4 nested elements: .showNav ul { height:16px; padding:5px 0 0; float:left; width:620px; margin:0 20px 0 0; } .showNav ul li { display:block; float:left; padding: 1px 8px 0 8px; } .showNav ul li a:hover{color:#202022;}
<div class="showNav"> <ul> <li>Item 1</li> <li><a href="http://mypage.com">My Web Page!</a></li> <li>Item 3</li> </ul> </div>
Give an HTML example usage of the declaration below: .spw_tb li{display:inline;line-height:normal}
<div class="spw_tb"> <ul> <li> </li> </ul> </div>
Give three (3) HTML examples of usage of the declaration below: #cbsCarousel, .carouselNav, p { color:#fff; text-decoration:none; }
<div id="cbsCarousel"> </div> <ul> <li class="carouselNav"></li> <li></li> <li class="carouselNav"></li> </ul> <p></p>
Give two (2) HTML examples of usage of the declaration below: #hp_spw_hdr, .sw_tb div {display:inline}
<div id="hp_spw_hdr"> </div> <table class="sw_tb"> <div></div> <div></div> <div></div> </table>
What is a CSS Reset?
A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.
Describe the CSS syntax.
A CSS rule-set consists of a selector and a declaration block.
What are CSS vendor prefixes?
A way for browser makers to add support for new CSS features during a testing and experimentation period, features that may not be part of a formal specification. For example: Before HTML 5, to set a rounded corner on a box one would have to write: -moz-border-radius: 10px 5px -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px;
What is the CSS Box Model?
All HTML elements can be considered boxes. A CSS box is basically a box that wraps around every HTML element. Each box consists of four elements: - Content - The content of the box, where text and images appear - Padding - Clears an area around the content. The padding is transparent - Border - A border that goes around the padding and content. This one can be visible. - Margin - Clears an area outside the border. The margin is transparent
Explain the following CSS lines: html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input { font-family: Tahoma,Verdana,Segoe,sansserif; padding: 0px; margin: 0px; border: 0px transparent none; background-position: left top; background-repeat: norepeat; }
Changes fonts, border, margin and other layout settings for 15 tags (HTML elements) all at once.
How to add styles for different media/devices?
We can create as a style sheet for each media, and specify the media as an attribute. For example: <HEAD> <STYLE type=text/css media=projection> H1 {color:blue} </STYLE> <STYLE type=text/css media=print> H1{text-align:center} </STYLE>
Are the values assigned to id and class attributes case sensitive?
Yes
In CSS, are properties inherited from the parent element?
Yes.