This is a short and made-easy tutorial on how to start HTML and CSS. It is intended for those who are just starting to know CSS and those who were not able to write one. It just shows how to create an HTML file, a CSS file and how to make them work together. The following are the steps:
Step 1: Creating the HTML file
Choose a plain text editor for your code (e.g. Notepad, TextEdit, etc.). You may use advanced tools and commercial programs such as Dreamweaver, Style Master and other. But as of the moment, a simple text editor will do fine. This is your first CSS style sheet, you might get confused with advanced features.
In a blank document, type in:
<html>
<head>
<title>My first CSS</title>
</head>
<body>
<!– Site navigation menu –>
<ul class=”navbar”>
<li><a href=”index.html” mce_href=”index.html”>Home page</a>
<li><a href=”me.html” mce_href=”me.html”>My Life</a>
<li><a href=”town.html” mce_href=”town.html”>My Town</a>
<li><a href=”links.html” mce_href=”links.html”>Links</a>
</ul>
<!– Main content –>
<h1>My first CSS</h1>
<p>Welcome to my page!
<p>The contents are written here.
<p>More contents!
<!– Sign and date the page, it’s only polite! –>
<address>January 19, 2008<br>
by Me.</address>
</body>
</html>
*** The words within < and > are called HTML tags.
<html> - the document is enclosed in this tag
<head> - contains the <title> and saves a space for more information not shown on screen
<title> - shows the title of the document on the title bar of the browser
<body> - space where the contents is placed
<ul> - introduces unordered list
<li> - establishes numbered items
<– — > - enclosed comments; the browser ignores this
<p> - is for paragraph
<a> - means anchor for hyperlinks
<address> -
You may search in the web for more HTML tags and tutorials. Let’s just say that this is going to be one page site with a few similar pages. Just like a common Web page, this has a menu of links to other pages, a diffirent content and a signature.
Now save your document where you want to put it with a .html extension. Do not close the window yet since we will need it later. Open your web browser and click File > Open. Locate the html file and open it. Our html page should look like this:
Step 2: Adding color, fonts, navigation bar, links style and horizontal bar
Inside the <head>, right after the <title> tag, insert the following code:
<style type=”text/css”>
body {
padding-left: 11em;
font-family: Georgia, “Times New Roman”,
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
Style sheets are bounded by rules. Each rule has three parts:
1. The selector, which tells the browser which part of the document is affected by the rule;
2. The property, which specifies what aspect of the layout is being set; and
3. The value, which gives the value for the style property.
Example: body {background-color: #d8da3d }
Your styled page should look like this:
Step 3: Putting the CSS codes in a separate file
What we did was a page with an embedded style sheet. We will put it in a separate file. Your page may probably grow and would have several pages to share the same style.
Open your text editor and copy-paste code. Do not include the <style> tag, it belongs to the HTML.
body {padding-left: 11em;
font-family: Georgia, “Times New Roman”,
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }Save it under a filename with a .css extension. Put it in a location where you want to save it.
Step 4: Putting them altogether
Now, we will remove all the style sheet code in our HTML file. Instead, insert the following code after the <title> tag:
<html>
<head>
<title>My first styled page</title>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>
[etc.]
Last step is to put both files, html and css files on your Web site. Now you have a little background on how to do CSS.
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Lascia una risposta