CSS

• A website can implement visual styling using one or more sections of CSS code. Developers can include this code within the Web page markup, or within a separate file which is linked to from within the page head section as follows:
  
  <link rel="stylesheet" type="text/css" href="/links/?u=mypagestyle.css" />
  
  This code links a file saved as "mypagestyle.css" which is stored in the same directory as the page itself. Within the CSS file, developers can include any styling properties they like, determining the appearance and layout of the elements in the HTML markup.
  
  

Identifiers

• CSS code uses identifiers to style particular HTML elements. The following sample HTML markup demonstrates creating an element with a class attribute:
  
  <div>Here are some words to hide</div>
  
  Within the CSS code associated with this page, the following syntax identifies any elements with the specified class attribute:
  
  .hide {
  
  /*CSS declarations here*/
  
  }
  
  To identify only elements of type "div" with the attribute, CSS can use the following code:
  
  div.hide {
  
  /*CSS declarations here*/
  
  }
  
  Within this section of CSS code, a developer can include any styling properties necessary, including hiding the element if this is required.
  
  

Display

• The CSS display property can take a number of possible values. The none value tells the browser not to display the element in question at all. The following sample CSS code demonstrates this technique:
  
  display:none;
  
  Any element that this code applies to will not appear within the browser when the user views the page. The page will render as though the hidden elements are not there, with other elements occupying the space that the hidden elements might otherwise have appeared within.
  
  

Visibility

• The visibility property in CSS also hides elements, but without affecting the page layout. This means that when visibility is set to "hidden" a page will still reflect the area that the hidden elements would be occupying if they were there. The following CSS code demonstrates using the visibility property:
  
  visibility:hidden;
  
  This property is preferable if the hidden content is going to be made visible at some point while the user is viewing the page. Some developers implement effects like this using JavaScript functions. If a previously hidden element becomes visible when the display property has been used, the page layout will have to adjust to accommodate it, which can make visible elements jump around. Using the visibility property avoids this issue.