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">

What is the HTML table?

HTML table is used to display tabular data. It is always a good practice to use table when the data structure is tabular. Following is an example of a HTML table:

  <table border="1" cellpadding="10">
      <tr>
          <th>Name</th>
          <th>Age</th>
      </tr>
      <tr>
          <td>Joe Smith</td>
          <td>29</td>
      </tr>
      <tr>
          <td>Jennifer Lawrence</td>
          <td>22</td>
      </tr>
  </table>

What is unordered list and list item?

<ul> represents the unordered list and <li> represents the list item. This <ul> and <li> are very useful in HTML. They are one of the most frequently used HTML tags. See the examples below:

  <ul>
    <li>CPC</li>
    <li>CrPC</li>
    <li>Evidence Act</li>
  </ul>

Output:

• CPC
• CrPC
• Evidence Act

What is an anchor and how can we create a link to Facebook?

The anchor tag is represented with <a>. This tag mainly used for creating links. It has an attribute called href that specifies the link value. The anchor is an inline element that has and end tag too. See the following example:

<a href="https://facebook.com">Facebook</a>

The above code will open the link in the save tab but if we want to open it in a separate tab then we need to add target attribute like below:

<a href="https://facebook.com" target="_blank">Facebook</a>

What are the attributes of HTML tags?

HTML tags can have attributes and attributes are written with tag. Attributes are written in a name="value" pair. See the example below:

<img src="w3schools.jpg" width="104" height="142">

In the example above the src is an attribute, the width is an attribute and the height is also an attribute. 

What is an alt attribute of an image?

The alternative text is known as alt attribute in HTML image tag. When the source of the HTML image tag is missing then the alternative text is shown in place of image. See the example below:

<img src="https://i.stack.imgurr.com/cUizs.jpg" alt="Beroza Paul"> 

Output:
Beroza Paul

What is an img tag in HTML and how we can display images from local and remote location?

In HTML it is possible to show images using img tag. The images can be from local or remote locations. Every image tag has a src attribute. The value of the src attribute can be from local or from remote locations. Following is an example of an image tag:

Image from remote location:
<img src="https://i.stack.imgur.com/cUizs.jpg">

Output


Image from local location:
In case of local location it needs to specify the correct path in the source attribute. See the example below:
<img src="c://photo/myphoto.jpg">

What are the block and inline HTML tags?

The HTML tags has two different types, the block elements and the inline elements.

Block element: 
The block element takes the entire width of the page and does not allow any element on the same line. Following are some block elements:

• <div>
• <h1> - <h6>
• <p>
• <form>

Inline element: 
The inline element takes only the space it needs and allow any element beside it. Following are some inline elements:

• <span>
• <a>
• <img>

What are the most frequently used HTML tags?

In HTML it has 10 most frequently used tags. There are other HTML tags but the following 10 HTML tags are used very often. It is always a good idea to learn as many HTML tags as possible but the following 10 tags will be good to go.

<h1> - <h6>	Heading
<p>	Paragraph
<i>	Italic
<b>	Bold
<a>	Anchor
<ul> & <li>	Unordered List & List Item
<blockquote>	Blockquote
<hr>	Horizontal Rule
<img>	Image
<div>	Division

The commonly used HTML tags can be found from the following link: Commonly user HTML tags

How to create a HTML document?

A HTML file needs to have a doctype and the doctype will be html. It will look like below:

<!DOCTYPE html>

It also needs to have a head tag and inside head tag the file needs to have a title tag.
At last it needs to have a body tag like below:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Put the above code in a file and save the file with .html extension.