Beginning Web Page Building

What is Html and CSS?

Html is short for "HyperText Markup Language". HTML is the standard markup language for creating web pages. HTML elements tell the browser what is what. As in, this is the header. This is the footer. This is a paragraph. This is a picture. All your text you want to appear on your webpage will go on the Html page. The layout of the page will start with the html page. The header will be at the top and the footer will be at the bottom. Do I want sections within sections. The initial layout, text and pictures are entered on the html sheet.
CSS is short for "Cascading Style Sheet". CSS is the language we use to style a Html page. With CSS, we tell the browser how we want the Html elements to be styled and how we want them lined up on the page. We also use CSS to fix widths, height, color, font size, what type of fonts and much more.
There are three different places you can put CSS. One and the most popular is on a seperate external style sheet. The second is inside the head element on the Html page and is internal CSS. What you put in the head element will override what is on the external style sheet. The third is inside the html tag and is Inline CSS. What styling you put in the HTML Tag will override what is in the Head element. If you make the width of a picture 200 pixels on the external style sheet but then make it 150 pixels in the head section, the picture will display at 150 Pixels. It is more conveniant to use the external style sheet. You can use the same sheet for all your pages. Meaning you can use a html template and change the color on all pages just by changing it on the style sheet. I use the css in the head section on some of my pages to change the styling on just that one page. A link to the external style sheet will go in the head section on the Html sheet for it to work. The head section, which also contains the title and meta information is not viewable to the person viewing the webpage.
You will also make seperate style sheet for styling on the mobile device using a media query. The styling will need to be a little different for the smaller screen. This is referred to as Responsive Web Design.

HTML Syntax

The syntax for a Html element is:
<html></html>
<head></head>
<body></body>
<br>

A element is everything from the start tag to the end tag. The <html> is the starting tag and </html> is the closing tag of a Html page. This tells the browser when the page starts and ends. Most tags have a closing tag but a few do not have the closing tag. The closing tag is the one with the slash. The <br>tag has no closing tag. It makes text move to the next line on the web page like hitting enter in a wordprocessor.
Attributes go in the Html tags. A Html attribute gives additional information about the element. <img src= "pic.jpg" alt="pic of a car"> The img element is the picture element and is used to put a picture on your page. The attribute is src and it tells the browser the filepath to the picture to be displayed. The alt attribute is the alternate text to be displayed in the case the picture cannot be displayed. The img tag also has no closing tag.
We will also include selectors with some of our Html tags. Selectors are used in the Html element and then on the style sheet. This tells the browser what CSS styling to apply to what Html tag(Element). They are the class selector, name selector and the other is the id selector. More on those later. But below is the HTML syntax for how to apply a class or id selector to a HTML tag on your HTML sheet.

<p class="paraone">Text Area</p>
<div id="leftcolumn">area for text and code</div>
When using html tags they have to be in a certain order.
This is wrong:
<b><u>Text to Display</b></u>

This is right:
<b><u>Text to Display</u></b>

That is the bold and underline tags. The opening underline tag comes after the opening bold tag, therefor when closing the tags, the closing underline tag has to close before the bold tag closes.

<html>
<head>
</head>
<body>
<p class="paraone">
<b><u>Text to Display</u></b>
</p>
</body>
</html>

See how it starts with the <body><p class="paraone"><b><u> And then closes with </u></b></p></body>
Sometimes a element will have no closing tag and does not matter how there closed. You must be careful with the order you open and close tags so it does not create errors. There is a wrong way to do it.

CSS Syntax

External Style Sheet:

body {
color:blue;
font-size: 1em;
margin:0;
}

This is the syntax for CSS on the external style sheet. A external style sheet is a seperate file with CSS coding on it. You will put a link to it in the head section of the html page so the html page can link to it and apply the coding on it to the HTML page.
body is the selector. This block of css code will apply to the body section of the html page. That is a name selector.
This is the syntax for writing CSS coding on the external style sheet:
selector {
property:value;
property:value;
property:value;
}
On the block of code above in bold, the color, font-size and margin are examples of properties and
blue, 1em and 0 are the values of the properties.
The colon must be at the end of every property:value; combination.
The curly braces must be there except when using inline CSS.

Internal Style Sheet:

<head>
<style>
body {
color:blue;
font-size: 1em;
margin:0;
}
</style>
</head>

This CSS in the head section and must be surrounded by a opening and closing <style> tag like above. The syntax for writing the code in the head section is the same as writing it on the external style sheet except it must be within html <style></style> tags.
This is the syntax for CSS in the head section of the Html page.
The CSS in the head section will override the CSS on the external style sheet.

Inline CSS:

<p style="color:blue;">The text being styled.</p>
<p style="color:blue;font-size:30px;">The text being styled.</p>

This style goes in the html tag itsself. The above examples are styling the text that is in between the two p tags.
One example has one property:value combination and the other has multiple Property:value combinations.
Use the external style sheet when possible. If using inline styling, you might have to fix it later, like when doing the mobile sheet for mobile styling.

Code Editor

You need a code editor. I have used Notepad++ for years. Before I used Microsoft Expressions Web which they stopped updating so I had to switch. I found out Microsoft has another one called Visual Studio Code. I had a look at it but I am adjusted to Notepad++ so I will stick with it. You will need to save all the files and images to the same folder on your computer. You will need all your code to be in small letters. Most coding does not accept capital letters. Instead of trying to figure out which is which, for now type all coding in small letters. Trying to figure out where you went wrong because something is not displaying right can be a tough job of troubleshooting. In HTML & CSS you can use all small letters. You can use micosoft notepad as a HTML & CSS editor. I explain how to save it in microsoft notepad as well as notepad++. They are not made by the same people. I personally recommend the notepad++. I have never had a problem with it.

RWDHTMLCSS.COM

Html & CSS Walkthrough