Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘css’

Speed up your website – Part 3: CSS

Monday, July 9th, 2018 by Servage
This is the third part of a simplified explanation of the "Yahoo best practices for speeding up your web site". Read the second part here. The third part is about CSS related optimization. Include stylesheets in the head section Use the <link> tags in the <head> section of your HTML code to include CSS files. This enables your website to load progressively, instead of waiting for style information in the middle, or at the bottom of your page. It means that content can be rendered when it is ready, because the style information has already been loaded in the beginning. This makes the page appear to load faster. Do not ...

Collection of CSS techniques

Monday, June 11th, 2018 by Servage
I've stumbled over a great list of cool CSS techniques I think could be useful some web developers: "CSS3 is taking web development and web design to a higher level. In this article, I have compiled examples of amazing CSS3 techniques that will probably become very popular when CSS3 will be fully supported by most browsers." Color animate any shape with CSS3 and a PNG Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background. The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do. View source: http://jsfiddle.net/chriscoyier/vhKhT/ Create adaptable layout using ...

Create nicer looking forms with CSS

Monday, May 28th, 2018 by Servage
Forms are one of the commonly used elements in HTML. It's a basic functionality for most websites to capture specific information via user input through HTML forms. So why do so many forms look really boring? Why are businesses still missing out on new customers because of unappealing order forms? It's amazing what you can accomplish with form design. It looks good, gives a serious impression, and attracts users. Examples The images illustrating this article are two examples of beautiful order forms I've found online. They are integrated with the rest of the website design, they have a simple layout, there isn't too much data to be added. Users are unlikely ...

Blueprint CSS Framework makes CSS styling easy

Monday, May 21st, 2018 by Servage
The last post about nicer forms introduced some simple CSS tricks to get nice looking forms. It also mentioned the Blueprint CSS framework, which is pretty nice. Blueprint is basically just a set of stylesheets (.css files) that you can include in your website to get certain default design and layout functionality. Why is this great? You often want to do similar things with your web projects in terms of design. Blueprint offers help with exactly that. It makes your standard pages look good, and gives you a great starting point for further customization. It's much better than using the various browsers' own default styling. The features CSS reset of styles to ...

Create a cool CSS-based tab-menu

Tuesday, April 10th, 2018 by Servage
We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> ...

Servage Web Development Course Part 4: Tables

Friday, March 2nd, 2018 by Servage
blogimageToday we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been "normal" for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data. The table HTML structure The <table> tag has three sub-elements, which could ...

Servage Web Development Course Part 3: Layout and page structure

Friday, February 23rd, 2018 by Servage
blogimageEvery website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there - somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let's have a look at a sample <div> container structure (part3a.html of the project files): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

Servage Web Development Course Part 2: Content formatting

Friday, February 16th, 2018 by Servage
In this part you will learn how to format (style) web pages' main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course. Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also ...

Introduction to the Servage Web Development Course

Saturday, February 10th, 2018 by Servage
Hello and welcome to the Servage Web Development Course. Over the next weeks we will take you through a series of tutorials that will show you how to develop your own web site and application from scratch. The course if designed for anyone that has no or little prior knowledge about website development. After this course you will have a good overview over the main technologies used - namely HTML, CSS, PHP and MySQL. The course itself will take you through these areas by building a little Blog-application step by step, that will feature creation, modification, display and design of content. So, if you are not yet an expert on creating webpages, please continue reading :-) The beginning Every ...

Is your website standard compliant?

Monday, January 15th, 2018 by Servage
vcss-bluevalid-xhtml11-bluevalid-html401-blueEveryone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially Internet Explorer, but also older versions of other browsers, are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues ...