Mr Branding

Wednesday, June 3, 2015

Product Tour with jQuery & CSS3

A responsive tour snippet, with a step-by-step guide to help users understand how to use your website.

The post Product Tour with jQuery & CSS3 appeared first on jQuery Rain.

by Admin via jQuery Rain

Is-Near : Calculates Mouse Position to a Given Element

Calculates if the mouse position is near to a given element.

The post Is-Near : Calculates Mouse Position to a Given Element appeared first on jQuery Rain.

by Admin via jQuery Rain

smartscroll – jQuery Plugin for Scrolljacking & Auto-Hashing

smartscroll is a tiny jQuery plugin that has these independent features:
Section scrolling (Scrolljacking), Auto-hash (Updates the URL hash based on current position on page) and Responsive.

by via jQuery-Plugins.net RSS Feed

Aload.js : Loads Images to Scripts Asynchronously

Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 260 bytes).

The post Aload.js : Loads Images to Scripts Asynchronously appeared first on jQuery Rain.

by Admin via jQuery Rain

15 CSS Questions to Test Your Knowledge

How well do you know CSS? Test your knowledge by trying to answer the CSS questions in this post.

The questions are divided into three categories:

Basic CSS questions
Intermediate CSS questions
Advanced CSS questions

This set of CSS questions is a follow-up to our previous collection of HTML questions. (Check that out too.)

There’s no time-limit or score-tracking. After you complete these fifteen challenging questions, feel free to talk about your results in the comments.

Basic CSS Questions

Question 1

Which of the following is NOT a valid border-style property value?

dotted
inset
glazed
groove
solid

See the answer

Answer

glazed

Visual guide of border-style property values - w3.org Source: w3.org

You can see all the border-style property values by reading the "4.2. Line Patterns: the ‘border-style’ properties" section in W3C CSS Backgrounds and Borders Module Level 3 specs.

Question 2

Which of the following is NOT a valid CSS length unit?

cm
dm
em
mm

See the answer

Answer

dm

cm and mm are absolute length units. em is a font-relative length.

Question 3

What is the CSS selector which allows you to target every element in a web page?

See the answer

Answer

The universal selector (*).

An example: The following style rule uses the universal selector to set the margin and padding of all HTML elements to zero:

* {
  margin: 0;
  padding: 0;
}

Related: Should You Reset Your CSS?

Question 4

Which CSS property allows you to hide an element but still maintain the space it occupies in the web page?

See the answer

Answer

visibility

There are several ways to hide an HTML element with CSS. Setting the visibility property of the element to hidden will hide the element. The element will still occupy space equal to its geometric size in the web page. For example, if the hidden element’s dimensions are 100x100px, you will see an empty 100x100px space in the area where the element is located.

See MDN’s documentation of the CSS visibility property to learn more about this property.

One other way of hiding an element is by setting its display property to none. Doing this renders the element as though it doesn’t exist.

Question 5

There are 16 basic color keywords in CSS. Which of the following are NOT basic color keywords?

olive
fuchsia
cyan
aqua
maroon

See the answer

Answer

cyan

cyan is a valid color keyword. But it’s not one of the basic color keywords.

The cyan color keyword is documented as being part of the extended color keywords.

Related: Introduction to CSS Colors

Question 6

The font-style CSS property has four different valid values. Three of these values are inherit, normal, and italic. What is one other valid value?

See the answer

Answer

oblique

Read the font-style docs on MDN to learn more about this CSS property.

Related: CSS Typography: The Basics

Question 7

Which of the following two selectors has a higher CSS specificity?

Selector 1:

#object h2::first-letter

Selector 2:

body .item div h2::first-letter:hover

See the answer

Answer

Selector 1:

#object h2:first-letter

The specificity value of Selector 1 is 102. The specificity value of Selector 2 is 24.

Related: How CSS Specificity Works

Intermediate CSS Questions

Question 8

What is the ideal order of the following pseudo-class selectors in a stylesheet?

:active
:hover
:link
:visited

See the answer

Answer

:link
:visited
:hover
:active

An element can match multiple pseudo-class selectors at the same exact time. That is the reason why the order of the pseudo-classes above is crucial.

We know that if two selectors are equal in specificity, by default, the selector farther down the stylesheet wins.

One situation where you can clearly see this issue is via a hyperlink element. Suppose that you hover your mouse pointer on the link, and then click on the link without moving your mouse afterwards. This situation means the link matches both :hover and :active selectors.

So if the :active style rule is above the :hover style rule — for instance — users will never get to see the :active style rule applied. This is because the :hover style rule will always overwrite it.

You can remember the ideal order by memorizing the acronym, LVHA. Link → Visited → Hover → Active

Related: To learn more about this subject, read CSS Link Pseudo-classes. Also, find out why the :visited pseudo-class is weird.

Question 9

Which of the following CSS properties DOES NOT influence the box model?

content
padding
margin
outline
border

See the answer

Answer

outline

Here’s a portion of the outline property’s specifications:

The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

18.4 Dynamic outlines: the ‘outline’ property

Question 10

When using media queries, which of the following is NOT a valid media type?

tv
all
voice
print
braille
tty
embossed

See the answer

Answer

voice

You can find all the valid media types in the Media Queries W3C specs. voice is not a valid media type. Though there is a speech media type.

Question 11

There are five generic font family values that can be assigned to the font-family property. Three of them are listed below. What are the other two generic font family values?

serif
sans-serif
monospace
?
?

See the answer

Answer

cursive
fantasy

Learn about the generic font families in greater detail by reading "3.1.1 Generic font families" in CSS Fonts Module Level 3.

Question 12

What is the color keyword that will always be equal to the calculated color property value of the selected element/elements?

See the answer

Answer

currentColor

Below is an example where the background-color and the border color will be equal to the color property value of .box elements:

.box {
  color: green;
  background-color: currentColor;
  border: 1px dashed currentColor;
}

The benefit of using the currentColor keyword is that we only need to change the color value in one place. We can just change the value of the color property, and the change will cascade to the other properties. This keyword works much the same way as CSS variables.

Read “4.4. currentColor color keyword” in the CSS Color Module Level 3 to learn more about this color keyword.

Slightly related: Introduction to CSS Variables

Advanced CSS Questions

Question 13

Which of the following is NOT a valid CSS unit?

ch
turn
px
ems
dpcm
s
hz
rem

See the answer

Answer

ems

ch and rem are font-relative length units.
turn is an angle unit.
px is an absolute length unit.
dpcm is a resolution unit.
s is a time unit.
hz is a frequency unit.

Question 14

Which of the following color keywords has NOT yet been proposed in a W3C specification?

blanchedalmond
dodgerblue
peachpuff
orchidblack
navajowhite
tomato

See the answer

Answer

orchidblack

See section "5. Named Colors" of the CSS Color Module Level 4 Editor’s Draft to find all the current proposed color keywords.

Question 15

What is the CSS at-rule that can allow you to define the character encoding of a stylesheet?

See the answer

Answer

@charset

UTF-8 should always be used as your CSS file’s character encoding. If this is the case, then you don’t need to declare a @charset rule.

See this guide to learn more: Declaring character encodings in CSS.

How many questions did you answer correctly? Which questions gave you a tough time? Share your thoughts in the comments.

Wednesday, June 3, 2015

Basic CSS Questions

Question 1

Answer

Question 2

Answer

Question 3

Answer

Question 4

Answer

Question 5

Answer

Question 6

Answer

Question 7

Answer

Intermediate CSS Questions

Question 8

Answer

Question 9

Answer

Question 10

Answer

Question 11

Answer

Question 12

Answer

Advanced CSS Questions

Question 13

Answer

Question 14

Answer

Question 15

Answer

Related Content