Category: 2. CSS

Why Validate Your CSS Code As a beginner, it is very common that you will make mistake in writing your CSS code. Incorrect or non-standard code may cause unexpected results in how your page displayed or functions in a web browser. The World Wide Web Consortium (W3C) has created a great tool https://jigsaw.w3.org/css-validator/ to automatically check your…

Cross Browser Opacity Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency. CSS Opacity in Firefox, Safari, Chrome, Opera and IE9 Here is the most up to date syntax for CSS opacity in all current…

What is a Sprite Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed. Advantage of Using CSS Image…

Introduction to Media Types One of the most important features of style sheets is that, you can specify separate style sheets for different media types. This is one of the best ways to build printer friendly Web pages — Just assign a different style sheet for the “print” media type. Some CSS properties are only…

What is Pseudo-element The CSS pseudo-elements allow you to style the elements or parts of the elements without adding any IDs or classes to them. It will be really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or you want to…

What is Pseudo-class The CSS pseudo-classes allow you to style the dynamic states of an element such as hover, active and focus state, as well as elements that are existing in the document tree but can’t be targeted via the use of other selectors without adding any IDs or classes to them, for example, targeting…

Text Alignment Text inside the block-level elements can aligned by setting the text-align properly. Example See tutorial on CSS Text to learn more about text formatting. Center Alignment Using the margin Property Center alignment of a block-level element is one of the most important implications of the CSS margin property. For example, the <div> container can be aligned horizontally center by setting the left and right margins…

Floating Elements with CSS You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side. The float property may have one of the three values: Value Description left The…

Stacking Elements in Layers Using z-index Property Usually HTML pages are considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, boxes can be stacked along the z-axis as well i.e. one on top of the other by using the CSS z-index property.…

Controlling the Visibility of Elements You can use the visibility property to control whether an element is visible or not. This property can take one of the following values listed in the table below: Value Description visible Default value. The box and its contents are visible. hidden The box and its content are invisible, but still affect…