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;}
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
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;
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.
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
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
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);}
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”