CSS Interview Concepts

CSS:

CSS stands for Cascading Style Sheets

A CSS rule set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

###############################################################

Selectors:

The id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.

The style rule below will be applied to the HTML element with id=”para1″:

Example

#para1 {
text-align: center;
color: red;
}

The class selector finds elements with the specific class.

The class selector uses the HTML class attribute.

To find elements with a specific class, write a period character, followed by the name of the class:

In the example below, all HTML elements with class=”center” will be center-aligned:

Example

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class=”center” will be center-aligned:

Example

p.center {
text-align: center;
color: red;
}
or p #id{ }

Grouping Selectors

h1, h2, p {
text-align: center;
color: red;
}

###################################################################

background-color: #6495ed;

background-image: url(“paper.gif”);

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

background-image: url(“gradient_bg.png”);
background-repeat: repeat-x; or repeat-y

Showing the image only once is specified by the background-repeat property:

background-image: url(“img_tree.png”);
background-repeat: no-repeat;

Background – Shorthand property

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

All CSS Background Properties

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

##########################################################################

CSS Text

h1 {
color: #00ff00;

text-align: center;right;justify;

text-decoration: none;overline;line-through;underline

text-transform: uppercase;lowercase;capitalize

text-indent: 50px;
}

Imp text properties:

direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height

#####################################

CSS Font

p {
font-family: “Times New Roman”, Times, serif;
}

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal – The text is shown normally
  • italic – The text is shown in italics
  • oblique – The text is “leaning” (oblique is very similar to italic, but less supported)

The font-size property sets the size of the text.

font-size: 40px; or  font-size: 2.5em; /* 40px/16=2.5em */

All CSS Font Properties

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

########################################

CSS Links

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
}/* visited link */
a:visited {
color: #00FF00;
}/* mouse over link */
a:hover {
color: #FF00FF;
}/* selected link */
a:active {
color: #0000FF;
}

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
  • #############

#############################################################################

In HTML, there are two types of lists:

  • unordered lists – the list items are marked with bullets
  • ordered lists – the list items are marked with numbers or letters

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

ul {
list-style-image: url(‘sqpurple.gif’);
}

All CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker

###############################################################

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:
CSS box-model

Explanation of the different parts:

  • 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
  • Margin – Clears an area outside the border. The margin is transparent

Example

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

CSS Border

w3schools

border-style: solid;
border-width: 5px;

border-color: red;

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

#################################################################################

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

The margin property can have from one to four values.

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px
  • margin: 25px;
    • all four margins are 25px

CSS Padding

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The padding property can have from one to four values.

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding: 25px;
    • all four paddings are 25px

CSS Display and Visibility

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Hiding an Element – display:none or visibility:hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

###################################################################

CSS Positioning

overflow Specifies what happens if content overflows an element’s box auto
hidden
scroll
visible
inherit
position Specifies the type of positioning for an element absolute
fixed
relative
static
inherit
z-index Sets the stack order of an element number
auto
inherit

 

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:

Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example

h2.pos_left {
position: relative;
left: 20px;
}

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Here is a visual:

The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:

Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

####################################################################################

CSS Float

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

img {
float: right;
}

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

Example

.text_line {
clear: both;
}
#########################################################################################

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector

Descendant Selector

The descendant selector matches all element that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

div p {
background-color: yellow;
}

Child Selector

The child selector selects all elements that are the immediate children of a specified element.

The following example selects all <p> elements that are immediate children of a <div> element:

Example

div > p {
background-color: yellow;
}

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

The following example selects all <p> elements that are placed immediately after <div> elements:

Example

div + p {
background-color: yellow;
}

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

Example

div ~ p {
background-color: yellow;
}

CSS3 Tutorial

CSS3 IntroductionCSS3 BordersCSS3 BackgroundsCSS3 GradientsCSS3 Text EffectsCSS3 FontsCSS3 2D TransformsCSS3 3D TransformsCSS3 TransitionsCSS3 AnimationsCSS3 Multiple ColumnsCSS3 User Interface

 

CSS3 Borders: Border radius,box shadow,border image

CSS3 Backgrounds: background-size,background-repeat,background-origin

CSS3 Gradients: Linear,radial and elliptical gradients for webkit(chrome and safari),o(opera),moz(mozilla)

CSS3 Text: text-shadow: 5px 5px 5px #FF0000;

CSS3 2D Transforms: scale(),skew(),rotate,translate,matrix

CSS3 3D Transforms: rotateX(), rotateY(),rotateZ()..similarly scaleX…skewX()…

######################################################################################

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3

#######################################################################################

CSS3 Animations

With CSS3, we can create animations which can replace Flash animations, animated images, and JavaScripts in existing web pages.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s