CSS Attribute Selectors
Aug 16th
CSS Attribute selectors are used to select specific attributes in HTML. For example,
<body> <h2 class="title">Welcome!</h2> <p class="foo" rel="newText">Some text here</p> </body>
We have two class attributes and on rel attribute labeled, “newText”. We could use the attribute selector like the following:
.title {font-size:2em;} .foo {color:#ccc;} p[rel=newText] { /*attribute selector*/ font-size:1.15em; font-style:italic; }
Using this rel attribute and stating what its value is, we can add styles to that exact element even though it has other inherited styles.
Breakdown
Attribute selectors can be somewhat strange at first. But fret not! They’re quite easy to learn and can be useful in tricky situations.
[attrib=value]
This means the attribute will equals a certain value. For example:
<div id="form"> <form action="process.php" method="post"> <input class="button" type="button" name="button" value="Click Me" /> </form> </div>
Since this button already has a class attribute, it’s already being styled independently. For the sake of argument, let us assume this button is used multiple times on a website and it would be a pain for us to add a new class value. We could simply use an attribute selector to style the button with the value of “Click Me!”.
input.button { padding:3px; background:#3b3b3b url(images/button.png) repeat-x; width:50px; height:25px; color:#ccc; } input.button [value=Click Me] { background:#4c4c4c url(images/new-button.png) repeat-x; color:#999; }
We have our class called “button” which is styled a certain way. Assuming it was a pain for us to create a new class, we can have the attribute selector get the exact value of “Click Me” and then style it differently.
[attrib*=value]
This one is a little bit more strange. The “*” in this situation kind of acts as a wildcard. This “*=” will search for the the following value anywhere in the attribute value. For example:
<h3 rel="foobarfoo">Text here</h3>
Using this attribute selector we could do the following:
h3 [rel*=bar] { text-shadow:1px 1px 1px #000; color:#fff1d8; }
This will search the attribute for the word bar and add the styles you want to it. We can also look at this from a different angle:
<div class="item1">Content here</div> <div class="item_2">Content here</div> <div class="item-3">Content here</div>
This would be considered poor coding on any level. But let us assume there was a situation like this and you wanted to create a style that would apply to all three of these class selectors. Instead of editing each one individually, we could do the following:
div[class*=post] {font-family:monospace;}
[attrib^=value]
This allows us to choose an attribute based on how it starts. If we have several attributes that start with the same string of text with multiple id and class styles added to the elements already, this can make our life easier.
<div class="foo bar" rel="hello-world">Content Here</div> <div id="world" class="foo"> <ul class="bar" rel="hello-world"> <li>Item</li> <li>Item</li> <li>Item</li> <li rel="hello-world">Item</li> <ul>
With a little CSS…
*[rel^=hello-world] {font-style:italic;}
Note: The * in this instance is a wildcard which will automatically put whatever element the attribute and value applies to.
Here is an alternative example:
<a href="http://www.atomicpages.net/blog/2010/05/04/css3-opacity/">CSS3 Opacity</a> <a href="http://www.atomicpages.net/blog/2010/04/09/mmf2-beginning-video-tutorial-series/">MMF2 Tutorial Series</a> <a href="http://www.w3.org/standards/xml/core">W3C XML Info</a> <a href="http://www.whatwg.org/">WHATWG</a>
a[href^=http://www.aomicpages.net/] {color:#ff9300;}
[attrib$=value]
This will search for the value but at the end of the string.
<div class="foo bar"> <!--content here--> </div> <div class="bar"></div> <div class="foo"></div>
div[class$=bar] {text-decoration:underline;}
[attrib~=value]
A typical HTML element that has multiple classes styling it would look like the following:
<div class="foo bar"></div>
Notice that the values are separated by a space. What if we had a different attribute that had multiple values that were separated by a space? Could we use *=? Probably, but the issue with *= is that it can be too picky since this does not require spaces. For example,
<div class="red" rel="foo bar"></div>
div.red {color:red;} div[rel~=foo] {color:#470b0b;}
Using ~= would require the attribute to be separated by spaces if there were multiple values.
[attrib|=value]
This attribute selector allows us to styles attribute values separated by a dash. This is an alternative to using *=. See the following code:
<div class="blue" rel="bar-foo-bar"></div>
div.blue {background-color:blue;} div[rel|=bar] {background-color:rgba(50, 50, 50, 0.6);}
Multiple Attribute Selectors
We can use multiple attribute selectors if we want. Consider the following code:
<div title="AtomicPages Blog" rel="example-link" class="blog img"> </div>
div [title=AtomicPages Blog][rel|=link] {color:#ccc;}
Is my browser supported?
The only browser that isn’t supported it Internet Explorer 6.
PC Tune Up SE
Jul 20th
Does your PC run slow? Are you seriously contemplating taking it into a computer repair show where they’ll charge you $100+ to speed up your system? There are a few things you can do before you succumb to the computer “repair” shop.
PC Tuneup
Websites that claim they’ll scan your PC for free if you download their software are nothing than money mongers — seriously, it’s a rip off. Even if you have a fresh install of your operating system they’ll claim you have viruses and other malware. If you think you have malware see this lovely article on malware. There is also an article on virus removal if you know that your system is infected.
The Tools
Windows utilities don’t always have a good reputation with users (whether they are computer savvy or not). Utilities like Task Manager, Disk Cleanup, Disk Defragmenter, and Services Panel, Event Viewer, Windows Explorer, and System Restore.
These utilities can usually be found in the System Tools portion of the Accessories menu. All of the highlighted items are essential pc tools that you should be aware of.

Though this OS is Windows 7, the location of the tools is the same for Windows XP and Vista.
Step 1
The first step is something quite obvious but is commonly overlooked. You need to ask yourself, “Do I have the most recent updates for my PC?” As it was stated before, this may seem like a dumb question but it is not. Sometimes, problems due to speed or hardware not working are caused by out-of-date drivers and software patches. To see your most recent service pack, open Run by pressing Window Key + R or opening it via the start menu and typing winver.
| OS | Service Pack |
|---|---|
| Windows XP | Service pack 3 (all but XP Professional X64) |
| Windows Vista | Service Pack 2 |
| Windows 7 | None to date |

This shows you the version of Windows OS you are currently using and the Service Pack which is installed. As we can see from this example, we have Windows Vista with Service Pack 2 installed.
A Service Pack is a major OS update that updates core files of the OS. They are different than a regular OS patch. One key difference is the size of the update. Most service packs are well over 100MB in size.
To check and see if you have any updates, navigate to control panel and select Windows Updates.
For XP users it will be on the left-hand bar menu and for Vista users it will be under System as the first option. For Windows 7 users, click on System and Security and then on Windows Update.
Click on “Check for Updates” and Windows will check for any updates that you might need. If it finds any updates, be sure to install them and then restart your computer if you are prompted to do so.
Step 2
The next step is to remove unnecessary files from your system using Ccleaner which is a free and open source utility for all to use. It comes with a windows system cleaner and a registry cleaner together. This is a great utility to install and to run at least once a month.
Ccleaner will clean up various applications and various windows items that you select. Looking at the image, we can see that there are several applications and windows items that are using quite a bit of space on the hard drive.
Step 3
Next we want to defragment our hard drive. There are two utilities that are excellent and blow away the Windows Disk Defragmenter. Auslogics Disk Defrag and Piriform’s Defraggler. Personally, I prefer Auslogics over Defraggler because it comes with an optimization option and it is usually faster.
These examples are screen shots of Auslogics before defragmentation and after defragmentation.
| Before | After |
|---|---|
![]() |
![]() |
But what exactly is fragmentation of the hard drive? First we need to understand how a hard drive works. Most hard drives that we have are called magnetic hard drives which consist of one or more platters and a read/write head. Data is written in these 512-byte slots on the hard drive called sectors. The amount of space on the hard drive is determined by the number or sectors in each track. A track is a full rotation around the disk platter.
Data is stored as a magnetic spot in the hard drive and the absence of data is stored as a non-magnetic spot in the hard drive. This is also known as storing data as binary (0′s and 1′s). The presence of a magnetic spot is “1″ and the absence of one is a “0″. 8 bits = 1 byte, so each sector can hold 4096 bits or 4.096 kilobits of information. Translated into the terms of bytes, each sector can hold 512 bytes of information.
When we write information to the hard drive, the information sometimes gets scattered because it is using the closest sector with free space. More notably, when we uninstall programs or delete files, that frees up the spot on the platter so data gets written to that spot where the old data used to be. This allows for data to get placed in different sectors on the hard drive and thereby increasing the access time for the read/write head to get the data we need.
The defragmentation process places data in the proper sectors and tracks there the majority of the data is for that particular file or program is found. Auslogics does a little bit more with the optimization option, however. The optimization option “compresses” the free space we have instead of merely moving data to the right spot. This places all of the data we have in a single compacted block on the hard drive to further decrease the access time. Read more about the defragmentation process here with Auslogics’ great explanation.
These images below depict the fragmentation, defragmentation, and optimization process.
![]() |
![]() |
![]() |
Step 4
msconfig. Though this seems somewhat daunting, fret not PC users. Run is a great tool and is the gateway to many PC features and shortcuts. We must open Run by pressing the Window key + R or by opening run manually. Type msconfig and then navigate to the Startup tab. Hide and non-windows startup services (if you have the option) and begin unckecking all non-windows startup services. Leave core services like video drivers and wifi drivers checked. Items like iTunes, Adobe, Quicktime, and other programs can be unchecked because we don’t need them to startup right when our OS loads.
All of the items that are highlighted are things we don’t need to be loading during the startup process. There is a more advanced way of going about this; however, this is the practical and easiest way of increase your systems speed during startup.
Notice that we leave the NVIDIA, touchpad, google update, and our anti-virus programs checked so they launch during the startup process. These are all items we want to loading during the startup process.
Step 5
Run a virus scan with your existing antivirus software or by using Microsoft Security Essentials or you can browse paid anti-virus programs. But if you’re running any version of Windows, AtomicPages commends and endorses the use of Microsoft Security Essentials.
Be sure to update your virus definitions daily and scan your system at least once a week and stay off of websites with bad reputations. If you want to check how reputable a website is, we recommend the WOT Plugin for Firefox/Chrome/IE/Safari. This plugin check to see how reputable a website is from community votes. This plugin will warn you if you are visiting a website with a poor reputation.
Basics of CSS – Part #10
Jul 6th
Today we’re going to talk about tables and how they can look significantly better when we add a little bit of CSS to them. If you need a quick refresher on tables, please click here.
Styling Tables
As mentioned above, styling tables is very useful and can instantly make a webpage come to life. The HTML default table is like the following:
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
Pretty boring if you ask me. Notice how the table has a background of transparent so it will take the color of any background element. The table has that border by default and it definitely could use some tweaking to make it look better.
We’re going to use some key properties:
- border-collapse
- border
The border property allows us to style all four corners of a border at once, or each side individually. There are no arbitrary shapes with borders. All elements have a clearly defined left, right, bottom, and top side to the element.

Notice how the square has an irregular shape and doesn’t appear to be a conventional square. We would call this a diamond shape or something along those lines. It’s actually a perfect square that was rotated 45° on a canvas. Notice how the diamond has a background since it is an image and that background has four sides: top, right, bottom, and left.
To see the border tutorial click here
Now that we have a firm understanding and we have refreshed our minds on the border property, we can fully style our tables!
If we add a little bit of CSS and tweak the table to our liking then it could very well look like this:
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
Although this dives into the world of pseudo-classes, which is discussed in the advanced css tutorial series, we know what our tables can potentially look like with a little bit of work.
Styling
Consider the following code:
table, td {border:1px solid #ff9300;}
This code would add a 1px border that is solid with the color #ff9300 (AtomicPages Orange) around the table and td (table cell) elements. The reason why we chose these elements is because the tr (table row) element does not have a border around it be default. (Usually applying a border color to a table would only mean applying it to the table element only and not the td element.)
This code will outline the table and td elements with a border that is 1px in width, that is solid and the color #ff9300. This can be useful if you want to quickly style a table quickly and easily.
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
border-collapse
The border-collapse property is a very useful property that collapses the default double border into a single border. For example:
table { border-collapse:collapse; border:1px solid #ff9300; }
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
Notice how the border collapse property instantly gives the table a sharper and less “busy” look. The default border around the table and td elements ceases to exist and we are given a sharper look.
With a little padding (for spacing) for the td elements we can easily space out the table like the following:
th, td {padding:3px;} /*use as an alternative for cellpadding*/
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
Using that same principle, we can apply background images and colors to the table, tr, th, and/or the td elements.
For example:
table { border-collapse:collapse; border:1px solid #ccc; background-color:#dbdbdb; }
| Item 1 | Item 2 |
|---|---|
| Item 1 | Item 2 |
| Item 1 | Item 2 |
We’ve seen how tables can look and we know what they look like by default — boring. Styling tables can be a great addition to any website whether it is made from tables itself or from a tableless markup using CSS.

Styling Tables
Size: 8.36 kB
HTML 4/XHTML 1.0 Tag List
Jun 21st
DTD referrs to the doc type and indicated which tags are allowed F = Frameset, S = Strict T = Transitional.
| Tag | Description | DTD | XHTML 1.1 |
|---|---|---|---|
| <!–…–> | Comment in HTML | FST | YES |
| <!DOCTYPE> | Sets document type | FST | YES |
| <a> | Sets an anchor | FST | YES |
| <abbr> | Sets an abbreviation | FST | YES |
| <acronym> | Sets an acronym | FST | YES |
| <addres> | Sets contact information for the author/owner of a document | FST | YES |
| <applet> | Deprecated: Sets an embedded applet | FT | NO |
| <area /> | Sets an area inside an image-map | FST | NO |
| <b> | Sets bold text | FST | YES |
| <base /> | Sets a default address or default target for all links on a page | FST | YES |
| <basefont /> | Deprecated: Sets a default font, color, or size for the text in a page | FT | NO |
| <bdo> | Sets text direction | FST | NO |
| <big> | Sets big text | FST | YES |
| <blockquote> | Sets a long quotation | FST | YES |
| <body> | Sets a document’s body | FST | YES |
| <br /> | Sets a single-line break | FST | YES |
| <button> | Sets a push button | FST | YES |
| <caption> | Sets a table caption | FST | YES |
| <center> | Deprecated: Sets center text | FT | NO |
| <cite> | Sets a citation | FST | YES |
| <code> | Sets computer code text | FST | YES |
| <col /> | Sets attribute values for one or more columns in a table | FST | NO |
| <colgroup> | Sets a group of columns in a table for formatting | FST | NO |
| <dd> | Sets a description of a term in a definition list | FST | YES |
| <del> | Sets deleted text | FST | NO |
| <dfn> | Sets a definition term | FST | YES |
| <dir> | Deprecated: Sets a directory list | FT | NO |
| <div> | Sets a block-level section of a document | FST | YES |
| <dl> | Sets a definition list | FST | YES |
| <dt> | Sets a definition term (or item) | FST | YES |
| <em> | Sets emphasized (or italic) text | FST | YES |
| <fieldset> | Sets a border around elements in a form | FST | YES |
| <font> | Deprecated: Sets font, size, and color for text | FT | NO |
| <form> | Sets a form for user input | FST | YES |
| <frame /> | Sets a window in a frameset | F | NO |
| <frameset> | Sets a set of frames | F | NO |
| <h1> to <h6> | Sets different headings | FST | YES |
| <head> | Sets the head section of an HTML document | FST | YES |
| <hr /> | Sets a horizontal line | FST | YES |
| <html> | Sets an HTML document | FST | YES |
| <i> | Sets italic (or emphasized) text | FST | YES |
| <iframe> | Sets an inline frame | FT | NO |
| <img /> | Sets an image | FST | YES |
| <input /> | Sets an input field in a form | FST | YES |
| <ins> | Sets inserted text | FST | NO |
| <isindex> | Deprecated: Sets a searchable index related to a document | FT | NO |
| <kbd> | Sets keyboard text | FST | YES |
| <label> | Sets a label for an input element | FST | YES |
| <legend> | Sets a legend for a fieldset | FST | YES |
| <li> | Sets a list item | FST | YES |
| <link /> | Sets the relationship between a document and an external resource | FST | YES |
| <map> | Sets an image-map | FST | NO |
| <menu> | Deprecated: Sets a menu list | FT | NO |
| <meta /> | Sets metadata about the document | FST | YES |
| <noframes> | Sets alternative content for users who do not support frames | FT | NO |
| <noscript> | Sets alternative content for users who do not support client-side scripts e.g. JavaScript | FST | YES |
| <object> | Sets an embedded object | FST | YES |
| <ol> | Sets an ordered list | FST | YES |
| <optgroup> | Sets a group of related options in a form select list | FST | YES |
| <option> | Sets an option in a form select list | FST | YES |
| <p> | Sets a paragraph | FST | YES |
| <param /> | Sets a parameter for an object | FST | YES |
| <pre> | Sets preformatted text | FST | YES |
| <q> | Sets a short quotation | FST | YES |
| <s> | Deprecated: Sets strikethrough text | FT | NO |
| <samp> | Sets sample computer code | FST | YES |
| <script> | Sets a script type | FST | YES |
| <select> | Sets a drop down list | FST | YES |
| <small> | Sets small text | FST | YES |
| <span> | Sets a inline-section of a document | FST | YES |
| <strike> | Deprecated: Sets strikethrough text | FT | NO |
| <strong> | Sets strong (or bold) text | FST | YES |
| <style> | Sets an internal style sheet | FST | YES |
| <sub> | Sets subscript text | FST | YES |
| <sup> | Sets superscript text | FST | YES |
| <table> | Sets a table | FST | YES |
| <tbody> | Groups a table body | FST | NO |
| <td> | Sets a table cell | FST | YES |
| <textarea> | Sets a textarea for an input field | FST | YES |
| <tfoot> | Groups a table footer area | FST | NO |
| <th> | Sets a table header cell | FST | YES |
| <thead> | Groups a table header area | FST | NO |
| <title> | Sets the title of the document | FST | YES |
| <tr> | Sets a table row | FST | YES |
| <tt> | Sets teletype text | FST | YES |
| <u> | Deprecated: Sets underlined text | FT | NO |
| <ul> | Sets an unorderd list | FST | YES |
| <var> | Sets a variable part of a text | FST | YES |
| <xmp> | Deprecated: Sets preformatted text | None | NO |
How to Prevent a Virus
Jun 18th
Although this might seem like a silly question, “How to prevent a virus?”, some people really have no clue how and why we should protect against malware and other technological parasites.
Why Protect?
Let us assume “malware” is an all-inclusive term that includes, but is not limited to, worms, viruses, grayware, riskware, scareware, and trojans. Why on Earth would we protect our computers from these little bits of code that could possibly have no adverse effect on our systems? Well, you always must think to yourself, “what if?”
What if you did visit a website or opened an email attachment and you did get malware from this malicious website or email attachment. What if this malware took over your computer and copied itself into hundreds of directories and was secretly logging every keystroke you made on your computer. This malware could potentially have banking usernames and passwords, credit card information, or other personal information that is sent over the internet.
What if malware took over your computer and began deleting critical system files and folders? It would be annoying to have to reinstall your operating system because malware hijacked your computer. But this doesn’t happen with ever infection; we need to weigh the pros and cons of both sides.
| Pros | Cons |
|---|---|
| Protects system against malware | Reduction of system performance |
| Peace of mind | Expensive anti-virus programs |
| Less chance of becoming infected | Doesn’t always catch everything |
| An extra set of eyes always watching out for your system | I don’t need it because I don’t visit malicious websites |
As wonderful as these arguments are, it is still better to have anti-virus than to not have it. When surfing the world wide web, you never know what your system might catch. Even if you visit a website that you know is malware-free, it still could give you malware. Malicious code writes are always coming up with better ways to infect systems and steal information or cause a nuisance.
What Programs to Use
It is a well know fact that there are a billion different anti-viral, anti-adware,and anti-malware programs. Not to mention email filters, spam filters, and popup blockers.
This begs the question, “What program should I use?” In my opinion, the best option is always the free option. This will save you money and will suffice in most cases. Great free programs are the following:
There are other paid options, however. According to CNET ( a widely respected and well known technology-based website), the top paid anti-viral programs were the following:
http://us.trendmicro.com/us/home/
To see the full list the CNET’s reviews, check out this link for the full list.









