Standard CSS - Revision history

Bacchas at 14:36, 3 January 2022

2022-01-03T14:36:07Z

← Older revision		Revision as of 14:36, 3 January 2022
Line 1:		Line 1:
			== CSS Reset ==
			<pre>
			CSS Reset
			/* Box sizing rules */
			*,
			*::before,
			*::after {
			box-sizing: border-box;
			}

			/* Remove default margin */
			body,
			h1,
			h2,
			h3,
			h4,
			p,
			figure,
			blockquote,
			dl,
			dd {
			margin: 0;
			}

			/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
			ul[role="list"],
			ol[role="list"] {
			list-style: none;
			}

			/* Set core root defaults */
			html:focus-within {
			scroll-behavior: smooth;
			}

			/* A elements that don't have a class get default styles */
			a:not([class]) {
			text-decoration-skip-ink: auto;
			}

			/* Make images easier to work with */
			img,
			picture {
			max-width: 100%;
			display: block;
			}

			/* Inherit fonts for inputs and buttons */
			input,
			button,
			textarea,
			select {
			font: inherit;
			}

			/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
			@media (prefers-reduced-motion: reduce) {
			html:focus-within {
			scroll-behavior: auto;
			}

			*,
			*::before,
			*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
			}
			}

			body {
			font-size: 1rem;
			padding: 2rem 0;
			text-rendering: optimizeSpeed;
			}
			.container {
			max-width: 100rem;
			margin-inline: auto;
			padding-inline: 2rem;
			}

			</pre>
	== Pop Up Tool Tip ==		== Pop Up Tool Tip ==
	===HTML===		===HTML===

Bacchas: /* Get rid of space under image */

2020-12-28T15:57:36Z

Get rid of space under image

← Older revision		Revision as of 15:57, 28 December 2020
Line 222:		Line 222:

	===Get rid of space under image ===		===Get rid of space under image ===
			Your image will have a small space below it
			img{
			max-width: 100%;
			display: block; // This will remove the space under the image
			}


	----		----

	==[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 15:52, 28 December 2020

2020-12-28T15:52:59Z

← Older revision		Revision as of 15:52, 28 December 2020
Line 221:		Line 221:
	</pre>		</pre>

			===Get rid of space under image ===
	----		----
	==[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 13:01, 12 August 2016

2016-08-12T13:01:00Z

← Older revision		Revision as of 13:01, 12 August 2016
Line 223:		Line 223:

	----		----
	===[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]===		==[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 13:00, 12 August 2016

2016-08-12T13:00:32Z

← Older revision		Revision as of 13:00, 12 August 2016
Line 223:		Line 223:

	----		----
	[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]		===[[#Pop Up Tool Tip\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]===

Bacchas at 14:33, 9 August 2016

2016-08-09T14:33:46Z

@@ Line 221: / Line 221: @@
 </pre>
 ----
 [[#Pop Up Tool Tip|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]

Bacchas: /* Attribute Selectors */

2016-08-09T14:32:07Z

Attribute Selectors

← Older revision		Revision as of 14:32, 9 August 2016
Line 134:		Line 134:
	The [attribute] selector is used to select elements with a specified attribute.		The [attribute] selector is used to select elements with a specified attribute.

			The following example selects all <a> elements with a target attribute
	The following example selects all <a> elements with a target attribute
	a[target] {		a[target] {
	background-color: yellow;		background-color: yellow;
	}		}

	CSS [attribute=value] Selector		CSS [attribute=value] Selector
	The [attribute=value] selector is used to select elements with a specified attribute and value.		The [attribute=value] selector is used to select elements with a specified attribute and value.
Line 148:		Line 148:
	background-color: yellow;		background-color: yellow;
	}		}

	CSS [attribute~=value] Selector		CSS [attribute~=value] Selector
	The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.		The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.
Line 156:		Line 157:
	border: 5px solid yellow;		border: 5px solid yellow;
	}		}

	The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".		The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

Line 179:		Line 181:
	background: yellow;		background: yellow;
	}		}

	CSS [attribute$=value] Selector		CSS [attribute$=value] Selector
	The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.		The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.
Line 189:		Line 192:
	background: yellow;		background: yellow;
	}		}

	CSS [attribute*=value] Selector		CSS [attribute*=value] Selector
	The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.		The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.
Line 199:		Line 203:
	background: yellow;		background: yellow;
	}		}

	Styling Forms		Styling Forms
	The attribute selectors can be useful for styling forms without class or ID:		The attribute selectors can be useful for styling forms without class or ID:

Bacchas at 13:25, 9 August 2016

2016-08-09T13:25:57Z

Show changes

Bacchas: Created page with "== Pop Up Tool Tip == ===HTML===

 First Link     click below to continue and som..."

2016-08-09T13:19:08Z

Created page with "== Pop Up Tool Tip == ===HTML=== <pre> <div class="couponcode">First Link <span class="coupontooltip"><a href="http://www.outwater.com">click below</a> to continue and som..."

New page

== Pop Up Tool Tip ==
===HTML===
<pre>
<div class="couponcode">First Link
<span class="coupontooltip"><a href="http://www.outwater.com">click below</a> to continue and some more text</span>
</div>

<div class="couponcode">Second Link
<span class="coupontooltip"> Content 2</span>
</div>
<div class="menu">
<ul>
<li> one</li>
<li class="two"> one</li>
<li class="two"> one</li>

</ul>
</div>

</pre>
===CSS===
<pre>
.couponcode:hover .coupontooltip {
display: block;

}

.coupontooltip {
display: none;
background: teal;
margin-left: 8px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
line-height:26px;
}

.couponcode {
margin:100px;
}
.menu > ul {
list-style-type:none;
display:none;
}
.menu:hover ul > li {
display:inline-block;
}
</pre>
== ==
<pre>

</pre>

== ==
<pre>

</pre>

== ==
<pre>

</pre>

== ==
<pre>

</pre>

== ==
<pre>

</pre>

== ==
<pre>

</pre>
----
[[#Pop Up Tool Tip|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]