logo_css4design_big

HTML/CSS

If you want to build a website, you need to understand coding language. This knowledge saves you from the cost of hiring a website designer for your business. If you are a beginner, learning to code may seem like a daunting task, but it does not need to be. The knowledge will help you with your web design needs in the future. It also sets the foundation for learning advanced HTML/CSS. It gives you the freedom to do with our website as you please. HTML and CSS codes are like the backbone codes of a website. We will help you to make an HTML file and a CSS file and make them work together.
html_ss.png

Writing HTML

If you have never done this before, we suggest that you use Notepad under Windows. It is the simplest tool you can find. You may also use KEdit under KDE or TextEdit on the Mac. As you become familiar with HTML, you can start using more complex tools. If you use a tool with too many feature, you may be distracted. Open yiu text editor of choice and on an empty window, enter the following information

<! DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title> Your page title</title>
<head>
<body>
<!—site navigation menu ->
<ul class=”navbar”>
<li><a href = “index.html”>Home Page</a>
<li><a href = “about.html”>About</a>
<li><a href = “location.html”>Location</a>
<li><a href = “links.html”>Links</a>
</ul>
<!—Main Content–>
<h1> your page title</h1>
Invitation to your page
your content
more content
<Sign and date>
</body>
</html>

The information on the first line describes the type of HTML which is Document type in this case.

Adding Color

You can add some color to your page to make it attractive. You need to create a style sheet inside the html. You can then put the HTML and CSS in different files. Placing them in separate styles makes it possible to see the same style sheet for other HTML files. You can add the style sheet as follows.

<style type= “text/CSS”>
Body(Color: Blue; Background-color:#d8da3d)
</style>

Style sheets in CSS must have a selector, property, and the value. The selector explains the part of the document that is altered. In this case, it is the body. The property is, in this case, is the background color. It is part of the layout that you intend to set. The value, in this case, is blue and #d8da3d . It shows the value of the style property. The background that you choose for the body will be the background for the entire document. Once you are done, you can save the file and go back to the browser window. Press the reload option to see the changes in color.

Font

The right fonts can turn your fonts from boring to interesting. It would help if you chose a font that is good looking without compromising on readability. Some of the popular fonts are Times New Roman and Georgia. Set the fonts as follows.

<style type= “text/CSS”>
Body {font-family: Georgia, “Times New Roman, Times, Serif;
Color: blue
Background-color: #d8da3d }
H1{ font-family:Helvetica , Geneva,Sunsans-Regular , sans-serif}
</style>
</head>
<body>

You can include many other features to make your page more attractive and functional. You may add a horizontal line, some styling effects to the links, and a navigation bar. One you do all that, you need to put the styling sheet on a different page. When your site grows, you will have plenty of pages which need to be uniform in style. Having a separate file for the style sheet ensures that all the pages maintain that style. All you need to do is create a new text file. After you do that, cut and paste everything from your HTML style element into the new window. Do not copy as they do not belong to CSS.