carlos-sanchez

/* enlaces externos
 ^=  indica que queremos dar estilo a aquellos enlaces que comiencen por http://
*/
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails
^= indica que queremos dar estilo a aquellos enlaces que comiencen con mailto:
*/

carlos-sanchez

/*
Muchos desarrolladores se olvidan de la etiqueta HTML cuando tratan de dar estilo a su aplicación, pero dar estilo a la etiqueta HTML puede ser una de las cosas más importantes.
Este fragmento de código CSS se asegura de que la barra de desplazamiento siempre aparezca (por lo que no hay ningún "salto" cuando cambia el tamaño de página) e impide que los navegadores móviles ajusten el tamaño de la fuente de la página.
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }



/*
Cambiar el color de resaltado o selección

carlos-sanchez

font: bold italic small-caps 1em/1.5em verdana,sans-serif

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];
            
Notice the forward slash, similar to how font shorthand and border-radius can be written. The slash allows you to include a background-size value after the position in supporting browsers.

In addition, you also have up to two optional declarations for background-origin and background-clip.

carlos-sanchez

Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...

First of all, you'll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

carlos-sanchez

//Add a CSS class to a specific element
$('#myelement').addClass('myclass');

//Removing a CSS class from a specific element
$('#myelement').removeClass('myclass');

//Check if a specific element has a CSS class
$(id).hasClass(class)

carlos-sanchez

// JS Option 
window.location = "http://new-website.com";

carlos-sanchez

    <select>
    <option value=" " selected>(please select a country)</option>
    <option value="--">none</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>

carlos-sanchez

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

carlos-sanchez

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

carlos-sanchez

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>