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

CSS Fonts: family list style size weight variant examples

July 8, 2023July 8, 2023 by manish

CSS Fonts provide a way of styling text, styling the font is a whole category in itself. CSS can alter the font family, size, boldness, and text style. Some of the CSS properties we’ll study here are: font-family font-style font-size font-weight font-variant CSS font-family Font families have two types in CSS: generic family: A look-wise … Read more

What is CSS Definition, Advantages, and Uses

June 30, 2023June 24, 2023 by manish

1 What is CSS? CSS’s full form is Cascading Style Sheets. Cascading Style Sheets are used in HTML to position and display the HTML elements. CSS can be used to manage the color, text, position, layout, transformation, animations, and other properties of HTML elements. In other ways The design language, Cascading Style Sheets, popularly known … 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

Full form of CSS | Details of CSS

February 10, 2023February 10, 2023 by manish

Introduction For designing a website we need to learn HTML, CSS, and Javascript. HTML and CSS are both markup languages whereas Javascript is a programming language. One can learn web designing at w3schools,codeacademy and offline courses are there. Stackoverflow is a platform where students can get their queries resolved. Learning HTML takes hardly 2- 4 … 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