Html & CSS Walkthrough

Introduction

I am someone who has been playing with Html since about 2000. It was just a past time for me to find information and free lessons online about Html. I think it was Html3. I took a break from it and when I seen xhtml come out, I studied it. Then another break. Then, Html5 and Css3 came. This time time I took a bunch of classes on it. I thought and thought about what I want to put on a website. I never come up with the right idea so I decided to write a site about what I know best.
I am first going to make a template which I have done many times. Then after that I will come with something to expand it. A Template is a page without content on it yet. You keep the template and make copies of it to make your webpages with. This way you do not have to make one for every page. You can if you want. But it is much easier to make a template, copy and paste the template to put content on it.

Responsive Web Design

I am going to use CSS3 to make a seperate style for the big screen and another style for the small screen. It is not hard to do. All I know is Html and CSS. I do not do forms on this website which requires server side programming. Html and CSS is all you need to make a good responsive page. You make a link to the style sheets in the head section which will refer to the different size screens. You can have a css sheet for the bigger screen and another CSS sheet for the smaller screen. If your really energetic, there is a way to have 3 styles. One for phone, one for tablet size and one for the laptop and desktop.

Faqs

1. On my site I have a lot of paragraphs, Lists and Tables. All 3 of these have there own styling. I do not put a list or a table in a paragraph. If there is a paragraph before the list or table, I close the paragraph before the list or table and then I can reopen a paragraph after list or table.
2. My list of links to pages is long and I had to do something with it. Thats why I have a table of contents. I just converted my site map page. That works good for me and will also work good with the mobile device.It is recomended to have a site map on your site for search engines.
3. Html is used for laying out your page and entering the text, pictures, lists, table and links. Css is used to style the text, pictures, lists, tables and links. Html and Css generally go on 2 seperate sheets but you can put them on the same sheet as I will explain. We use selectors on the Html sheet and then on the Css sheet to specify what styling is meant for what Html element. Any tag on the Html sheet is a element.
4. Overflowing text inside your box.
   1. The overflow property can be used. overflow: visible; is the default setting. overflow: hidden; will hide the content that is overflowing. overflow: scroll; The overflow is hidden but scroll bars are inserted to see the rest of content. overflow: auto; is similar to scroll but will only add scrollbars when necessary. For the overflow property to work, you must have a specified height on the box.
   2. If you have long words that have no spaces, there is no place for the sentence to break and go to the next line. word-break: break-word; will make the word break in the middle of the word and make it go to next line. Just add the css to the css for the block your working on. This has happened to me on the mobile sheet. I added this to the section I was working on.
   3. On the mobile, when I had used text-align:justify;, there was a problem with the word spacing having automatically increase space between words. Justify makes the left and right side of the paragraph line up straight thus sometimes having make more space between words to make the right side straight. I started using text-align:left; instead.