css code

Giving form labels a width

For some reason this has always bugged me in the past. When using a label they don't comply with width unless accompanied by a float. I've used em to define the width so that is conforms with browser text settings. Dead simple

label {
	margin-right:10px;
	width:10em;
	float:left;
}

to css by Booma on Apr 22, 2008

Adding style to SVG

To reference a CSS file within an SVG file refer to the following example code.

<?xml-stylesheet href="styles_austria_1.css" type="text/css"?>

Here's what an SVG CSS file looks like.

.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}
.str2 {stroke:#0093DD;stroke-width:12}
.str3 {stroke:#0093DD;stroke-width:10}
.str4 {stroke:#0093DD;stroke-width:6}

.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}
.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}
.str5 {stroke:#0093DD;stroke-width:4}
.str7 {stroke:#1F1A17;stroke-width:13}

.fil0 {fill:none}
.fil2 {fill:#1F1A17}
.fil1 {fill:#C4E5FA}
.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

to css xml style svg stylesheet by jrobertson on Apr 18, 2008

Cursor styles used in CSS

Source: Custom CSS Cursors [javascriptkit.com]

cursor: default;
cursor: hand;
cursor: pointer;
cursor: pointer; cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: no-drop;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur); /* Note: Only .cur and .ani file types are supported as of IE6. */
cursor: vertical-text;

to css move cursor hand crosshair by jrobertson on Apr 06, 2008

Force scrollbar with CSS

// Force Scrollbar

html {overflow: scroll}

to html css scrollbar by t0b1 on Apr 06, 2008

CSS true centering

This will truely center something in CSS. Not tested in IE, knowing IE, it will burn in flames.

#center-me { /* There can be only one Centerlander! */
  height: 100%;
  display: table !important;
  margin: auto;
}

#center-me > * {
  display: table-cell !important; /* Don't touch me! I MEAN IT! DON- ... don't touch me. Really, don't touch me. */
  vertical-align: middle !important;
}

<div id="center-me">
  <h1>I'm centered!</h1>
</div>

to css layout simple center centering true horizontal vertical placement by elliottcable on Mar 19, 2008 1 Comments

abbr formatting

haml (easily transformed to css) snippet to format abbrs in a proper manner - you can still type them in ALL CAPS, but they will be displayed in Titlecase and small-caps. If you're using this, you're probably also using a custom face via @font-face, so you might want to explicitly declare the small-caps and lowercase variants of the typeface - the browser often fucks up auto-small-caps.

also, not tested in internet explorer. nothing I write is.

abbr
  :display inline-block
  :text-transform lowercase
  :font-variant small-caps
  
  &:first-letter
    :text-transform uppercase

to ruby css design haml abbr by elliottcable on Mar 13, 2008

css properties reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

to css by caffo on Feb 25, 2008

Selector :target in CSS 3

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>CSS3 *:target</title>
	
	<style type="text/css" media="screen">
	
	h1:hover { text-decoration: underline; } /* CSS 1 et 2 */
	h1:target { background-color: #ff6600; } /* CSS 3 */
	
	</style>
</head>

<body>
	
	<h1 id="title-1">Title n°1</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<h1 id="title-2">Title n°2</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<p><a href="#title-1">Title n°1</a> | <a href="#title-2">Title n°2</a></p>
	
</body>
</html>

Source: AB-D.fr

to css xhtml css3 by ki4ngel on Feb 19, 2008

Position : fixed in MSIE6

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>"position: fixed" compatible Microsoft Internet Explorer 6</title>
	
	
	<!-- Code CSS for Firefox, Safari, Opera, Internet Explorer 7... -->
	
	<style type="text/css" media="screen">
		
	#fixed {
		position: fixed;
		left: 0; top: 0; right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
	
	</style>
	
	
	<!-- Code CSS for Internet Explorer 6 -->
	
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	
	#fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
	
	</style>
	<![endif]-->
	
	
</head>

<body>
	
	<div id="fixed">DIV in position: fixed;</div>
	
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	
</body>

</html>

Source: Asselin Benoit Developpement, conception de sites internet

to html css xhtml by ki4ngel on Feb 11, 2008

Make a variable CSS

Page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<title>Variable CSS</title>
	<link rel="stylesheet" type="text/css" href="style.php" />
</head>

<body>


<h1>Title</h1>

<p class="color-1"> Text  Text  Text  </p>

<p class="color-2"> Text  Text  Text  </p>

<p class="color-3"> Text  Text  Text  </p>


</body>

</html>

Style.php

<?php
header('Content-Type: text/css');

$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';

?>

* { font-family: sans-serif; }

h1 {
	padding: 5px;
	color: <?= $color_0 ?>;
	border: 5px solid <?= $color_2 ?>;
	background-color: <?= $color_3 ?>;
}

p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }

Source: Asselin Benoit Développement, création de site internet amiens

to html css php xhtml by ki4ngel on Feb 06, 2008

Popular @ dzone.com

Related Tags

Never been to DZone Snippets before?