Convert your site to CSS
Read the "Convert your site to CSS" tutorial to convert your site to CSS.
Where to start?
To redesign your website with CSS, you need to do the following:
- learn HTML: which tags are used for displaying text, which tags are deprecated. You can learn HTML at W3 Schools.
- learn CSS: learn which styles can be used for styling or structuring. You can also learn CSS at W3 Schools.
- get a mockup (prototype, visual appearance model) of your future website (mostly the same with your current site)
- provide styling to your text by adding unique identifiers, classes and CSS styles
- position your blocks of text with CSS
Basically, one needs to know which tags and selectors do what. This is needed to visualise how the page will look like without checking it in the browser to edit the site easily.
Getting started
Alright. So you know HTML and CSS to edit the site. Here is what we need to do:
- create a new HTML file with all the necessary tags (
<html>, <body>, <head>, etc)
- create a CSS file: let's name it
styles.css - we'll be entering all the styling information here
- attach the file to the page by placing the following code in the head of the HTML file:
<link rel="stylesheet" type="text/css" href="styles.css">
- create blocks of text and surround them with the necessary text structuring tags (
<h1>, <p>, <ul>, <li>, etc)
- assign classes and identifiers to the blocks of text, depending on their intended usage ("header", "topnav", "content", etc)
- replace all the tags used for styling (
<font>, <b>, <i>, etc) with CSS rules
- move internal styles (
style="font-size:12pt;") to an external CSS file
- position the text blocks as you want to see them in a browser
Well, that'd be a brief plan. Continue reading on how to convert your site to CSS.
Learn more:
Site visitors start to leave if the page loads slower than 8 seconds.
