Creative Technocrayts

As we have gone through few css selectors in the CSS Selectors-Part I we will continue to discuss some more now. Pseudo class selectors When we want to style anchor elements when they are hovered or visited or linked For eg, a:link{ color: red; } Visited link a:visited{ color: purple; } X:checked This selector will target a user interface element when it is checked and apply the styles. For eg when the checkbox and radio button is checked. For eg, X:checked{ box-shadow: 5px 5px #dbdbdb; } X:hover Hover pseudo selector is used to apply CSS styles when the anchor tag is hovered. a:hover{ color: #000; background:#fff; border: 1px solid #000; } Attributes selectors Styling elements based on the attributes the tags have. a[title] a[title]{ color:blue; } a[href] This selector will apply the style for anchor tags having title attribute. a[href="http://gmail.com"] { color: #1f6053; } X:after / X:be...

Using CSS selectors Hope the previous article on Understanding html hierarchy   would have been useful to all. This article will help you to write CSS in a better way. CSS selectors are used to write styles more efficient and plays a major role in re usability and maintainability of the code.  Read further to know what are all the CSS selectors available for use.

             When you are new to web development and have just started dirtying your hands with HTML code it is very important to understand the html hierarchy to proceed further.

This article deals with text overflow property of CSS and more emphasis is on ellipsis values over the other values. When the content overflows the container box, it has to be either accommodated in any way or clipped out of container box and should be represented to the user that overflowed content is clipped. It can be shown like visible overflow, clipped, ellipsis or custom string. Text overflow can be applied only for block level container elements as it makes sense only when the word/s being long to fit into the container. To apply text overflow we need to apply overflow :  hidden or scroll or auto property. Overflow: clip is the default value. text-overflow:  clip; This specification clips the content at the limit of the container area. So the truncation may happen at the middle of the character. Inorder to avoid that we need to add an empty string value (‘’). Text-overflow : ellipsis; It is the property wherein three consecutive dots are used to repres...

Using Image Sprites in CSS for Faster Web Pages Websites that rely heavily on visuals often struggle with slow loading times and excessive HTTP requests. One of the simplest performance techniques developers use to solve this problem is CSS image sprites. In this article, we’ll explore what image sprites are, why they improve performance, and how to implement them effectively. In many cases, we may have to create websites with larger images. This could be a photography website or a tourism website. Images might also be used for hover effects or when a page is visited. Eventually, using multiple images can generate more HTTP requests, which can increase the page load time. In such scenarios, we can use image sprites to improve performance. An image sprite is a collection of images put into a single image file. This reduces the number of HTTP requests and decreases the memory and bandwidth usage of a webpage. ...

Class and id selectors are commonly used in CSS selectors. This article shows the usage of both the selectors and their significance. When building a website, managing styles for various elements is essential. CSS selectors—especially class and id selectors—play a major role in this process. Understanding how to use them effectively can make your stylesheets more organized and help improve performance. In this article, we'll dive into the differences between class and id selectors, when to use them, and best practices for naming and performance optimization. Id selectors are defined as unique identifiers for elements and can be used only once per page. Class selectors are used when you consistently style multiple elements of a page. Classes are used when multiple elements share the same style, while id selectors are used for unique purposes like the main header or footer of the page. Example: <p class="class_one">This is a paragraph</p> ...

onbeforeunload function in JavaScript | Creative Technocrayts onbeforeunload function in JavaScript When you have filled up a form in a web page and if you close the page before submitting it, you may get a message "Are you sure to leave this page?" Such customized messages are examples of window events onbeforeunload . The onbeforeunload event is fired when the document unloads its resources. You may notice the document is still visible and the event can be cancelled. onbeforeunload event is assigned to the <body> element. Various mobile user agents ignore the event. HTML Code Example You can implement the onbeforeunload event like this: <body onbeforeunload="return myFunction()"> Other tags </body> JavaScript Code Example Here’s an example of the JavaScript function to show the prompt: function myFunction(){ return "Your mes...