background preloader

Beginner

Facebook Twitter

Starting with HTML + CSS. This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.

Starting with HTML + CSS

It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. At the end of the tutorial, you will have made an HTML file that looks like this: The resulting HTML page, with colors and layout, all done with CSS.

Note that I don't claim that this is beautiful ☺ Sections that look like this are optional. Step 1: writing the HTML For this tutorial, I suggest you use only the very simplest of tools. Don't use a wordprocessor, such as Microsoft Word or OpenOffice. Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following: <! <! Dave Raggett&#039;s Introduction to CSS. Dave Raggett, 8th April 2002.

Dave Raggett&#039;s Introduction to CSS

This is a short guide to styling your Web pages. It will show you how to use W3C's Cascading Style Sheets language (CSS) as well as alternatives using HTML itself. The route will steer you clear of most of the problems caused by differences between different brands and versions of browsers. For style sheets to work, it is important that your markup be free of errors. A convenient way to automatically fix markup errors is to use the HTML Tidy utility. The following will teach you how to: use the style element link to separate style sheets set page margins set left and right and first-line indents set the amount of whitespace above and below set the font type, style and size add borders and backgrounds set colors with named or numeric values add style for browsers that don't understand CSS Getting started Let's start with setting the color of the text and the background.

The style element is placed within the document head. Linking to a separate style sheet <! Learning CSS. Languages Cascading Style Sheets articles and tutorials Starting with HTML + CSS teaches how to create a first style sheet.

Learning CSS

For a quick intro, try chapter 2 of Lie & Bos or Dave Raggett's intro to CSS. Or see examples of styling XML and CSS tips & tricks. W3C's Core Styles are simple style sheets ready for use. W3DevCampus is W3C's online training site (in several languages.) Also on this page: English and non-English articles, discussion fora, books, and secondary resources. Con­fer­ences & other events 2014-10-13 Environments for Humans organizes the 3-day CSS Dev Conf 2014, in New Orleans, Louisiana, USA, on 13–15 October. Suggest a link Articles & tutorials in English Non-English articles & tutorials العربية/Arabic درس CSS (CSS Tutorial) беларуская/Belarusian See separate page. Català/Catalan Curs de CSS (CSS course). 简体中文/Chinese 层叠样式表单教程 (CSS Tutorial) CSS 教程 (CSS Tutorial) CSS 学习指南 (CSS Tutorial) 繁體中文/Chinese (Traditional) Cascading Style Sheets (串接樣式表)的基本介紹 (CSS Tutorial) Dansk/Danish.