FAQ's de CSS

[metacortex]

http://browsershots.org/

Esta herramienta ofrece capturas de pantalla en los distintos navegadores. Con ello se logra ver el aspecto de la wb que estamos desarrollando en el momento.

Navegadores soportados

Dillo 0.8, Epiphany 2.16, Firebird 0.6, Firebird 0.7, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 0.7, Galeon 2.0, Iceweasel 2.0, Konqueror 3.5, Mozilla 1.0, Mozilla 1.1, Mozilla 1.2, Mozilla 1.3, Mozilla 1.4, Mozilla 1.5, Mozilla 1.6, Mozilla 1.7, Navigator 4.8, Opera 9.2, Opera 9.10, Phoenix 0.1, Phoenix 0.2, Phoenix 0.3, Phoenix 0.4, Phoenix 0.5, SeaMonkey 1.0, SeaMonkey 1.1, MSIE 5.0, MSIE 5.5, MSIE 6.0, MSIE 7.0, Safari 2.0.

[yournightmare86]

Programa para crear menús de navegación con CSS:
|CSS tab designer 2|

[stock]

Pregunta: como posicionar imagenes en el fondo de la página?
Respuesta: es sencillo, simplemente tienes que definir el alto del body,en manera ralativa, y posicionar la imagen al fondo, algo asi:

Código:

html,body{
        margin:0px;
        padding:0px;
        min-height:100%;
}
body{
        background-image:url(fondo.jpg);
        background-position:center bottom;
        background-repeat:no-repeat;
}

* html body{
        height:100%;
}

con eso es suficiente, si quieres saber el por que? te recomiendo visitar el link de abajo, donde se explica paso a paso y a detalle los conceptos del por que ese codigo, como se fue construllendo!

http://www.crysfel.com/index.php/200...o-al-inferior/

have funnnnnnnnnnnnn

[dblanco]

Pregunta: Como imprimir una página pero no imprimir el menu u otros elemenos en cualquier navegador.

Respuesta: existe una solución muuuucho más simple que la anterior y además funciona con todos los navegadores y no sólo con IEplorer. Se trata de crear el siguiente estilo:

Código:

<style media="print">
	.noPrint {
		display: none;
	}
</style>

luego aplicamos la clase "noPrint" a todo lo que queremos que NO se imprima.

[rogertm]

10 errores comunes en los css

[DesarrolloWeb] Boletín 112, 4 de Diciembre de 2007.

Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes.
1.Uso innecesario del valor 0

El código siguiente no necesita la unidad especificada si el valor es cero.

padding:0px 0px 5px 0px;

En su lugar puede ser escrito de esta manera:

padding:0 0 5px 0;

De la misma manera es igual para otros estilos. Ej.:

margin:0;

No malgastes espacios agregando unidades tales como px, pt, em, etc, cuando el valor es cero. La única razón de hacer esto es si necesitas cambiar estos valores más tarde. Si no declarar estas unidades no tiene sentido. Los pixeles cero son iguales que los puntos cero.

Sin embargo,line-height puede no tener unidad.Por eso es válido lo siguiente:

line-height:1;

De cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.

2.Los colores en formato hexadecimal necesitan una almohadilla

Esto está mal:

color: ea6bc2;

Debe ser:

color: #ea6bc2;

O esto otro:

color: rgb (234.107.194);

3.Valores duplicados en los códigos de colores

No escribir el código de esta manera:

color: #ffffff;
background-color:#000000;
border:1px solid #ee66aa;

Los valores duplicados pueden ser omitidos.Escribiendo los códigos de esta manera:

color:#fff;
background-color:#000;
border:1px solid #e6a;

¡Por supuesto esto no debes hacerlo con códigos como este!

color: #fe69b2;

4.Evitar repeticiones de código innecesaria

Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es necesario:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;

Podríamos resumirlo en una única línea esta:

border:1px solid #00f;

5.La duplicación es necesario con los estilos en cascada

En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo, digámos que tenermos un elemento donde solamente es diferente el "border" izquierda. En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:

border:1px solid #00f;
border-left:1px solid #f00;

En este caso primero definimos todos los "borders" con el mismo color pero más tarde para ahorrarnos dos lineas de código redefinimos el "border" izquierda a otro color, de esta manera hemos ahorrado dos líneas de código.
El ejemplo malgastando espacio quedaría así:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #f00;

Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es insignificante.

6.Los estilos inválidos no hacen nada

Un ejemplo es suficiente para explicar este error:

padding:auto

Este estilo solo puede ser aplicado a width y height pero no a padding.

7.Código Específico para cada navegador

Obviamente este tipo de código solo funcionará en el navegador al que va destinado , pero es hay que pensar si es rentable puesto que solo algunos usuarios podrán apreciar esos cambio.

8.Espacio perdido

No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos "boquetes".

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.

9.Especificar los colores sin usar palabras

Definir los colores usando las palabras que lo definen no es una buena idea puesto que estaríamos confiando en el navegador para que el interprete que color y código debe aplicar.Las tonalidades para un mismo nombre de color cambian mucho de un navegador a otro.

Es una buena práctica especificar siempre el color por su código hexadecimal.
Ej.: utilizar "#fff" en lugar de blanco.

10.Agrupar estilos idénticos

Es común ver los estilo escritos una y otra vez con el mismo código, aún cuando el estilo es igual.

Sería conveniente agruparlos y asi optimizaríamos espacio:

h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}

Tambien nos hara mucho más facil la tarea de actualizar el código.

fuente => http://www.desarrolloweb.com/articul...munes-css.html

PD: me acaba de llegar el boletin y creo que este es el articulo mas importante de esta edicion, por eso no dude en publicarlo aqui en las FAQ de CSS.

saludos y suerte

[DoPeY-BBS]

Un Excelente manual

http://www.virtualnauta.com/es/css/csshome.php

[metacortex]

Atajos para estilos tipográficos: http://www.forosdelweb.com/f53/micro...uentes-555641/

[Mikmoro]

Hola a todos.

Como mucha gente pregunta por un menú desplegable que esté hecho sólo con CSS, y algunos dan problemas con los diferentes navegadores, he hecho uno horizontal de dos niveles y centrado en la página, que pueda servir como referencia para desarrollar el propio a partir de ahí.

Menú CSS

La hoja de estilo

Ha sido probado y funciona correctamente en los siguientes navegadores:

- Firefox 2 y 3b5
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror
- Firefox 2.0 Linux

El código es válido XHTML 1.0 Strict y la CSS sin errores ni advertencias.

Espero que os sirva.

[Mikmoro]

Como parece que están siendo prácticos, y por las consultas he ido haciendo más opciones, los voy a recopilar aquí para quien le pueda ser útil.

Menú 2: menú horizontal con el segundo nivel también en horizontal.

Y su css.


Menú 3: segundo nivel en vertical, como el primero, pero que despliega hacia arriba.

Y su css.


Menú 4: segundo nivel en horizontal, como el segundo, pero hay que pulsar para que aparezca y queda activo tras hacerlo.

Y su css.


Menú 5: menú en vertical, con el segundo nivel también en vertical a su derecha.

Y su css.


Menú 6: Menú vertical, que despliega a la derecha en horizontal.

Y su css


Menú 7: vertical, con 4 niveles de profundidad también en vertical. Los que despliegan son los niveles 2, 2.1, 2.1.1

Y su css.


Menú 12: menú horizontal que despliega en vertical, con un tercer nivel también en vertical a su derecha.

Y su css.

Es lo que hay por el momento. Seguiremos añadiendo.

Mikel.

[Mikmoro]

P: ¿Cómo hacer para que el pie de página se mantenga siempre abajo, haya mucho o poco texto?

R: Es algo menos fácil de lo que parece a simple vista. Aquí pongo un ejemplo

Para quien no entienda el código a la primera, aquí pongo un zip que contiene un artículo con una breve explicación y los ejemplos. Por si a alguien le pueda interesar.

[Mikmoro]

P: ¿Cómo hacer para que dos columnas estén siempre equilibradas, y si el contenido de una crece la otra también?

R: Esta es una de las cosas que más dudas y consultas suscita en los foros dedicados a la maquetación mediante CSS: cómo conseguir que teniendo dos o tres columnas, todas crezcan a la par cuando el contenido de una de ellas crece. Y es que no es complicado en absoluto, pero ahí está nuestro buen enemigo Internet Explorer 6, para entretenernos un poco y obligarnos a pensar (gracias, Bill).

Olvidándonos de IE6 la cosa sería todavía más sencilla porque todos los navegadores saben dimensionar cajas con posición absoluta en arreglo a las coordenadas top y bottom, o bien saben usar display table y display table-cell, por ejemplo, pero desgraciadamente el susodicho IE6 no sabe usar ningua de esas cosas, por lo que nos da al traste con el diseño si queremos que sea lo más compatible posible.

Existen infinidad de variantes en cuanto al asunto de conseguir que nuestras columnas queden equilibradas cuando una de ellas crece: la solución que presento se refiere a dos columnas que queden separadas entre sí.

<!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" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">

<div class="columna_izquierda">Lorem ipsum...
</div>

<div class="columna_derecha">Lorem ipsum dolor...
</div>

</div>
</div>
</body>
</html>

Este código ha sido probado y funciona correctamente en los navegadores Firefox 2 y 3, Explorer 6 y 7, Opera 9.5, Safari 3.1 Windows, Firefox 2 y 3 Linux y Konkeror.

Si alguien desea leer una explicación más detallada del por qué de las cosas, puede bajarse libremente este zip que contiene el ejemplo con contenido y un artículo que explica todos los detalles del código:

http://www.araudi.net/forosdelweb/Co...uilibradas.zip

[kseso?]

(Premisa: quizás sea de tu interés también hacer "botones con esquinas redondeadas utilizando sólo css. Sigue el enlace al foro de css.)

EL EFECTO HOVER SOBRE IMÁGENES, CON CSS, claro.
Encontrado en abeontech.com y que traduzco por libre:
"Con css todo lo que necesitas hacer es colocar unas líneas en tu hoja de estilo para lograr el efecto rollover sobre imágenes o texto.
No necesitas una segunda imagen o script.

Paso 1:
Coloca entre <head> y </head> el siguiente código:

<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Paso 2
Ahora añade la clase 'class="linkopaity" ' a el enlace que quiereas que tenga el rollover. Funciona con enlaces de texto e imágenes.:

Código HTML:

<a class="linkopacity" href="#" title="CSS-Rollover" ><img src="mi-imagen.jpg"  alt="CSS tutorials"></a> 

Aquí un ejemplo funcionando

Probado con FF 3.0.3, ie7, Opera 9.25

Un saludo
௫

[kseso?]

Pregunta: ¿Cómo usar una fuente no segura con css? Válido incluso para ie
Respuesta:

EDITO: en el #80 tienes una guía para hacer los .eot

<style type="text/css" media="screen">
h1 {
font-family:'stencil', georgia, serif;
}

/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face{
font-family:'stencil';
src: url('ruta_en_nuestro_servidor/stencil.ttf') format('truetype') /*u ('opentype') si lo fuera*/;
}
</style>

/* PARA INTERNET EXPLORER*/
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'stencil';
src: url('ruta_en_nuestro_servidor/stencil.eot);
}
</style>
<![endif]-->

A divertirse.

Aquí lo vi
aquí también
Vale, en castellano en anieto2k

[pitufoweb]

P: ¿Cual es la especificidad de los selectores en CSS?


Re:

* = 0

p = 1 (cualquier etiqueta de html)

:fisrt-line = 1 (Cualquier Pseudo-elemento)

[rel=up] = 1 (Cualquier selector de atributo)

.class = 10

:hover= 10 (Cualquier Pseudo-class)

#id = 100

<p style="..."> = 1000 (cualquier etiqueta de html)




Saludos.

[webosiris]

Glosario: que son los bugs, los hacks, el hasLayout, los comentarios condicionales y el modo quirks?

[kseso?]

Menús a la carta para todos los gustos
Recopilación de orígenes varios, en diferentes momentos y técnicas diversas (no sólo css)
CSS Menu Maker herramienta para crear menús
http://www.mycssmenu.com/ Otro generador de menús
http://www.izzymenu.com/ Otra herramienta para crear
Free CSS Drop-Down Menu Framework
http://css.maxdesign.com.au/listamatic/index.htm Una colección de estilos basados en listas
http://www.lwis.net/free-css-drop-down-menu/
http://e-lusion.com/design/menu/
http://alvit.de/css-showcase/css-nav...s-showcase.php
http://www.webdesignerwall.com/tutor...nced-css-menu/
http://purecssmenu.com/
http://webdeveloper.econsultant.com/...vigation-tabs/
http://www.ndesign-studio.com/blog/d...css-dock-menu/ el dock de Mac
http://www.anieto2k.com/2008/04/02/d...ss-animations/ otro dock
http://www.alistapart.com/articles/hybrid/
http://www.twinhelix.com/dhtml/fsmenu/
http://devsnippets.com/reviews/10-br...echniques.html
Recopilación de 50 menús para inspirarte
menú MTv
menu Adobe
Menú de flickr
Hoverbox Menu

38 menús multinivel con css+jquery

[Nathan_1979]

Los bugs de los navegadores, encontrarlos, arreglarlos y aprender a usar hacks avanzados en CSS. Muy útil:

http://www.positioniseverything.net/

http://www.positioniseverything.net/explorer.html


Un saludo.

[kseso?]

Complementando el apunte de Nathan_1979
http://haslayout.net/
Css bug's, hasLayout, comentarios condicionales para ie, desde la ver. 6 hasta la 8 ... su descripción y cómo solucionarlos.

[kseso?]

¿Cómo incluir tipografías distintas a las "safety-fonts" en las páginas web?:

He realizado una guía breve de cómo hacerlo utilizando la regla @font-face para aquellos navegadores que la soportan y cómo generar los archivos .eot que necesita la familia de internet explorer:
Aquí la guía.
Aquí el hilo donde podrás comentar al respecto.

Un saludo

P.D.: en la guía podrás ver también que sí funciona.

[WinderJerter]

¿Cómo Centrar vertical un texto dentro de un div?

Hola que tal aqui les traigo dos sencillas propiedades para poder centrar un texto verticalmente

• display:table-cell;
• vertical-align:middle;

Ejemplo:

Código:

<style type="text/css">
#vertical {
	background:#999;
	color:#CCC;
	display:table-cell;  /*Propiedad obligatoria*/
	height:30px; 
	text-align:center;
	vertical-align:middle; /*Propiedad obligatoria*/
	width:300px;
}
</style>

<div id="vertical">Este texto esta centrado verticalmente</div>

PD: Tambien sirve para imagenes

Saludos y espero que les sirva

[Jask]

¿Como centrar un div sin contenido alguno?

Es muy sencillo, si queremos centrar un div contenedor el cual no tenga ningún contenido hay que hacerlo de la siguiente manera:

Código HTML:

<style type="text/css">
.contenedor{
    width: 900px;
    margin:0 auto;
    display:block;
    border:1px solid black;
}

</style>

<div class="contenedor"></div> 

******

Le puse un borde para que puedan comprobar el funcionamiento. Recomiendo también poner alguna palabra y tal :) !! Espero que les sirva.

[romel_inc]

¿Como crear columnas “Fácilmente” con muy poco Código?

Además que funcione fino en los diferentes navegadores, Además sin usar tablas, Además Sin usar la etiqueta “li”, Además etc.

Ejemplo 1

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
 

<div style="clear:both;"></div>

</div>


</body>
</html>

Ejemplo 2

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a.estilo{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  

<div style="clear:both;"></div>

</div>


</body>
</html>

Fuente: [En ingles]
http://www.positioniseverything.net/easyclearing.html

Por si acaso subí una copia de la pagina web en caso de que no este online.
a varios servidores. y los ejemplos están incluidos.

http://www.mediafire.com/file/dnznzdzymnr/ejemplos.zip

http://www.megaupload.com/?d=8EWV1LI0


PD: La explicación de como funciona esta en ingles, Seria interesante verla en español y de fácil compresión. Y ver los ejemplos Mejorados ya que no son perfectos pero tienen la idea, Saludos.

[rogertm]

30 Selectores CSS que se deben memorizar (CSS3):
http://net.tutsplus.com/tutorials/ht...must-memorize/

Excelente artículo, está en inglés, pero muy fácil de entender, con demos incluidos... Realmente muy bueno y útil.

[Anya82]

¿Como hacer que un div se extienda al 100%?
¿Cómo lograr que varias columnas se extiendan al height 100%?

Tal como mencionó Mikmoro en su post anterior, hay muchas maneras de lograrlo, y a veces te puede servir una, y otras veces otra. Aquí pongo un enlace con un método que a mí me ha funcionado bien: (está en inglés)

Raincity Studios: Equal height columns with css

[Anya82]

¿Cómo hago esquinas redondeadas sin usar imágenes?

Con CSS3 es muy fácil, sin embargo, no lo soportan algunas versiones de navegadores. Aquí hay una manera de lograrlo con CSS y Javascript. Presenta varios ejemplos de como lograrlo para distintas situaciones:

Nifty Corners Cube

[baldaweb]

Pregunta: No me lee una clase cuando la tengo definida en mi hoja de estilos

Solución: Una posible respuesta sería...

tenemos la hoja de estilos

Código CSS:

.margen-der-15{margin-right:15px!important} //margen derecho a 15
.margen-der-20{margin-right: 20px!important;}
 

Y le ponemos la clase margen-der-20 y no funciona

Código HTML:

<button type="button" class="margen-der-20" data-dismiss="modal">Cancelar</button>
 

La solución es cambiar el comentario en la hoja de estilos de la siguiente manera. Cambiar las // por /* */ y ya funcionará

Código CSS:

.margen-der-15{margin-right:15px!important} /* margen derecho a 15 */
.margen-der-20{margin-right: 20px!important;}