Showing posts with label Block and Inline Element. Show all posts
Showing posts with label Block and Inline Element. Show all posts

Saturday, July 1, 2017

CSS Position Properties

CSS Position Properties

Content

* Position Properties
* Static Positioning
* Fixed Positioning
* Relative Positioning
* Absolute Positioning
* Design page layout
* Other Common Properties
* Creating icon on Title

Position Properties

* The CSS positioning properties allow you to position an element
* Static positioning
* Fixed positioning
* Relative positioning
* Absolute positioning

Static Positioning

* HTML elements are positioned static by default
* A static positioned element is always positioned according to the normal flow of the page
* Static positioned elements are not affected by the top, bottom, left, and right properties

Fixed Positioning

* An element with fixed position is positioned relative to the browser window
* It will not move even if the window is scrolled

Example

<html>
 <head>
  <title> Fixed Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2 {background-color:lightblue;}
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5 {background-color:gray;}
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Relative Positioning

* A relative positioned element is positioned relative to its normal position

Example
<html>
 <head>
  <title> Relative Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2
   {
    background-color:lightblue;
    position:relative;
    left:50px;
    top:100px;
   }
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5 {background-color:gray;}
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION<br/>
    This is positioned 50px from left and <br/>
    100px from top relative to its normal position
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Absolute Positioning

* An absolute position element is positioned relative to the first parent element that has a position other than static.

Example

<html>
 <head>
  <title> Absolute Position</title>
  <style type="text/css">
   div { width:300px; height:300px;}
   #d1 {background-color:lightgreen;}
   #d2
   {
    background-color:lightblue;
    position:relative;
    left:50px;
    top:100px;
   }
   #d3 {background-color:orange;}
   #d4 {background-color:pink;}
   #d5
   {
    background-color:gray;
    width:800px;
    position:relative;
    top:10px;
    left:10px;
   }
   #d5 #d51
   {
    background-color:khaki;
    width:750px;
    height:200px;
    position:absolute;
    top:50px;
    left:25px;
   }
   #d5 #d51 #d511
   {
    background-color:maroon;
    width:700px;
    height:50px;
    position:absolute;
    top:20px;
    left:25px;
    color:white;
   }
   #d6
   {
    background-color:red;
    position:fixed;
    top:100px;
    left:50%;
   }
  </style>
 </head>
 <body>
  <div id="d1">
    1st DIVISION
  </div>
  <div id="d2">
    2nd DIVISION<br/>
    This is positioned 50px from left and <br/>
    100px from top relative to its normal position
  </div>
  <div id="d3">
    3rd DIVISION
  </div>
  <div id="d4">
    4th DIVISION
  </div>
  <div id="d5">
    5th DIVISION
      <div id="d51">
        5.1 DIVISION
          <div id="d511">
            5.1.1 DIVISION
          </div>
      </div>
  </div>
  <div id="d6">
    6th DIVISION<br/>
    This is fixed
  </div>
 </body>
</html>

Define Page Layout

* Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
* For a web page, page layout is important to design so that
* Contents should appear at the right places
* Content should be organized and doesn’t look messy
* Generally website pages follow the same layout.
* Here is one example of layout

Example

<html>
 <head>
  <title> Layout 1</title>
  <style type="text/css">
   body
   {
    background-color:lightcyan; 
   }
   #main_container
   {
    width:90%;
    height:100%;
    margin:auto;
    padding:0px;
    margin-top:0px;
    background-color:lightgreen;
    position:relative;
    top:0px;
   }
   #top_container
   {
    background-color:olive;
    width:100%;
    height:50px;
    position:absolute;
    top:0px;
   }
   #second_top_container
   {
    background-color:purple;
    width:80%;
    height:200px;
    position:absolute;
    top:50px;
    left:100px;
   }
   #mid_container
   {
    position:absolute;
    top:250px;
    width:100%;
    min-height:400px;
    background-color:green;
   }
   #mid_left_container
   {
    position:absolute;
    top:0px;
    width:20%;
    min-height:400px;
    background-color:khaki;
   }
   #mid_right_container
   {
    position:absolute;
    left:20%;
    top:0px;
    width:80%;
    min-height:400px;
    background-color:maroon;
   }
  </style>
 </head>
 <body>
  <div id="main_container">
   main_container
       <div id="top_container">
    top_container
    Place for site title, menu and welcome message
       </div>
       <div id="second_top_container">
    Second_top_container
    Place for Banner
       </div>
       <div id="mid_container">
           <div id="mid_left_container">
        Place for links
           </div>
           <div id="mid_right_container">
        Primary content
           </div>
       </div>
  </div>
   </body>
</html>

Other common properties

Width : It specifies the width of the element.
Height:  It specifies the height of the element
Display: display property allows to make an element block, inline, as a table cell etc
Padding: padding value is gap between inner boundary and content
Margin: it is a space leaving outside the element boundary
Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1.

Creating icon on title

Small icon near the title in the title bar can be added with the following code:

* <link rel="shortcut icon" type="image/x-icon" href="scaicon.jpg" />

Here scaicon.jpg is an image file, you can replace it with any of your image. Image size should be edited to 32x32 or 16 x 16 pixels.

<<Prev     Home     Next>>

CSS Properties

CSS Properties
Content
* Text Properties
* Background-properties
* Border- Properties
* Anchor Properties
* List Style Properties
* Box Model
* Other Common Properties

Text Properties
* CSS provides many properties related to text for formatting and decoration. Some of them are:

 - Color
 - Text-alignment
 - Text-decoration
 - Text-transformation
 - Font-style
 - Font-size
 - Font-weight
 - Font-family
 - Text-shadow

Color

Color property is used to set the color of the text.

* The color property is used to set the color of the text.
* Example:

 - body {color:blue;}
 - h1 {color:#00ff00;}
 - h2 {color:rgb(255,0,0);}

Text-alignment

* The text-align property is used to set the horizontal alignment of a text.
* Text can be centered, or aligned to the left or right, or justified.
*  h1 {text-align:center;}

Text-decoration

* The text-decoration property is used to set or remove decorations from text.
* The text-decoration property is mostly used to remove underlines from links for design purposes
* a {text-decoration:none;}
* h1 {text-decoration:overline;}
* h2 {text-decoration:line-through;}
* h3 {text-decoration:underline;}
* h4 {text-decoration:blink;}

Text-transformation

* The text-transform property is used to specify uppercase and lowercase letters in a text.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Font-style

* The font-style property is mostly used to specify italic text.
* This property has following values:
* normal - The text is shown normally
* italic - The text is shown in italics

Font-size

* The font-size property sets the size of the text.
* p{font-size:24px;}

Font-weight

* The font-weight property sets the boldness of the text
* p{font-weight:bold;}

Font-family

* The font family of a text is set with the font-family property.
* Example
* p{font-family:”Georgia”;}

Text-shadow

* The text-shadow property applies shadow to text.
* text-shadow:h-shadow v-shadow blur color;

p
{
 text-shadow:20px 20px 5px gray;
}

CSS Background Properties

* CSS background properties are used to define the background effects of an element.
* CSS properties used for background effects:
 - background-color
 - background-image
 - background-repeat
 - background-attachment

background-color

* The background-color property specifies the background color of an element.
* The background color of a page is defined in the body selector:
* Colors can be specified by a hex value, RGB value or by color name

body
{
    background-color:aqua;
}

background-image

* The background-image property specifies an image to use as the background of an element
* By default, the image is repeated so it covers the entire element.
* body {background-image:url('paper.gif');}

background-repeat

* By default, the background-image property repeats an image both horizontally and vertically
* Some images should be repeated only horizontally or vertically, or they will look strange

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
}

background-attachment
* When the background attachment is fixed image will not scroll and it is fixed though you are moving scroll bar

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
background-attachment:fixed;
}

CSS Border Properties

HTML elements can have borders and with the help of CSS properties we can decorate html element border. Here are the properties:

* Border-color
* Border-style
* Border-radius
* Border-spacing
* Border-width
* Border-collapse
* Border-color

This property is used to set color of border of an HTML element.

Colors can be specified by a hex value, RGB value or by color name
a
{ border-color:blue;}
border-style

CSS provides a variety of style properties to change the style of border of an HTML element.

Some of the possible values of border-style property are:

 - Dotted
 - Dashed
 - Solid
 - Groove
 - Double
 - Rigid
 - Inset
 - Outset
a
{
border-color:blue;
border-style:dotted;
}

* In CSS it is possible to specify different borders for different sides:
* Border-left-style
* Border-right-style
* Border-top-style
* Border-bottom-style

border-radius
* Border-radius property specify radius of corner of the border
a
{
border-color:blue;
border-style:dotted;
border-radius:10px;
}

border-spacing
* It Specify space between table cells.

border-width

* It Specify thickness of the border
a
{
border-color:blue;
border-style:dotted;
border-width:2px;
}

border-collapse
* The border-collapse property sets whether the table borders are collapsed into a single border or separated. The value of this property could be collapse

Anchor properties

* Properties on anchor
 - a:link - a normal, unvisited link
 - a:visited - a link the user has visited
 - a:hover - a link when the user mouses over it
 - a:active - a link the moment it is clicked

Example
a:link {color: darkgray;}
a:visited {color: silver;}
a:hover {color: orange;}
a:active {color: red;}

List Style Properties

* Following are the common properties to style lists
 - List-style-image
 - list-style-image:url('sqpurple.gif');
 - List-style-position
 - ul { list-style-position:inside; }
 - List-style-type
 - ul.circle {list-style-type:circle}
 - ul.square {list-style-type:square}
 - ol.upper-roman {list-style-type:upper-roman}
 - ol.lower-alpha {list-style-type:lower-alpha}

Box Model

 - All HTML elements can be considered as boxes
Other common properties Width : It specifies the width of the element. Height:  It specifies the height of the element Display: display property allows to make an element block, inline, as a table cell etc Padding: padding value is gap between inner boundary and content Margin: it is a space leaving outside the element boundary Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1. <<Prev     Home     Next>>

Introduction to CSS

Introduction to CSS

* CSS is Cascading Style Sheet
* HTML defines what all elements to be displayed on the web page
* CSS defines how to display HTML elements
* The World Wide Web Consortium (W3C) created CSS
* Currently we are using CSS 3
* We can write CSS in a separate file and link it to our HTML file or embed CSS in HTML file itself

CSS Syntax

* A CSS syntax consist of only three parts
selector { property: value }
* The selector is normally the HTML element you want to style.
* A property is a type of attribute of HTML tag.
* Values are assigned to properties.

Example
p
{
    color:red;
    text-align:center;
}

CSS Comments

* You can put CSS comments in C style using /* and */ to depict the start and end of the comment respectively

Example

p
{
    color:red;  /* this sets color red */
    text-align:center;  /* this sets text at the center */
}

Selection of HTML elements

In CSS we can select an HTML element via following three ways

* Through tag Name
* Through id
* Through Class

Through Tag Name
You can choose HTML element by using its tag name.
Example: To select all paragraphs.

p
{
    color:red;
    text-align:center;
}

Through Id
* id is a standard attribute for HTML elements.
* we need to style a particular HTML element, we can use id of that element in selector to distinguish it from other similar elements.
* The id selector uses the id attribute of the HTML element, and is defined with a "#".

Example: para1 is value of id attribute of some HTML element

#para1
{
     text-align:center;
     color:red;
}

Through Class

* The class selector is used to specify a style for a group of elements
* Unlike the id selector, the class selector is most often used on several elements.
* The class selector uses the HTML class attribute, and is defined with a "."

Example: centre is value of class attribute of a group of HTML elements

.centre
{
  text-align:centre;
}

Ways to insert CSS

* There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS

External CSS

* In this we place CSS code within a separate file and save it with .css extension.
* An external style sheet is ideal when the style is applied to many pages.
* With an external style sheet, you can change the look of an entire Web site by changing one file.
* The <link> tag goes inside the head section
* <head>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
* Your style sheet should be saved with a .css extension.

<head>
<title><title>
<link rel="stylesheet" type="text/css" href="Path To css file" />
</head>
<body>

Internal CSS

* An internal style sheet should be used when a single document has a unique style
* You define internal styles in the head section of an HTML page, by using the <style> tag

Example:
<head>
<style type="text/css">
     h1 {color:sienna;}
     p {margin-left:20px;}
     body {
     background-image: url("images/back40.gif");
     }
</style>
</head>

Inline CSS

* To use inline styles you use the style attribute in the relevant tag.
* The style attribute can contain any CSS property
* With this method each HTML file contains the CSS code needed to style the page.
* Meaning that any changes we want to make to one page, will have to be made to all.

Example:

<p style="color:red;margin-left:10px;">
 This is a paragraph.
</p>


<<Prev     Home     Next>>

More HTML Tags

Table Tag

* <table> defines a table
* <th> Defines a table header
* <tr> Defines a row in a table
* <td> Defines table data

Attributes of Table Tag

* border  (It specifies the width of the border around a table)
* cellpadding  (Specifies the space between the cell wall and the cell content)
* cellspacing   (Specifies the space between cells)
* align (values can be left, center or right)
* width (specifies the width of a table)
* bgcolor  (specifies a background color of a table)

Color name (“pink”)
Hex code of color name (“#ffA000”)
rgb number ( “rgb(255,0,0)”)

Attributes of <th> and <td> Tag

* align  =left, right, center, justify
* bgcolor    =color name, rgb(), hex code
* colspan    =number
* rowspan    =number
* height =pixel or percentage
* valign =top, middle, bottom
* width  =pixel or percentage

Example

<html>
<head>
 <title> Table Example </title>
 </head>
 <body>
   <table border=”5px” cellspacing=”0px”>
    <tr bgcolor=”khaki”>
        <th> S. No. </th>
        <th> Name </th>
        <th> Age </th>
    </tr>
    <tr>
        <td> 1 </td>
        <td> Rahul </td>
        <td> 19 </td>
    </tr>
    <tr>
        <td> 2 </td>
        <td> Anmol </td>
        <td> 18 </td>

    </tr>
    <tr>
        <td> 3 </td>
        <td> Swati </td>
        <td> 17 </td>
    </tr>
   </table>
 </body>
</html>

Block and Inline Element

* In visual browsers, displayable elements can be rendered as either block or inline.
* Block elements have automatic break line feature.
* Inline elements do not have automatic line change feature.

Example

Block Elements: Paragraph, heading, list etc

Inline elements: image, anchor etc

Div and Span Tag

* <div> defines a section in a document
* <span> defines a section in a document
* The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

Form Tag

* HTML forms are used to pass data to a server.
* A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
* A form can also contain select lists, textarea, fieldset, legend, and label elements.
* The most important form element is the input element.
* To create an HTML form we use the <form> tag.

Syntax :
<form>

input controls

</form>

Attributes of form tag

* Action

The required action attribute specifies where to send the form-data when a form is submitted.

* Method

Specifies how to send form-data

The form-data can be sent as URL variables (with method="get") or as HTTP post (with method="post").

Example

<html>
  <head>
     <title> Form example </title>
  </head>
  <body>
     <form action=“sum.php” method=“get”>
         </form>
  </body>
</html>

Tags within form tag

* <input>
* <button>
* <option>
* <select>
* <textarea>

Input tag

* The input element is used to select user information
* An input element can vary in many ways, depending on the type attribute

    <input type=“text” />
    <input type=“radio” />
    <input type=“password” />
    <input type=“submit” />
    <input type=“checkbox” />
    <input type=”file” />
    <input type=“date” />
    <input type=“month” />
    <input type=”time” />
    <input type=“hidden” />
    <input type=”search” />
    <input type=”color” />
    <input type=“image” />
    <input type=”number” />

Textarea tag

* The <textarea> tag defines a multi-line text input control.
* A text area can hold an unlimited number of characters.
* The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS height and width properties

Select and option tags

* The <select> tag is used to create a select list (drop-down list).
* The <option> tags inside the select element define the available options in the list.

Button tag

* The <button> tag defines a push button

Example (For better alignment elements related to form resides inside the table tag)

<html>
<head>
<title> Form example </title>
</head>
<body>
   <form action=“registration.php” method=“post”>
      <form action="registration.php" method="post">
   <table>
    <tr>
     <td>Name</td>
     <td><input onkeyup="fun1()" type="text" name="user"/></td>
     <td id="msg1"></td>
    </tr>
    <tr>
     <td>Password</td>
     <td><input type="password" name="pwd"/></td>
    </tr>
    <tr>
     <td>Gender</td>
     <td><input type="radio" name="gender"/>M
         <input type="radio" name="gender"/>F</td>
    </tr>
    <tr>
     <td>Course</td>
     <td><input type="checkbox" name="C"/>C
     <input type="checkbox" name="CPP"/>C++</td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" onclick="return validate()" value="Register"/>
     <input type="reset" /> </td>
    </tr>
   </table>
         </form>
</body>
</html>

In the above HTML code, as soon as user presses the submit button, form data will be send to the server. Data will be send to a server so that it can get processed there. The php script that will use the data is mentioned in action attribute of form tag

<<Prev     Home     Next>>