Section 1
Preview this deck
What does the following do? -HTML--HEAD--TITLE-Some quotations-/TITLE- -STYLE type="text/css"- BLOCKQUOTE.example { background : green } -/STYLE--/HEAD- -BODY-Here is a quote from "Hamlet" -BLOCKQUOTE class="example" id="example-1"> To be or not to be, that is the question -/BLOCKQUOTE- and here is a quote from G. Marx -BLOCKQUOTE class="example" id="example-2"> I would never belong to an organization that would have me as a member -/BLOCKQUOTE--/BODY--/HTML-
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (60)
Section 1
(50 cards)
What does the following do? -HTML--HEAD--TITLE-Some quotations-/TITLE- -STYLE type="text/css"- BLOCKQUOTE.example { background : green } -/STYLE--/HEAD- -BODY-Here is a quote from "Hamlet" -BLOCKQUOTE class="example" id="example-1"> To be or not to be, that is the question -/BLOCKQUOTE- and here is a quote from G. Marx -BLOCKQUOTE class="example" id="example-2"> I would never belong to an organization that would have me as a member -/BLOCKQUOTE--/BODY--/HTML-
The browser outputs the following: _______________________________________________ |Here is a quote from "Hamlet" | |------------------------------------------ | |To be or not to be, that is the question | | ------------------------------------------ | |and here is a quote from G. Marx | |------------------------------------------ | |I would never belong to an organization | |that would have me as a member | |------------------------------------------ | The text in the ---- box is green.
What are the different forms of selectors?
. #
The speech media describes that is ________.
-intended for speech synthesizers
What is cascading?
It is combining style information from multiple sources, called cascading. There is a defined order of precedence where the definitions of a style element conflict.
Colors can be set using _____________.
RGB values or predefined color names.
Values assigned to ID and CLASS are ___________
case sensitive
True or False. A class style has higher precedence than an inline one.
False. Styles defined using a "style" attribute (inline) have highest precedence.
What HTML tag do you use to include style information?
<STYLE> element, style attribute
If inline style has the highest precedence, then where does <STYLE> element and the external file lie on precedence?
The styles defined using <STYLE> element have next highest precedence. Then styles defined in a separate file, e.g. special.css, have lowest precedence.
What is the pseudo-class, visited for?
- a link the user has visited: can specify a color for visited link
What can you use to assign style properties independent of the document tree?
Pseudo elements and classes.
Style sheets can be used to specify what?
- the amount of white space between text or between lines, - the amount lines are indented, - the colors used for the text and the backgrounds - the font size and style of text - the precise position of text and graphics - How front matter (preface, figure list, title page, and so forth) should look - How all or individual sections should be laid out in terms of space (for example, two newspaper columns, one column with headings having hanging heads, and so forth)
___________ rule preceded by "_" and applied to single elements
ID #
The projection media describes that is _______.
-Intended for projected presentations
The handheld media describes that its _______.
-Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
Give an example of an inline style attribute with: font-size: 20pt background: green color: fuchsia
-BODY style="font-size: 20pt; background: green; color: fuchsia"> The nine planets of the solar system ... -/BODY-
What does the DOCTYPE directive do?
Instructs modern browsers to work in 'standards compliant mode - Your web page will look the same in all browsers - Browsers turn off their proprietary extensions - Fonts are rendered in the same way - For example, font-size: small, is rendered the same size on all browsers
The embossed media describes that its _______.
-Intended for paged braille printers.
What are the pseudo-classes?
-link, visited, hover, active
The all media describes that its ________.
-Suitable for all devices
What does the following code snippet do? P.special { color : green; border: solid red; } -HTML--HEAD- -LINK href="special.css" rel="stylesheet" type="text/css"- -/HEAD--BODY- -P class="special">This paragraph should be displayed with green text and red border. -/BODY--/HTML-
The css stylesheet is linked to the HTML document with the LINK element.The special.css sets the text color of a paragraph to green and surrounds it with a solid red border.
What are the different media types?
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv, 3d-glasses
Which HTML tag do you use to point to external sheets?
<LINK>
The screen media describes that is ________.
-Intended primarily for color computer screens.
A style for _______ has higher precedence than one for _______, which has higher precedence than a style for the ______ itself.
-tag.class -.class -tag
What does HTML extensions permit?
- flexible placement of style information - independence from any particular style sheet language
True or False. Style element can only be used in the body tags.
False. <STYLE> element is placed in the <HEAD>
The tv media describes that is ______.
-Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
What is the pseudo-class, hover for?
- a link when the user mouses over it: can specify a color for mouse over link. Selects links on mouse over.
What is the difference between a Class and ID attribute?
Both the class and ID attributes are used for optional styles but the ID can only be used ONCE in the entire document. ID attribute is normally used for major document sections- Header, Footer, TopNav, LeftNav, and Content.
What is the pseudo element, first-letter for?
-add a special style to the first letter of a text
The braille media describes that its _______.
-Intended for braille tactile feedback devices.
What does .redtext{color: #FF0000} do?
It applies to all elements that use CLASS=redtext.
What is the pseudo class, first-child for?
-Selects every <p> elements that is the first child of its parent
How does the precedence of style settings work with css?
The more precise a specification is, the higher the precedence.
What is the pseudo-class, link for?
- a normal, un-visited link: can specify a color for unvisited link
What does P.redtext {color: #FF0000} do?
The color would be applied when <P> containing the redtext name. <P CLASS="redtext">some text</P>
What is the pseudo class, lang for?
-selects every <p> element with a lang attribute
Describe the order of precedence of the following: - H1 { text-align: center} - .biggreen {text-align: center} - H1.mypars {text-align: center}
H1.mypars {text-align: center} [highest] .biggreen {text-align: center} [next] H1 { text-align: center} [lowest]
The tty media describes that is _________.
-Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
What is the pseudo-class, active for?
- a link the moment it is clicked: can specify a color for selected link
What is the pseudo element, first-line for?
-add a special style to the first line of a text
What happens if you do not specify !DOCTYPE?
if you do not specify a !DOCTYPE, browsers work in 'Quirks' mode.
__________ rule preceded by "_" and applied to multiple elements
Class .
_________ can be used as a selector of style properties.
Class
What is the pseudo class, focus for?
-selects the input element which has the focus
The 3d-glasses describes that is ______.
-Intended for 3D Glasses like Oculus VR and Google Cardboard.
What does STRONG { color: #00FF00} do compared to P STRONG { color: #00FF00}?
All the occurrences of <STRONG> as green, but P STRONG defines only <STRONG> within a <P> as green.
The Class attribute ______________.
assigns a name to one or more elements.
The print media describes that is _________.
-Intended for paged, opaque material and for documents viewed on screen in print preview mode.
Section 2
(10 cards)