Should you use Tables or Divs? Is is better to use align or float? should I use a background image or color? There is something hiding behind everything in here… do a CSS is a mess! so you have to be really organized. This is not intent to be a CSS how to, is just a quick list of things you might find useful when you’re trying to create one, or at least, trying to force some changes in your html documents.
Class and ID
NEVER forget the difference between Class and ID… but if you do, don’t freak out, is as easy as change a # for a .
.Class
#ID
Align images everywhere
When you’re trying to align an image inside a text, instead going with tricky tables just give it a float property and your problem will be solved (at least most of the times.). You should no apply any property to your text since the image is the one who has everything inside, in this case, image property is a style=”float:left;”
#class img {
float: left;
}
Make that div be centered
It’s kind of usual to see websites that have a fixed div for content and just stay centered even if the screen size is bigger. Make sure to add a margin 0 to your main div and solve it.
#class content {
margin: auto;
}
Rounded borders
I love to see rounded borders but I don’t like to use too many images for my websites, CSS make it faster. Even so, sometimes those damn borders work on firefox but stop working on Chrome (don’t even ask me for IE), so, make sure to add both lines.
#class {
border: 5px solid #567924;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Remove underline at links
When comes to links, I rather to give them a different color and perhaps, add some bold style than just make them blue with that terrible underline. If you want to give them some style don’t forget to use text-decoration:
a {
text-decoration: none;
color: #234876;
font-weight: bold;
}
Help tatica and donate with paypal!
Muy buenos consejos. Yo agrego que antes de comenzar con las propiedades en el CSS, debemos “resetear” las mismas, así tendremos un control uniforme sobre cada una de ellas. Otro consejo es una vez finalizado aplicar un comprimido para que nuestro sitio posea mayor rapidez.
Saludos tatica. Casualmente hoy acabo de concluir un curso de xhtml en la academia de software libre y mi trabajo final es realizar un website. De verdad que tu ayuda me ha sido muy útil pero no más que los comentarios de PabloT y muy en especial el de Hascheck quién incluye un hermoso tema como el de accesibilidad. Gracias a los tres de corazón.
Hola tatica gracias por compartir un poco sobre temas de diseño web como css y vaya que me ayudó mucho tus condejos en especial el de subrayado gracias y se extraña un nuevo episodio del Gimp100podcast (^_^).
Oh, some other tips thx to Michael Beckwith (tw2113) :
* centered divs: you’ll need to set a width that is less than “auto” or 100% for it to visually center at all.
* rounded borders: it’d be a good practice to provide the non-prefixed version at the end of the selector, for when browsers stop supporting said prefix for that property.
* floated elements. You’ll want to add overflow: hidden to parent elements to help fix potential layout issues due to the floating.
Haschek completely agreed! I havent thought on that and believe me that I get the heads up happily. I even think that I’m doing that mistake with my blog. Even so, underline isn’t that cool where links are obvious: menu, widgets, etc. – Thank you, I will take a look to my own blog and fix that :D
Hey Tatitica, some of your tips look a little bit outdated, PabloT answered already on that.
But for your last point “Remove underline at links” it’s a little bit more complicated. Removing underlines at links is harming accessibility, e.g. color blind people cannot easily see the difference between the link and normal text. If you using bold weight for links, then some people still have problems to distinguish between bold links and normal bold words. If you add underlines only on mouseovers then they have to test it everytime (what is hardly possible on touch screen devices). Hope you see my point.
You can remove the underline at places where people know that it is a link, e.g. in main or sub navigation menus but it is recommended to use underlines for links in text bodies. Pro tip: change optical state for focused links because not all people can/want to use a mouse :)
Podes probar con este :)
http://leaverou.github.com/prefixfree/
Pablo nice!!!! I’m not a big expert on JS, can you link me so I can take a look and give it a try?
Claro, no te digo que no uses los prefijos, si no que ademas agregues la versión sin prefijos.
Igual hay algunas librerias JS que ayudan con ese tema :)
Santiago sure, you can use my contact form right here on the right side of my blog, either there or you can contact me through @tatadbb
Good advice you give up there to have in mind when you create some CSS code, but can i ask you some things in mail/chat/Skype if you don’t mind? Writing here would be a kind of long and maybe you won’t understand my ideas. Thanks
Gracias Pablo! Pues si supieras que de vez en cuando los bordes redondeados aún me daban fallo y por eso acostumbro. De todas formas voy a darle un vistazo. El class content… me merezco un slap :D
Estan buenos tus ‘recordatorios’ ya que son problemas comunes con los que te encontras cuando arrancas con CSS.
Aporto un par de ‘observaciones’ :)
La diferencia entre class e id es que un class podria/deberia aplicarse a varios elementos y el ID es único por elemento.
Los bordes redondeados ya fueron estandarizados hace rato, ‘border-radius’ deberia reemplazar a la versión con prefijos -moz-/-webkit- que obviamente no van a funcar en browsers que no sean gecko o webkit, de hecho, a partir de la version 10 u 11 de FF, -moz-border-radius no esta soportado.
Aún así, es bueno conservar los prefijos para versiones de FF anteriores a la 4.
Espero que sirva :D
Por último… ‘#class content’ … no existe (en html), un tipo de etiqueta ‘content’