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>>
Showing posts with label Form Tag. Show all posts
Showing posts with label Form Tag. Show all posts
Saturday, July 1, 2017
CSS Position Properties
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>>
Subscribe to:
Posts (Atom)
