• Skip to primary navigation
  • Skip to main content
  • Skip to footer

tatica.org

ps ax | grep tuxilandia

  • Main
  • Blog
  • Categories
    • General
    • Linux
    • Gimp100Podcast
    • Design
    • Photography
    • HowTo
    • Fedora
    • Ubuntu
    • Events
  • Store
  • Who?
  • English
  • Español

CSS tips you must never forget

18 July, 2012 by tatica 13 Comments

css tips 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!

Social:

  • Email
  • Facebook
  • Reddit
  • Twitter

Filed Under: Fedora, General, HowTo, Linux, Ubuntu Tagged With: css, html, style, tip, trick

Reader Interactions

Comments

  1. Franklin says

    Sunday September 2nd, 2012 at 18:38

    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.

  2. Leps86 says

    Tuesday August 14th, 2012 at 17:07

    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.

  3. aniterasu_83 says

    Saturday July 28th, 2012 at 22:07

    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 (^_^).

  4. tatica says

    Thursday July 19th, 2012 at 6:34

    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.

  5. tatica says

    Thursday July 19th, 2012 at 5:57

    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

  6. Haschek says

    Thursday July 19th, 2012 at 3:04

    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 :)

  7. PabloT says

    Wednesday July 18th, 2012 at 16:46

    Podes probar con este :)

    http://leaverou.github.com/prefixfree/

  8. tatica says

    Wednesday July 18th, 2012 at 16:38

    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?

  9. PabloT says

    Wednesday July 18th, 2012 at 16:30

    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 :)

  10. tatica says

    Wednesday July 18th, 2012 at 16:23

    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

  11. Santiago Burgos says

    Wednesday July 18th, 2012 at 15:45

    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

  12. tatica says

    Wednesday July 18th, 2012 at 15:22

    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

  13. PabloT says

    Wednesday July 18th, 2012 at 15:17

    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’

Leave a Reply Cancel reply

Footer

Free college writing tips for students and teachers.
Internationalvaquero.com - online writing help for students.

About Tatica

I’m a full-time designer, photographer and community people. I love to analyze how this interactive world works. I’m not a programmer, however that’s how I started. I have been in the field since 2005 and have been loving every minute of it.
I love to learn and teach what I know about FLOSS and I enjoy meeting new friends from all around the world.
  • Subscribe
  • Privacy
  • Contact
COPYRIGHT © TATICA 2021
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.