CSS display

With the display property you can specifies if or how an HTML element is displayed in the web page.
- Values: - Syntax:
display: value;
Example (remove a DIV, displays <a> tags as block elements and <li> with inline):
#idd { display: none; }
.a_block { display: block; }
#idu li { display: inline; }

<h4>Example CSS display </h4>
<p>In this HTML page a Div is not shown, displays A tags as block elements and LI with inline.</p>

<div id='idd'>Removed content.</div>
<a href='//coursesweb.net/css' title='CSS course' class='a_block'>CSS course</a> <a href='//coursesweb.net/html' title='HTML course' class='a_block'>HTML course</a>
<ul id='idu'>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>

CSS visibility

The visibility property can control if an element is visible or not. Even if the element is hidden, still affects layout and will take up space on the web page, where it should to be displayed.

- Values: - Syntax:
visibility: value;
Example (make a <span> invisible):
 #idd span { visibility: hidden; }

<h4>Example CSS visibility</h4>
<div id='idd'>This row contains a text <span>in a SPAN tag</span> that is hidden but still takes up space.</div>

CSS clip - Define the visible portion of an element

Defining the visible surface of an element determines its visible portion. The remaining contents of that element does not disappear, but is invisible to the visitor.
The element must have set position:absolute, then, to define the visible region it's used the clip property with rect value that sets the shape of the visible region.
- Values: - Syntax:
clip: value;
#idd {
position: absolute;
clip: rect(0, 200px, 23px, 60px);

<h4>Example CSS clip</h4>
<div id='idd'>Free CSS: coursesweb.net/css</div>

Daily Test with Code Example

What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Display and Visibility

Last accessed pages

  1. PHP Code Snippets (5556)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (54771)
  3. PHP XML DOM (1431)
  4. Get Duration of Audio /Video file before Upload (9302)
  5. Redirects (2016)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (365)
  2. Tabs effect with CSS (354)
  3. Contact page - CoursesWeb (353)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (134)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (82)