CSS « Richard Kotze – Web Technology, Design and Development

Archive for the ‘CSS’ Category

CSS create tool tip

Posted on Wednesday, August 31st, 2011 in CSS

The content attribute in CSS is pretty useful. It can only be used with the Pseudo properties before and after which essentially determine where the content is going to be outputted.

So a basic example using the content attribute would be to label small items: 09839 048882

.phonenumber:before{ content: 'Phone number: ';}

Essentially this snippet will add “Phone number” in every element that uses this class at the beginning of the text. Pretty useful when there is a mass change of labels needed to be done.

How to make a tool tip just using CSS? Read more

Comments Off

Multi-columns with CSS3

Posted on Tuesday, August 9th, 2011 in CSS3

Its not that difficult to make multi-columns in the content of a web page, you could use tables or lists with CSS to control the layout. But these two options are not ideally the correct solution because content that is written should flow evenly into the columns. Rather than manually placing it into each column it dynamically shifts into each column. This is something that can be done in a Word processor software or media publishing tool but can’t be done using HTML. Read more

Comments Off

nth-child

Posted on Saturday, October 9th, 2010 in CSS3

Using CSS3 pseudo-class nth-child now means that you can select a specific group of html elements. Essentially its a simple patten search through the HTML elements. For instance in a table you would like every alternate row to be one colour and for each other row to be a different colour. By making the rows in a table alternate colours you are making it easier to read the data. See example1:

Example 1

Row1: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row2: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row3: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row4: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data

Comments Off

Override CSS properties

Posted on Tuesday, August 17th, 2010 in CSS

How can I override a CSS rule? You might find that you have a standard rule for curtain elements which is applied throughout the whole site but there are cases when you need to style an element differently from the rest. A common problem is sometimes an element is referred to twice through the different rules and depending on the cascade order determines which one is used. In order to force a specific property in a rule to be used by an element, the !important declaration should be applied. No matter what the CSS cascading order is for this element, it would have the highest priority.

Below is an example of how to apply the !important declaration, by putting it between the property-value and semi-colon.

#mainbody p {color:black;}/*main css file*/
#mainbody p {/*sub page css file*/
color:grey !important;
background-color:black;
}

Comments Off

Ten useful CSS scripts

Posted on Friday, August 13th, 2010 in CSS

icon for CSS articles Here is a list of ten useful CSS scripts.

Horizontal Navigation list

ul{list-style-position:inside;list-style:none;padding:0;margin:0;}
li{display:block;float:left;padding:5px 10px;margin:0;}

Comments Off

Pseudo first-child

Posted on Thursday, August 5th, 2010 in CSS3

icon for CSS articles Here is something interesting that I have recently stumbled upon and that is the pseudo class first-child does not work in certain cases. For instance lets say your content is wrapped in a div tag and you want to make the first p tag italics or bold but you have a heading above this paragraph, then div p:first-child does not work. This is because it is looking for looking for the first child element in the div tag which is the heading. Meaning it is not looking for the first instance of a chosen element.

How to over come this? Well CSS3 does provide a pseudo-class that over comes this and that is first-of-type. This means that if now looks for the first instance of a chosen element no matter how many elements are above it. Example:

div p:first-of-type{
     font-weight:bold;
}

This is also similar to last-child just use the :last-of-type and this will pick up the very last instance in the group.

div p:last-of-type{
     font-style:italic;
}

Comments Off

Prevent web page being printed

Posted on Monday, July 5th, 2010 in CSS

icon for CSS articles Here is a great way to prevent web pages from being printed. You simply set the CSS media type (@media) to print and change the body display to none as shown below.

/*inside print.css*/
body { display:none }

Link to CSS file
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Or per page if you only need to block a few pages:

<style type="text/css"> @media print { body { display:none } } </style>

You can be more creative with this: for instance if you don’t want certain parts of a page to print then you can simply give an element a class name or id and set it’s display to none inside the print.css file.

This is not a fool proof method to prevent a page from being printed but it is a reasonably good fix to the issue.

Comments Off

Any font on your web page

Posted on Sunday, July 4th, 2010 in CSS

icon for CSS articles In the past web designers where restricted to only web safe fonts like Arial or Times New Roman but now it is possible to use any font on the web with out using images. Using the CSS method @font-face it is possible to include any font that does not exist on any computer. Read more

Comments Off

From: 1 to 812 Next page »

Tag cloud

Archive for the ‘CSS’ Category

How to make a tool tip just using CSS? Read more

Horizontal Navigation list