Css Course


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):
<style>
#idd { display: none; }
.a_block { display: block; }
#idu li { display: inline; }
</style>

<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>
</ul>

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):
<style>
 #idd span { visibility: hidden; }
</style>

<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;
Example:
<style>
#idd {
position: absolute;
clip: rect(0, 200px, 23px, 60px);
}
</style>

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Display and Visibility

Last accessed pages

  1. Star shapes with CSS (11114)
  2. Follow the mouse cursor with a DIV inside a Parent (8273)
  3. CSS Course - Free lessons (21648)
  4. SHA256 Encrypt hash in JavaScript (31103)
  5. Calling Function and Class Method with Name from String (5710)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (318)
  2. PHP Unzipper - Extract Zip, Rar Archives (110)
  3. Read Excel file data in PHP - PhpExcelReader (101)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)
Chat
Chat or leave a message for the other users
Full screenInchide