Skip to main content

Learn CSS tricks for beginner : Colours

The following values, to specify full-on as red-as-red-can-be, all produce the same result:
  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00
Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,red, silver, teal, white, and yellow. transparent is also a valid value.








The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255 being the highest level (full red, for example). These values can also be a percentage.
Hexadecimal (previously and more accurately known as “sexadecimal”) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00, #cc9966 becomes #c96, etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.








color and background-color

Colors can be applied by using color and background-color (note that this must be the American English “color” and not “colour”).
A blue background and yellow text could look like this:

h1 {
    color: yellow;
    background-color: blue;
}
These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:
body {
    font-size: 14px;
    color: navy;
}


h1 {
    color: #ffc;
    background-color: #009;
}



Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1 element) have changed to yellow and blue.



You can apply the color and background-color properties to most HTML elements, including body, which will change the colors of the page and everything in it.
Labels:

Popular posts from this blog

learn html for intermediate : Definition Lists

The HTML Beginner Tutorial looked at unordered lists and ordered lists , but, much like Peter Cushing’s Doctor Who,  definition lists  are quite often forgotten. This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, generally, but where there is a list of terms and descriptions (such as a glossary), a definition list is your go-to-element. dl  gets the ball rolling, similar to the  ul  and  ol elements, establishing the list. Rather than containing  li  elements, though, definition lists have  dt  elements, which are the  definition terms , followed by  dd  elements, which are definition descriptions  associated to the  dt elements. There doesn’t have to be one  dt  followed by one dd , there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of  dt ’s followed by...
Read more

learn advanced html : Accessible Forms

Labels Each form field should have its own explicit label . The  label  tag sorts this out, with a  for attribute that associates it to a  form  element: < form > < label for = "yourName" > Your Name </ label > < input name = "yourName" id = "yourName" > <!-- etc. -->
Read more

learn advanced html Tables: Columns, Headers, and Footers

The Columns Strike Back Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite rejected. Luckily for those eager columns though, the colgroup  and  col  tags have come to their rescue. These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or colored differently, as, without this, you would need to target individual cells.
Read more