Can I design websites without CSS?

HTML - formatting without CSS, normalization and CSS reset

CSS reset

The pure HTML without CSS is supposed to structure the page, but the browsers show slight deviations in the presentation. CSS files therefore often begin with a CSS resetthat ironed out the differences between the browser styles you brought with you.

The templates of content management systems such as WordPress usually start with a CSS reset. Frequently used CSS resets are e.g.

A CSS reset now mainly applies to older browsers. Even if you don't use a CSS reset - it's worth taking a look at the defaults. Often the comments already help to better understand the context.

distances

The contents of block elements keep a small distance from one another - the margin. If the HTML tags are located directly in the body tag of the HTML document, you can also see a small margin to the edge of the browser window. The content of inline tags, on the other hand, does not have a margin compared to the surrounding text. Images that are placed within a text simply behave like oversized letters and enlarge the encompassing block.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.

Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

Most graphic browsers set the content of p-tags in a font size of 1 em (mostly 16 pixels) in a serif font (Times New Roman) without CSS. The line height (mostly 18 pixels) can only be changed via CSS. The user can change the font size by zooming in on his browser.

Tables

By default, tables only take up the space their content needs. Table cells keep a small distance from each other (border-spacing).

Tables do not necessarily take up the entire width of the containing block, but they do create a line break before the opening and after the closing table tag. Without attributes and CSS properties, tables have no borders and no spacing between the contents of table cells (no padding).

Row 1 column 1Row 1 Column 2
Row 2 column 1Row 2 column 2

HTML ul and ol lists

HTML lists or enumerations in ul or ol tags consist of a box for the list symbols or the numerical index and a block for the text. By default, the list symbols are slightly indented and are not left-justified.

  • Cras porta lobortis vel
  • Nam ut metus
  • Present vestibulum. Nam ante urna, facilisis ac, mattis non, convallis a, nisl. Nunc vestibulum magna quis turpis. Donec sit amet felis. Nam aliquet adipiscing quam. In hendrerit.

Spaces and line breaks in HTML

Browsers ignore consecutive spaces and line breaks in the HTML code.

<p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p> <p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p>

The two HTML tags are displayed in the same way in the browser:

If you put several spaces in a row, you're doing something wrong.

If you put several spaces in a row, you're doing something wrong.

So that spaces and line breaks are displayed by the browser, the CSS style white-space: pre; can be used.

div and span: tags without properties

The previously described HTML tags have "innate" properties for display in the browser window. p-tags generate a small margin before and after the p-tag, ul and ol tags also have this leading and trailing margin, and they also have bullets or an index. Two special tags are the div tag and the span tag: they are tags with no properties.

They are intended for the design of HTML elements using style sheets without the browser introducing its own formatting. The div tag is a block tag and the span tag is an inline tag. Without further formatting, the div tag also leads to a line feed, while text in a span tag is displayed without any special marking within the text line.

Deviations in form fields

This is where the differences between the browsers are clearest and at the same time the equalization is complex, because the browsers use the elements of the operating system.

External sources