Display None In CSS

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

gPHPEdit

Gnome is a desktop environment for GNU/Linux or UNIX computers. Gnome comes standard with a handy text editor called Gedit. The Gedit text editor is simple and easy to use, but it lacks the features essential to be a programming editor. Introducing gPHPEdit, a PHP, CSS and HTML development editor. It comes with syntax highlighting, coding assistance, syntax checking, code navigation and integrated help.

gPHPEdit will recognize PHP and HTML files and will color highlight the file during editing. It recognizes all PHP functions up to and including PHP 4.3.0. gPHPEdit will also recognize CSS files and will color highlight the file during editing. It highlights valid CSS classes and descriptors. gPHPEdit also recognizes SQL files and will color highlight the file during editing.

You can learn more about the features of gPHPEdit from its website.

To install gPHPEdit, simply run this command from the terminal:

# sudo apt-get install gphpedit

The only thing I found annoying at the outset was the right hand edge guide, but I was able to remove it by editing Preferences. I also activated WordWrap as a matter of preference since I don’t like using horizontal scroll bars.

CSS Class vs ID

When I first learned CSS, the biggest challenge for me was learning the difference between “ID” and “CLASS” selectors. I struggled with the concept until I learned that “ID” selectors are unique and can only be used once in a page layout. On the other hand, “CLASS” selectors can occur multiple times in a single page layout. A good example of using the “CLASS” selector is using it for posts or articles which can occur many times in a single page. See some examples below.

ID Selectors

ID selectors are unique. They occur only once in a page layout. A good use for an ID selector are headers, footers, menus, sidebars, etc. Remember, it’s must be unique and can NOT be repeated in a page.

<div id="header">
header info here
</div>

Apply CSS to ID selectors by using the # pound sign. I associate “ID” selectors to an ID Card or a Drivers License which contains a unique number. Therefore IDs have unique numbers and uses the # pound sign.

#header {
padding: 10px;
margin: 2px;
}
#footer {
color: #555;
font-size: 12px;
}

CLASS selectors

CLASS selectors on the other hand, occur multiple times in a page such as divs for posts, articles, etc.

<div class="content">
content here....
</div>
<div class="content">
content here....
</div>

Apply CSS to CLASS selectors by using the . period sign. I associate CLASS selectors to a “class period” like in a school enviroment — a class period. The CSS code under .post in this case will apply to every instance of the CLASS selector.

.post {
padding: 10px;
margin: 2px;
}

I hope this short article clears up some of the confusion between ID and CLASSES for first time CSS coders. I hope it gives you a much clearer picture as to which selectors to use when designing your next page layout.