CSS Archives - Ebhor.com

Add active class onclick javascript and jQuery

December 5, 2023December 5, 2023 by manish

Add active class to a div on javascript onclick event Here we are applying a style to a simple div. Steps to add a css class on click event

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text" onclick="makeActive()">
            Click to make Active
        </div>
        <script>
            function makeActive() {
               var element = document.getElementById("text");
               element.classList.add("active");
               element.innerHTML="This is Active";
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

function makeActive() {

var element = document.getElementById("text");

element.classList.add("active");

element.innerHTML="This is Active";

}

</script>

</body>

</html>

Add active class onclick javascript to HTML ul List to make menu Here We have ul list elements to create horizontal menu on click on … Read more

CSS Background

August 26, 2023August 26, 2023 by manish

The background effects for web pages can range from plain colors to attractive images. All having a specific purpose or thought behind them. CSS background properties can be also be used for the same purpose. Depending upon the type of background required, there are various background effects that we’ll discuss in this section. Background Color … Read more

How to Include CSS in HTML- Types of CSS Inline External Internal

May 28, 2023May 28, 2023 by manish

CSS (Cascading Style Sheets) is a fundamental component of web design that enhances the visual appeal and aesthetics of websites. There are various types of CSS that developers can utilize to style their web pages. Each type has its own syntax, usage, and advantages. In this article, we will explore the three primary types of … Read more

CSS Padding

February 20, 2023February 20, 2023 by manish

Padding in CSS is the term given to the inner space of an element around its content. CSS allows you to control all the padding of an element; top, bottom, left and right. The corresponding properties for each side are: padding-top padding-bottom padding-left padding-right A general example for the padding can be:

    <style>
        div {
            background-color: wheat;
            padding-top: 60px;
            padding-right: 50px;
            padding-bottom: 60px;
            padding-left: 50px;
            border: 1px solid;
        }
    </style>





<div>
        CSS Padding
</div>

<style>

div {

background-color: wheat;

padding-top: 60px;

padding-right: 50px;

padding-bottom: 60px;

padding-left: 50px;

border: 1px solid;

}

</style>

<div>

CSS Padding

</div>

The values … Read more

CSS Responsive Web Design

February 4, 2023February 2, 2023 by manish

With a wide range of devices being able to access the internet, it is very necessary to make the websites easily operable on all these devices. A website that looks great on the laptop screen should retain its swagger on the mobile phone screen as well. To serve this purpose, CSS provides a feature called, … Read more

CSS Counters

February 1, 2023February 1, 2023 by manish

There’s often a need to list items on the webpage in an orderly fashion. These items can be ordered products in a wish-list or Steps to be followed in a tutorial. Making a dynamic list that can add counters to the list element is another popular feature provided by CSS. CSS counters are, basically, “variables” … Read more

CSS Types of Selectors

January 24, 2023January 22, 2023 by manish

Just like any programming language works, the CSS code is also interpreted based on some rules.Here, the browser interprets what is called the style rules.Based on the rules, it applies the design to the corresponding elements of the webpage. The style rule can be seen as following 3 parts: Selector – This is the HTML part … Read more

CSS Absolute and Relative Units

January 21, 2023January 20, 2023 by manish

Several CSS properties like height, width, margin, font-size etc. requires length values. To express these lengths, CSS supports two types of units namely, absolute and relative. Absolute length units are static irrespective of the screen size and hence are used when the output display size is known, like the print layout. Relative length units are … Read more

CSS 3D Transforms

November 8, 2019August 3, 2018 by manish

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D. Transformation allows to rotate, translate, shift and scale elements. In this, we will learn about only 3D transformation. In the 3D transformation, the effects are produced … Read more

CSS 2D Transforms

April 19, 2022August 3, 2018 by manish

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D. Transformation allows to rotate, translate, scale, and skew elements. In this, we will learn about only 2D transformation. In the 2D transformation, the effects are produced … Read more