CSS - Border

Borders can be applied within the body of HTML Document. It allows to specify the style & color of the border. 

1. Border Style
• none - Defines no borders
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines two borders outline with same width
• groove - Defines 3D groove border
• ridge - Defines 3D ridge border
• inset - Defines 3D inset border
• outset - Defines 3D outset border


2. Border Width
   border-width property is used to set values for the border width


3. Border Color
   border-color property used to set border color


4. Different side Borders
• Border-top
  Ex:
  border-top-style : dotted;


• Border-right
  Ex:
  border-right-color : red;

CSS - Padding

Padding is the property for space inside of the element. 

Ex: 
p{
   padding : 3px;
}

Following are the properties related to the padding

• padding-top
• padding-bottom
• padding-right
• padding-left
  

CSS - Margin

Margin is the property for space outside of the element. 

Ex: 
p{
   margin : 3px;
}

Following are the properties related to the margin

• margin-top
  Margin-top property specify the space from the top border to the text.
• margin-bottom
  Margin-bottom property specify the space from the bottom border to the text.
• margin-right
  Margin-right property specify the space from the right side border to the text.
• margin-left
  Margin-left property specify the space from the left side border to the text. This is the default margin. Same output comes with margin-left & margin.

HTML with Javascript

Javascript is a client-side scripting language and can be used with HTML.

alert
Web browser displays Message Window with the event of calling javascript.

<a href = "http://programmingforbeginers.blogspot.com" onclick = "alert('This is a Javascript message')">Programming Languages for Beginners</a>

CSS - Styles for Text

• Font color
  This property specify the color of the texts.
  Eg:
  body{
     color : red;
  }


• Font Family
  
  font-family property specifies the font face of the texts. Most of them uses arial, Verdana, Times New Roman. You can specify morethan one font seperated by commas. Purpose is that if there is not available the font you specified as first then browser will go to the next font. Font name is not a one word then specify it within the quoted marks.
  Ex:
  p
  {
     font-family: Times, "Times New Roman", serif;
  }


• Font Size
  font-size property specifies the Size of the Text. It is important to manage font size in the web page. Don't use font sizes for the paragraph looks like a heading or make headings as a paragraph. Use proper HTML tags for the formattings. Value of the Font can be either relative or absolute.
• Absolute Size
  Set the text to specified size which is useful for the known out put text sizes
• Relative Size
  Set the size relative to the elements and allows users to change the text sizes in the browser. 
Ex:
p
{
   font-size : 12px;
}

HTML - Text Formatings

• Div - Formatting of Block Text
  The <div> Tag provides easy way to refer a block text.This element is very important when you are applying styles to block of text.
  Ex:
  <div align = "center">
     Programming Languages for Beginners <br />
     Priyal Kulathilake
     SriLanka
  </div>


• Span Formatting Inline Text
  The <span> element selects inline text to apply styles.
  Ex :
     <div align = "center">
        This is my Blog Site <span style = "color : Blue">Programming for Languages Beginners
        </span> for the absolute beginners of Web Programming   </div>
  
  Out put:
  
  This is my Blog Site Programming Languages for Beginners for the absolute beginners of Web Programming
• Blink
  Displays enclosed text as blinking on and off approximately once a second.
  Ex:
     <blink style = "color : Blue">Programming Languages for Beginners</blink>
  
  Output
  Programming Languages for Beginners


• Marquee
  Displays scrolling text in a marquee style. That displays a moving banner.
  Ex:
     <marquee align = "left" loop = "infinite" behavior = "bounce" bgcolor = "orange" direction = "right" style = "color : Blue">Programming Languages for Beginners</marquee>
  
  direction: direction of the moving text
      Ex: Left to Right, Top to bottom
  behavior : behaviour of the marque
      Ex: Scroll, Slide, Alternate, Bounce

Will be continue

CSS - Colors

Defining Color values of the CSS as same as the HTML. You can define colors 3 ways

1. color : white
2. color : rgb(0, 0, 0)
3. color : #000000

Font Color

We can specify the style for font color by using "color" property for the each selector

Ex : 

body{

   color : yellow;

} 

Background Color

We can specify the style for Background color by using "background-color" property for the each selector

Ex : 

body{

   background-color : orange;

}