Hello all readers of my blog. I have created a contest for the best CSS code. All you have to do is comment underneath this post some CSS code to style the HTML code below. Along with the CSS code could you describe what you wanted it to look like. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>How to create a website</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
If you have any questions, please ask!
Tuesday 12 August 2014
Introduction to CSS
HTML on its own, as you can probably see, looks very boring on its own and looks nothing like all of the websites you will see on the web. To make websites look nicer, you will need to use CSS. CSS is even easier to learn than CSS, as it always looks very similar. Here is what is can look like:
h1 {
color: red;
font-family: Arial, sans-serif;
font-size: 44px;
}
The CSS code above makes the main heading: <h1>, red and Arial, size 44px. This is not much of a step forward, but shows how easy it is to manipulate HTML with CSS. The screenshot below shows the HTML page I laid out in the last post, with the above CSS.
h1 {
color: red;
font-family: Arial, sans-serif;
font-size: 44px;
}
The CSS code above makes the main heading: <h1>, red and Arial, size 44px. This is not much of a step forward, but shows how easy it is to manipulate HTML with CSS. The screenshot below shows the HTML page I laid out in the last post, with the above CSS.
To link a CSS file to an HTML file, you need to add a link tag to the head of the html page. To link a CSS page, called 'styles.css', you will need to add this link to the top of your html page:
<link type="text/css" rel="stylesheet" href="styles.css">
The 'styles.css' page will need to be in the same folder as the html page.
Introduction to HTML and CSS
HTML and CSS, as you probably know, are the most common languages used to make websites. They are very easy to use languages, and can be caught on quickly.
HTML, which stands for Hyper-Text Markup Language, as a very distinctive look, unlike almost any other language. Its basic structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
All HTML pages are made of tags, these are words surrounded by these brackets: <>. Every HTML page needs a <!DOCTYPE> tag at the top, to tell the browser that it is an HTML page. The main content of the page is found inside the body tags, and the information about the page in the head tags. The head and body tags are put inside the html tags. In the example above, there are some extra tags inside the head and body sections. Inside the head tags is the title tag. This is shown at the top of the browser window, not in the actual page. Inside the body tags are h1 and p tags. These are headings and paragraphs, which are shown in the html page.
HTML, which stands for Hyper-Text Markup Language, as a very distinctive look, unlike almost any other language. Its basic structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
All HTML pages are made of tags, these are words surrounded by these brackets: <>. Every HTML page needs a <!DOCTYPE> tag at the top, to tell the browser that it is an HTML page. The main content of the page is found inside the body tags, and the information about the page in the head tags. The head and body tags are put inside the html tags. In the example above, there are some extra tags inside the head and body sections. Inside the head tags is the title tag. This is shown at the top of the browser window, not in the actual page. Inside the body tags are h1 and p tags. These are headings and paragraphs, which are shown in the html page.
Welcome to How to make and design websites!
In this blog I will show you how to make websites and how to make them look good! The coding languages that I will teach you are: HTML, CSS, jQuery, PHP and MySQL. At first I will teach you the basics of all of the languages, and then I will teach you through targeted examples. You can ask for examples for me to explain, I will be happy to help!
Subscribe to:
Posts (Atom)