All posts by suryakant ubhe

How to use Color in CSS?

CSS Color Property is used for defining the color of the text, background and border.

Color Value can be specified in below formats We will see these formats in more detail.These formats are explained in more detail within the following sections:

CSS Color – Hex Codes

The hex number is prefixed with a hash character (#). It is a six digit notation of a color value( #RRGGBB)
For eg. Hex code for Magenta is #FF00FF

CSS Colors – Short Hex Codes

This is a compressed version of the six-digit notation(#RGB)
For eg. Short Hex code for Magenta now becomes #F0F

CSS color – RGB Values

rgb() property is used to define RGB value. It is denoted by 3 values respectively for Red, Green and Blue. And the value is an integer between 0 to 255. 0 being the lowest and 255 is highest value. It can also be in percentage format
For eg. Magenta is written as rgb(255,0,255) and also can be denoted as rgb(100%,0%,100%)

RGB & hexadecimal values can be taken using any graphical tool like adobe photoshop, advanced paint brush or any color picker like ColorZilla.

While designing colors can be applied to elements by using properties like color, background-color and border-color.

A paragraph with red background with white text and black border could look like this:

 p{
  color: #FFFFFF;
  background-color: #FF0000;
  border-color:#000000
  }

Please note all browsers does not support rgb() property, hence it is recommended not to use it.

 

How to start HTML ?

html-intro

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad.

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”

Then under “Open and Save”, check the box that says “Ignore rich text commands in HTML files”.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.


<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

img_notepad

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

 

img_saveas

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

img_chrome