CSS

Change Colors with the CSS Transition Property

Using the transition property on an element, we can do amazing CSS transitions. See below for a example. The div will change color on hover with a transition. HTML: Hover to change color CSS: div.transitionColor {color: #fff;background: #000;transition: all 0.5s ease;}div.transitionColor:hover {background: pink;}

Using the Hover Effect on an HTML Element

We use the hover attribute to set the hover effect in Web pages within CSS. For example: div {color:#000;}div :hover{color:#f00;} You can apply the transaction property on top of this with a time attribute in seconds. It would play a transition in the change of the color. div :hover{color:#f00;transition: all 0.4s

Using Shorthand Properties in CSS

CSS supports shorthand properties for margin, border properties, etc. For example: margin-top: 1.5em; margin-right: 1em; margin-bottom: 1.5em; margin-left: 1em; could be written in shorthand format as margin: 1.5em 1em 1.5em 1em;

Add Text After a Particular HTML Element Using CSS

Use the :after selector to add text after the element. Please see below for an example. If you want to add text, such as ‘Click the email link at the bottom of the page for feedback,’ at the end of every div, you would simply add the following in the CSS.

Capitalize the First Letter of Every Word with CSS

Use the text-transform property with ‘capitalize’ value to capitalize the first letter of the words in an element., For example: div { text-transform: capitalize; }this is a statement that requires first letter to be capitalized would become: This Is A Statement That Requires First Letter To Be Capitalized

Improve Performance of Web Pages with CSS3 Styles

Using image files for your page background adds additional overhead for the HTML pages as they have to fetch the images via an explicit request and sometimes that can be time consuming which also impacts the performance of the entire web page. See below for an example that creates a

Clip an Image Using CSS with the CLIP Property

Images with absolute positioning can be clipped very easily with the CSS Clip property. The syntax is as below. .clippedImageStyle { position: absolute; clip: rect(100px, 150px, 175px, 30px);}

Conditionally Load CSS Files Based on the Media

The link tag in HTML supports the media element that allows you to specify the media type, and additional conditions such as the width and load a specified CSS file. For example, the following link tag loads a CSS file called “longWidth.css” only if the media is of type “Screen”