Frequently used CSS box properties

CSS box properties are really important for learning CSS. In CSS we have seen many properties like color properties, background properties, text properties, table properties, box properties etc. Following are most used CSS box properties:

Property	Description	CSS
bottom	Specifies the bottom position of a positioned element	2
clear	Specifies which sides of an element where other floating elements are not allowed	1
display	Specifies how a certain HTML element should be displayed	1
float	Specifies whether or not a box should float	1
height	Sets the height of an element	1
left	Specifies the left position of a positioned element	2
margin	Sets all the margin properties in one declaration	1
margin-bottom	Sets the bottom margin of an element	1
margin-left	Sets the left margin of an element	1
margin-right	Sets the right margin of an element	1
margin-top	Sets the top margin of an element	1
max-height	Sets the maximum height of an element	2
max-width	Sets the maximum width of an element	2
min-height	Sets the minimum height of an element	2
min-width	Sets the minimum width of an element	2
overflow	Specifies what happens if content overflows an element's box	2
overflow-x	Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area	3
overflow-y	Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area	3
padding	Sets all the padding properties in one declaration	1
padding-bottom	Sets the bottom padding of an element	1
padding-left	Sets the left padding of an element	1
padding-right	Sets the right padding of an element	1
padding-top	Sets the top padding of an element	1
position	Specifies the type of positioning method used for an element (static, relative, absolute or fixed)	2
right	Specifies the right position of a positioned element	2
top	Specifies the top position of a positioned element	2
visibility	Specifies whether or not an element is visible	2
width	Sets the width of an element	1
vertical-align	Sets the vertical alignment of an element	1
z-index	Sets the stack order of a positioned element	2

What is a textarea field in HTML? Give an example.

Textarea field is used to get bigger textual information from users. It has rows and cols attributes that defines the textarea’s size.

<textarea rows="10" cols="20"></textarea>

What is a select field? Give an example.

Select field always has options to choose desired item. Following is an example of select field:

<select>
  <option>Active</option>
  <option>Inctive</option>
</select>

If we want keep an option selected then we can write the keyword called selected in that option. See the code below:

<select>
  <option>Active</option>
  <option selected>Inctive</option>
</select>

What is an input element in HTML form? Explain input elements with example.

An input element is a field that is used to get user information in a HTML form. Following is an example of input element:

<input type=”text” name=”email” id=”email”>

Input element can have different types. Those types are:

Value	Description
button	Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox	Defines a checkbox
color	Defines a color picker
date	Defines a date control (year, month and day (no time))
datetime	The input type datetime has been removed from the HTML standard. Use datetime-local instead.
datetime-local	Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email	Defines a field for an e-mail address
file	Defines a file-select field and a "Browse..." button (for file uploads)
hidden	Defines a hidden input field
image	Defines an image as the submit button
month	Defines a month and year control (no time zone)
number	Defines a field for entering a number
password	Defines a password field (characters are masked)
radio	Defines a radio button
range	Defines a control for entering a number whose exact value is not important (like a slider control)
reset	Defines a reset button (resets all form values to default values)
search	Defines a text field for entering a search string
submit	Defines a submit button
tel	Defines a field for entering a telephone number
text	Default. Defines a single-line text field (default width is 20 characters)
time	Defines a control for entering a time (no time zone)
url	Defines a field for entering a URL
week	Defines a week and year control (no time zone)

What are the form elements?

The form elements are the elements that we usually use in a HTML form. Following are most used HTML form elements:

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

What are the most frequently used CSS selector?

The most frequently used CSS selector are:

1. Element selector (HTML tag selector)
2. Class selector 
3. ID selector    

Element selector (HTML tag selector):

<div class="first" id="first">First content</div>

<style>

div{

   background-color:blue;

}

</style>

Class selector:

<div class="first" id="first">First content</div>

<style>

.first{

   background-color:blue;

}

</style>

ID selector:

<div class="first" id="thisID">First content</div>

<style>

#thisID{

   background-color:blue;

}

</style>

How many ways we can write css?

We can write CSS in three different ways. They are:

1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS:
<body style="background-color:#ff0000;"> </body>

2. Internal CSS:
<body> </body>
<style> 
body{
  background-color:#ff0000;
} 
</style>

3. External CSS:
<link rel="stylesheet" type="text/css" href="style.css">