HTML5: Color picker

This entry is part 24 of 34 in the series HTML5

HTML5 provides a native color picker but currently, only Chrome browser supports this feature.

<input type='color' id='color_id' name='color'/>

To use color picker, we use input type=’color’.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Color picker</title>
</head>
<body>
<form>
    <label for='color_id'>Pick A Color</label>
    <input type='color' id='color_id' name='color'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

HTML Table: Table background color

This entry is part 14 of 16 in the series HTML Table

To make a particular row or column to stand out in a table, we can put a background color to it.
Output

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table style='width: 60%; border-style:solid; border-width: 1px'>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr style='background-color: wheat'>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>

CSS: Specifying border width and color

This entry is part 22 of 26 in the series Basic CSS

Codecrawl.com-Border
By default a border is black and 4 pixels wide.

To change the color and width, we use the following highlighted line.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Border</title>
</head>
<body>

<p style='border: 5px solid purple; padding: 5px'>Ushuaia</p>

<p style='border: solid'>Default</p>

</body>
</html>

 

HTML: Background color

This entry is part 20 of 34 in the series HTML

To insert the background color for an entire page, insert style=’background-color: color’ into the <body> tag as below.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML colors</title>
</head>
<body style='background-color: gray'>

<h4>My background color is gray</h4>

</body>
</html>