In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.
Whenever we cover CSS articles we’ve got good response from our reader; for e.g. on one line CSS and Magazine style drop cap first letter with CSS. This makes us to write thorough, descriptive and clean articles.
.
If you want to develop great looking websites and want that to be easy to maintain you must follow certain rules in writing markup and CSS. Those sites requires high quality markup and styling. The most fundamental principle to remember while designing is separating presentation and the content or style & markup. Separation is the key a good designer need to build a good markup to produce good CSS.
Website is the best online platform for the promotion of business or services. So the greatest necessity of website is its design. Design needs to be eye catchy and attractive enough so that the visitors stop by to browse through your site. A visitor hardly stays on a website for less than 5 seconds or so if the design is not catchy. So a web designer has to be careful enough to turn the first impression of the site into a good one. Acquiring designing skill is very important for a beginner which can be developed and polished with rigorous practice.
The web layouts, the look and feel of the website as well as many other things are taken into consideration for website designing. A proper knowledge and skill to use the web designing tools are essential for any web designer.
After last week article on CSS trips and tricks I am adding some more here. I hope these tips are useful ones.
1. Remove links or textbox hightlight border
You can use the outline property to remove or hide a border highlighting the elements. Our author Anish Blon wrote this in his most popular post one line CSS in March 2008.
a, input { outline:none; } to remove underline from link a:link { color: #0000FF; text-decoration: none; background: #FFFFFF;}/*normal links in the text*/
2. Hidden Text
You can hide the text by using the text-indent property as follows. We use hidden text when we’re using images to replace text but we want to make sure search engine can crawl the keyword.
a { text-indent:-999em; outline:none; width:200px; height:100px; }
3. CSS Transparency Setting for all browsers
you can use the following opacity hacks features to set transparency for different kinds of browsers
.transparent_class { filter:alpha(opacity=50); /* ie */ -moz-opacity:0.5; /* old mozilla browser like netscape */ -khtml-opacity: 0.5; /* for really really old safari */ opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */ }
4. PNG Fix for IE6
Following hacks can be used to fix the PNG fix for IE6
.png_hack{ background-image: url(../img/image.png) !important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png'); }
Please have your say.
[Photo Credit: Russ Weakley]
I was searching hacks and tricks on css and found this article which is simple and very useful. I hope this will be informative to others too.
1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:
<!--[If IE 5]> ie 5 < ![endif]--> <!--[If lte 6]> ie 6 and lower < ![endif]--> <!--[If gte 7]> ie 7 or higher < ![endif]-->
2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your style sheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 { font-family:arial; margin:0.5em 0; padding:0; }
3. Center elements
It’s easy to center an element, for Firefox and Safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body { text-align:center; /* for ie */ } #container { width:800px; margin:0 auto; text-align:left; }
4. CSS Positioning
This is something I’ve just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.
#container { position: relative; width:500; height:300; } #item { position: absolute; left: 200px; top: 50px; }
5. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS – Text transform
h1 { text-transform:uppercase; } h2 { text-transform:capitalize; } p { text-transform:lowercase; }
Please have your say.
When i started my first project as programmer , i was told to put a calendar at the sidebar of the webpage.At that time, one of my friend help me with the code.This time I googled it and found one very simple and good sample of creating a calendar using JavaScript.I hope this will be helpful to others also .
There are few simple steps for creating a calendar
Step 1:
Insert the following codes into the HEAD section of your webpage:
<style type="text/css"> .main { width:200px; border:1px solid black; } .month { background-color:black; font:bold 12px verdana; color:white; } .daysofweek { background-color:gray; font:bold 12px verdana; color:white; } .days { font-size: 12px; font-family:verdana; color:black; background-color: lightyellow; padding: 2px; } .days #today{ font-weight: bold; color: red; } </style> <script type="text/javascript" src="basiccalendar.js"> /*********************************************** * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/ * Script featured on Dynamic Drive (http://www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script>
Step 2:
Download basiccalendar.js (by right clicking, and selecting “Save As”), and upload to your webpage directory.
Step 3:
Finally, insert the below script where you wish the calendar to appear on your page:
<script type="text/javascript"> var todaydate=new Date() var curmonth=todaydate.getMonth()+1 //get current month (1-12) var curyear=todaydate.getFullYear() //get current year document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script>
Click here to see an DEMO
When I was trying to create a division using DIV tag and fix a height to value below 12px in IE, the height didn't go below about 12px in the webpage. After trying and testing a lot, I googled and found that it was minimum height bug in Internet Explorer.
Read More
Designing a layout of webpage using CSS is now a most popular and challenging among the web designer. The layout Design without a table have allowed us to add more features and control over the page.
While creating the box using CSS, it is necessary to understand the four terms MARGIN , BORDER , PADDING and ACTUAL CONTENTS.
Explanation of the different parts:
- Margin – This is an area around the border. [ outside the border]
- Border – A border that lies around the padding and content.
- Padding – This is an area around the content. [inside the border]
- Content – The content of the box, where text and images appear.
We have different types of tags to control these parts.
- Margin tag – This tag clears an area around the border. The margin does not have a background color, and it is completely transparent.
- Border tag – A border tag adds border around the padding and content. The border is affected by the background color of the box.
- Padding tag – This tag clears an area around the content. The padding is affected by the background color of the box.
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Width and Height of an Element
When we specify the width and height properties of an element with CSS, we are just setting the width and height of the actual content area. To know the full size of the element, we must also add the padding, border and margin tags.
The total width of the element in the example below is 300px:
width:250px; padding:10px; border:5px solid gray; margin:10px;
Let’s do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Imagine that we only had 250px of space. Let’s make an element with a total width of 250px:
width:220px; padding:10px; border:5px solid gray; margin:0px;
The total width of an element should always be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should always be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
We can see different types of pagination style in webpage .They simply link pages. There are various ways to add pagination in our webpage. Here I have tried to show one of the common way to create pagination using CSS .
First simple technique
We can create a pagination style similar to flicker with the following CSS .
<!-- <html> <style> ul{border:0; margin:0; padding:0;} #pagination-flickr li{ border:0; margin:0; padding:0; font-size:11px; list-style:none; } #pagination-flickr a{ border:solid 1px #DDDDDD; margin-right:2px; } #pagination-flickr .previous-off, #pagination-flickr .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-flickr .next a, #pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; } #pagination-flickr .active{ color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; } #pagination-flickr a:link, #pagination-flickr a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-flickr a:hover{ border:solid 1px #666666; } </style> <ul id="pagination-flickr"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=2">Next »</a></li> </ul> -->
We can customize the borders around the image , text and tables using the CSS.We can have absolute control over the page’s layout.The features like colour , size and width of four sides(top, bottom,left, right) can be customized as per our requirement.
Here , we are discussing on customizing the border around a text using CSS.
Example:
code:
<!-- <p class="tborder"><br />"Man and MOON"<br /><br /> <style> .tborder{ border-style:solid; border-top-color:rgb(170, 204, 255); border-bottom-color:rgb(16, 92, 182); border-left-color:rgb(128, 182, 42); border-right-color:rgb(128, 182, 149); border-width:20px; border-top-width:10px; border-left-width:10px; } </style> -->
