Today I came across a useful new script called TinyBox a lightweight light-box script. At 3.4KB, it is a light-box in its simplest form. It supplies you with the framework to develop a light-box for any purpose.
TinyBox, a lightweight lightbox script by Leigeber
Thursday, February 25th, 2010Why should I comply with web standards?
Thursday, February 25th, 2010Complying with web standards can give your web pages greater visibility in web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.
CSS VS Tables
Thursday, February 25th, 2010Tables are meant for tabular data and therefore using them to control layout is sloppy. They also mean that you need to edit more pages to move things such as menu items. CSS gives you more diversity and allows you to lay your markup in a more accessible way by hiding jump-links for example.
If you are using FireFox, View >> Page Style >> No Style and you will notice that the website is not broke by the fact there is no style. Tabled websites often will or content is read before links making sites less accessible.
CSS Selectors
Thursday, February 25th, 2010selector {property: value} – the selector is one of three things, the id of a single element that this style effects indicated by a #, the class used on many elements indicated by a . or the element itself, effecting all of the element named, the type selector.
Examples:
- ID – #container {float:left;} causes the element with the id container to float left
- Class – .red { color:red;} causes all elements in the red class to have red text
- Type – body {font-family: Verdana, Tahoma, Arial;} causes all text within the body element to use the Verdana font face or Tahoma if Verdana is unavailable or Arial if Verdana and Tahoma are unavailable
CSS Box Model
Thursday, February 25th, 2010Box properties and what they do to boxes (divs):
- Width: – Adjusting this adjusts the width of the box. For example width: 100px; will make a 100px wide box. max-width and min-width are recommended for stopping text stretching a ‘box’
- Margin:, margin-left:, margin-right, margin-top, margin-bottom: – Adjusting this causes a margin around the outside of the box.
- Padding: padding-left:, padding-right:, padding-top:, padding-bottom: – this is the same as margin however it is in the inside of the box
- Border:, border-width, border-style:, border-color: – These all add and change the look of the border around the outside of the box. border: is a shorthand style to apply width, style and color to a border. e.g. border: 1px solid black;.
- font-style:, font-size:, font-family:, color: – font-style can be used to select underline and italics etc. for the text inside a box, font-size adjusts the size of the text eg. font-size:12px;,font-family adjusts he font face used and priority separated by a comma. eg. font-family: Verdana, Arial, Tahoma, Times New Roman; would tell the browser to use Arial and if it isn’t available Tahoma etc. color simply changes the color of the text using hexadecimal colours as with the invalid way of styling with html.
- Display: inline; and display:block; – this changes the way the box behaves. As an inline element, it will sit side by side to the box marked up before it until it cant fit on the page or in the box which it is in. As a block element, it will refuse to sit by the box marked up before it, and will go below it.
