So let’s go ahead and do that for first in index.html, with help of style.css & main.js.

The post How to Use jQuery Filters to Specify Your Element Selections? appeared first on scmGalaxy.

Are right let’s create our first animation that’s not actually built in any nation but a custom one. And to get started with custom animations we’re just going to create a very simple one and this blog-

The post How to use Moving Elements in jQuery? appeared first on scmGalaxy.

Set Style using attribute : –

Syntax: –

Selector [attribute] { CSS ;}

Ex: –

div [id] { color: red; }

Set style using attribute and its value: –

Syntax: –

Selector [attribute = “value”] {  CSS  }

Ex: –

div[id=“data”] { color: red; }

Set Style using an attribute value containing a specified word.

Syntax: –

[attribute ~= “value”] { CSS }

Ex:-

[class ~= “game”] { color: red; }

Set Style using with the specified attribute starting with the specified value.

Syntax: –

[attribute |= “value”] { CSS }

Ex:-

[class |= “game”] {color: red;}

The value must be a whole word.

Ex: –

“game” or “game-super”

Set Style whose attribute value begins with a specified value.

Syntax: –

[attribute ^= “value”] { CSS }

Ex:-

[class ^= “game”] {color: red;}

It is not necessary that the value should be a whole word.

Set Style whose attribute value ends with a specified value.

Syntax: –

[attribute $= “value”] { CSS }

Ex:-

[class $= “game”] {color: red;}

It is not necessary that the value should be a whole word.

The post How does Attribute Selector work in CSS? appeared first on scmGalaxy.

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector–

• ID
• Class
• Element

Id Selector–

<html>
	<head>
		<style>
		          #id_selector {
			              color: red; font-size: 60px;
			         }
		</style>
	</head>
	<body>
		<p id="id_selector">Hello World!</p>
		<p>This paragraph is not affected by the style.</p>
	</body>
</html>

Class Selector–

Universal-

<html>
	<head>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Element Specific-

<html>
	<head>
		<style>
			p.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Use Two or more class–

<html>
	<head>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 60px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	                    <h2 class="algn">I am Heading</h2>
	                    <p class ="red look">I am first paragraph</p>
	                    <p class="red algn">I am second paragraph</p>
	</body>
</html>

The post Types of Selector in CSS & How to Use CSS Selector in HTML? appeared first on scmGalaxy.

The element which has a higher number appears at the top.

Ex: –

img {
position: fixed;
z-index: 565;
}

The post How to set element Layer (z-index) in CSS? appeared first on scmGalaxy.

Position-

• Left
• Right
• Bottom
• Top
• static
• Fixed
• Relative
• Absolute

Length (cm, px, %)

Left Align Property-

• left: auto
• left: 55px
• left: 50%

Right Align Property-

• right: auto
• right: 23px
• right: 50%

Bottom Align Property-

• bottom: auto
• bottom: 23cm
• bottom: 40%

Top Align Property-

• top: auto
• top: 20%
• top: 40px

static–

When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. left, right, top and bottom property won’t work with static position.

Ex: –

h1 {
position: static;
border: 5px solid red;
}

h1 {
position: static;
border: 5px solid red;
left: 50px;
}

fixed-

When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}

relative-

When we set relative position for an element, elements positioned to its normal flow.

h1 {
position: relative;
left: 50px;
border: 3px solid red;
}

absolute-

When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.

div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}

These properties are used to position an element.

We can not use any of these properties without setting up position property.

The post How to use the position property in CSS to align elements? appeared first on scmGalaxy.

Block-level Elements–

A Block-level element always starts on a new line and takes up the full width available.

Ex: –

<div>

<h1>

 <p>

Inline Elements–

An inline element does not start on a new line and only takes up as much width as necessary.

Ex: –

<span>

<a>

<img>

Display–

•inline – When we set this value, the element does not start on a new line and only takes up as much width as necessary (we can’t set width/height it won’t work)

•block – When we set this value, element always starts on a new line and takes up the full width available (we can set width/height)

•inline-block – It is combination of inline and block value. It doesn’t start on new line but we can set width and height.

•none – The element will not be displayed at all (has no effect on layout)

•flex – Displays an element as a block-level flex container.

•inline-flex –  Displays an element as an inline-level flex container.

•inline-table – The element is displayed as an inline-level table 

•run-in – Displays an element as either block or inline, depending on context

How to use Display?

• table – It works like a element
• table-caption – It works like a element
• table-header-group – It works like a element
• table-footer-group – It works like a element
• table-row-group – It works like a element
• table-cell – It works like a element
• table-row – It works like a element
• list-item – It works like a element

The post How an element should display in CSS? appeared first on scmGalaxy.

html Tags

A tag is a bit of text that acts as a point demarcation. To create a tag, HTML gives certain characters special meaning: the angle brackets < and >.
Putting characters within angle brackets creates a tag.

<h1> A heading </h1>

tags used

Start tag or opening tag and End tag or closing tag. An end tag always matches a start tag, except that it has an extra forward slash after the opening angle bracket.

<h1> A heading </h1>

tag type:

Container Tag – Which has opening and closing Tag.

Ex-
<html> ……. </html>
<head> ……. </head>
<body> ……. </body>

Empty Tag – which has only opening tag.

Ex: –

<br>
<area>
<base>
<hr>
<img>
<input>

Element

The combination of a start and end tags define an element. Everything between the two tags is referred to as the contents of the element.

<h1> A heading </h1>

The post Html tags and its type? appeared first on scmGalaxy.