How do designers use CSS

CSS / ready-made layouts

Here we offer finished layouts and Design templates at. You can view and download them here and use them free of charge for both personal and commercial projects. All layouts are responsive, accessible and of course consist of valid HTML5.

In contrast to the examples in the wiki, the layouts are hosted statically so that external resources such as graphics, sub-pages and style sheets can be referenced more easily.

Design templates

CSS garden

A clearly laid out website based on the basic HTML structure and the page structuring tutorial, with nine different layouts.

Design no.01

This is a colorfully appealing page for a small company, law firm or private person.

The background colors and shadows are defined directly in the CSS file and can easily be changed. The graphic elements such as cliparts and logos are contained directly in the HTML as SVG graphics and can therefore also be designed with CSS.

Design no.02

A trendy page in a 3-column layout with an eye-catching header.

The color of the theme of the page can be adjusted in a few simple steps.

Design no.03

Company page in functional blue in 3 columns (implemented with grid layout) with navigation on the left.

The graphic elements next to the menu items and the headings are without graphics, but only through CSS {border-left: 5px solid blue;} generated.

Design No. 04

This graphically appealing page of a sports club has 3 fixed columns in the grid layout, which are positioned one below the other on a smaller screen.

The icons and graphic elements were not implemented with background images, but with the icon font font-Awesome.

Design no.05

"If you know one - you know them all!" - Modern websites often suffer from their arbitrariness: a more or less complex grid of square areas. Other geometric shapes are also possible with SVG. Of course, also responsive and with everything!

Design no.06

Website in grid layout with responsive slider and a number of social buttons

Design no.07

Colorful page with a large header for your own logo and a (switched off) flex slider

Design no.08

A graphically successful page with a large teaser whose image explanation (figcaption) floats in when the mouse is hovered over.

The navigation arrows are not graphics, but pseudo-elements created with CSS. The 4-colored stripe under the heading is also just CSS.

Design no.09

Graphically very appealing car page, which would be difficult to adapt with 2 navigations and many different block elements.

Design No. 10

A graphically varied page with a structured background. The head and the navigation are fixed at the top.

On the home page there is a picture carousel that you can either click on manually or rotate automatically in a few simple steps. It is responsive from a width of 750px, narrower views still have to be set.

Visiting card

An elegant one-pager as a landing page or portfolio for an application. Of course responsive and with everything!

Design no.15

A simple design by Jeena Paradies in which all HTML structures and CSS settings are explained in comments.

Implementation in floats, which you would no longer do today, but which even adapts to the width of the page.

HTML entry

Nothing yet finished layoutbut the start for the first steps in HTML and CSS.

Download and use design templates

Download ZIP file

If you would like to use this layout for your own web project, click the following link to save the layout:

Save the ZIP file in a directory of your choice. The ZIP file contains HTML, CSS and graphic files that belong to the layout. In order to be able to edit these files, you have to unzip the ZIP file.

  • Windows: Right click and select "Extract files"
  • Mac: double click

Extract the contents of the ZIP file into the directory in which you want to edit your web project. If this directory does not yet exist, create it before extracting the file. After you have successfully extracted the ZIP file, you can edit the project files.

Notes on the templates

The layouts include the following project files:

  • index.html
  • 1-underside.html
  • 2-contact.html
a directory / css
... which contains one or more separate CSS files (usually: style.css) with global definitions for formatting text and design. This CSS file is included in all HTML files of the project. To understand and edit this file, knowledge of the CSS chapter is required.
a directory / img
… Graphic files that are used for display. Look at the graphic files individually with a graphics program or with the browser to understand how they look in the layout. If you change the color of the layout, you will probably also have to edit the graphics belonging to the layout. To do this, you need knowledge of image processing techniques and terms.

Note

copyright: Deviating from the license conditions, the templates are expressly subject Not the license CC-BY-SA 3.0 (de), but they are in the sense of the license CC0 1.0 (de) as public domain released. You are allowed to copy, modify, publish these templates, even for commercial purposes, without having to ask for further permission. SELFHTML waives all copyright and related rights worldwide, as far as this is legally possible.

Further tutorials

You can edit the source text of these HTML files with a text or code editor. In order to understand the source text and to be able to work in it, you need knowledge of HTML and CSS.

Our introduction to HTML tutorial, in which you learn step by step how to set up a website, offers a good and easy-to-understand introduction.

The course Getting Started with CSS teaches the basics of formatting with style sheets.

There, as in the templates used here, the new grid layout is often used, for which we have also created a course:

Web links