CSS Interview advanced question and answers

How to style the first line of a paragraph with an image

If you want to stylize the first line of a paragraph and include an image use the background-imageproperty within the :first-line pseudo-element:
p:first-line {
font-size: 2em;
background-image: url(background.gif);
}

How to organize the contents of a stylesheet?

You can manage CSS by grouping the common visual elements of a web page together. The following list suggests the order of items grouped in a stylesheet:
1. Elements (h1 through h6, p, a, list, links, images)
2. Typography
3. Page layout (header, content, navigation, global navigation, subnavigation, sidebar, footer)
4. Form tags (form, fieldset, label, legend)
5. Content (post, events, news)
Here are the comments from three stylesheets, with each one organizing the CSS differently:
/* Typography & Colors
———————————— */
[css code ]
/* Structure
———————————— */
[css code ]
/* Headers
———————————— */
[css code ]
/* Images
———————————— */
[css code ]
/* Lists
———————————— */
[css code ]
/* Form Elements
———————————— */
[css code ]
/* Comments
———————————— */
[css code ]
/* Sidebar
———————————— */
[css code ]
/* Common Elements
———————————— */
[css code ]

How do I combine multiple sheets into one?

To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:
<link REL=Stylesheet HREF=”default.css” TITLE=”combined”>
</link><link REL=Stylesheet HREF=”fonts.css” TITLE=”combined”>
</link><link REL=Stylesheet HREF=”tables.css” TITLE=”combined”>
</link>

How do I have a fixed (non-scrolling) background image?

December 30, 2012   admin   No comments

With CSS, you can use the background-attachment property. The background attachment can be included in the shorthand background property, as in this example:
body {
background: white url(example.gif) fixed ;
color: black ;
}
Note that this CSS is supported by Internet Explorer, Mozilla, Firefox Opera, Safari, and other browsers. In contrast, Microsoft’s proprietary BGPROPERTIES attribute is supported only by Internet Explorer.

How to associate CSS styles with a web page

If you want to know about the different ways to add styles to a web page, you can apply styles in three ways: externally, internally, and inline. An internal stylesheet appears near the top of the HTML document, within the head:

Note
Note the use of HTML comments immediately after the style element. Those are placed there to prevent the CSS content from showing up in the web page layout or being rendered by the browser in some unwanted fashion.
External stylesheets are stored in a separate file, which gets associated with the HTML file through linking. The following code is saved in its own file:
/* CSS Document */
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Warning
Notice that the style element is not present in the external stylesheet.
In the web page, add the following line between the head tags to link to the external stylesheet that contains the preceding styles:
<link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen” />
Inline styles work similarly to font in that they appear with the markup they affect:
<h1 style=”font-family: verdana, arial, sans-serif;
font-size: 150%; color: blue;”>Page Title</h1>
<p style=”font-family: sans-serif; font-size: 90%;”>Hello, world!</p>

When to use internal stylesheets

As for internal and external stylesheets, most sites use external stylesheets. However, when writing the CSS code for a web page design, it’s best to start out with an internal stylesheet. When you reach the point where the design is complete or starts to get a little unwieldy, move the stylesheet to a separate file. Then make edits to the external stylesheet as needed.
Also, you may have a special page that’s not related to the website or that uses a special style. In this case, an internal stylesheet could be easier to use as opposed to adding more clutter to the external stylesheet.

How to add audio with HTML5

So, you’ve heard of the new audio element in HTML5 and would like to take advantage of it right away. This excerpt from Christopher Schmitt’s CSS Cookbook, Third Edition will explain its use.
________________________________________
If you want to add audio to a web page with HTML5, use the audio element to specify an audio file, as shown in Figure 1.7:
< !DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>CSS Cookbook</title>
</meta></head>
<body>
<h1>Audio Example</h1>
<span class=”strong”><strong><audio src=”html5audio.ogg” autoplay controls></audio></strong></span>
<a href=”html5test.ogg”>Download audio</a>
<span class=”strong”><strong></strong></span>
</body>
</html>