PUBLISHED: APRIL 17, 2014 – ARTICLE: LEARNING HTML AND CSS
Learning HTML and CSS. If you would like to learn how to start using CSS and have never written a CSS style sheet before then our HTML and CSS tutorials will help you. I will show you how you can customize your WordPress website and change the look and style of the theme you are using.
What is CSS?
You have probably heard of CSS but have no clue to what it is or does, just that all websites use it. Our beginner CSS tutorials will show you step by step how to edit, and create new CSS codes for your site. You will learn more about what CSS is and what it can do for you.
CSS is an acronym for Cascading Style Sheets.
If I learn CSS what can I do?
Learning HTML and CSS you will be able to customize the look of your site.
CSS is a style language that defines layout of HTML documents. Learning CSS you will be able to change: CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and lots of other things. Once you learn CSS you can make lots of changes to the appearance of your site!
Follow our CSS tutorials and in no time at all you will be able to make your own CSS style sheets using CSS to give your website a new great look.
What is the difference between CSS and HTML?
CSS is used for formatting structured content.
This means that using CSS you can move stuff to any position on your page, change text size, colour and style, change background colour, change link size, colour and style, adjust main text content width, and so much more.
CSS is also used for formatting. Lets say you want your H2 heading to be a certain size and colour you would use CSS to tell any text you place in the H2 heading tag the size and colour you want it displayed.
The above CSS code tells this H2 tag what to do
If you create a website with 100 pages and you changed the font size or anything in the above CSS code and updated your site it would change all the H2 tags on all the 100 pages.
CSS is used by web designers to set up a theme or template and standardize information and formatting across all the pages of a website by placing the information or the “style” into one style sheet across all your pages.
Each page on your site will be the same layout, controlled by the CSS stylesheet.
HTML is used to structure content. Using HTML we can place stuff on our web page.
Look at the top right of this page. You can see the Facebook like. Using CSS we can tell the HTML code where to place the Facebook like on the page.
Our CSS code would look like this:
The CSS code above tells the HTML code below what to do. Because we have named the CSS code (left-column) it tells the HTML CODE (<div id=”left-column”>) the exact position we want the social buttons (and the rest of the HTML code for the social buttons) to display on the page. By changing top:0px; to top:50px; we would move the buttons further down the page, the same applies to the width, increasing or decreasing 202px; and increasing or decreasing margin-left:16px; moves the buttons more to the right or left.
Remember when you use HTML you have to close the code.
Place code here
Our HTML code would look like this:
<div id="left-column"> <table> <tbody> <tr> <td style="width:36px"> <a href="https://www.facebook.com/pages/How-To-Create-a-Website/202070306474810" title="Facebook" rel="nofollow" target="_blank"> <img src="http://www.2createawebsites.com/wp-content/uploads/2014/02/facebook-icon.png" alt="facebook" width="32" height="32" > </a> </td> <td style="width:36px"> <a href="https://twitter.com/2createaweb" title="Twitter" rel="nofollow" target="_blank"> <img src="http://www.2createawebsites.com/wp-content/uploads/2014/02/twitter-icon.png" alt="twitter" width="32" height="32"> </a> </td> <td style="width:36px"> <a href="http://www.linkedin.com/profile/view?id=115376420" title="Linkedin" rel="nofollow" target="_blank"> <img src="http://www.2createawebsites.com/wp-content/uploads/2014/02/in.png" alt="linkedin" width="32" height="32"> </a> </td> <td style="width:36px"> <a href="https://plus.google.com/u/1/117529780311464112418/posts" title="Google Plus" rel="nofollow" target="_blank"> <img src="http://www.2createawebsites.com/wp-content/uploads/2014/02/gplus.png" alt="gplus" width="32" height="32"> </a> </tr> </tbody> </table> </div>
Learning HTML and CSS – Learn how to customize a WordPress Website
Step 1 – Go to Appearance and click on editor.
Step 2 – You will be taken to the CSS stylesheet (style.CSS)
The first thing you should do if you want to change anything in your WordPress stylesheet is copy the code, then open up notepad and paste it there and save it. If for some reason you mess things up copy your saved version and paste it in the stylesheet and press update file.
How to change font size on a WordPress website
If you would like to change your font size then you need to look for the paragraph code, it looks something like this:
font-family: “Source Sans Pro”, Helvetica, sans-serif;
To change your text to a larger size increase the font-size, also increase the line-height to match, the line height is for the gap between your text lines. Change the text colour by changing the hex colour code here: color: #141412; The font style can also be changed by changing the font-family.
In the above code I have added (text-align: justify;) this makes the text align to the right as you can see on this page.
If you can not find the above code in your stylesheet copy my code and paste in at the bottom of your stylesheet and it will do the trick, you can then edit the code to what you want.
How to change the heading tags size on a WordPress website
margin: 10px 0;
margin: 25px 0;
margin: 30px 0;
margin: 36px 0;
You have six heading tags H1 the most important down to H6 least important. The H1 tag is only used once on the page and should have the largest text. Followed by the other heading tags that use a smaller text.
To change the heading tags on a WordPress website you will need to look for the CSS codes on the left or something that looks similar.
As you can see H2, H3, H4 will all be exactly the same size as they are controlled by one code.
To change the text size edit the font-size and line-height to what you want.
If you would like to change the colour of one of the heading tags and do not have the colour code in your heading tag then your heading tags are probably getting the colour from the body tag.
What you can do is add (color: #141412;) where (#141412) is the hex colour code to the heading tag you want to change the colour so it will look like this:
color: #141412; (add the colour code any where in the code and change to the colour you want)
margin: 10px 0;
How to change hyperlinks on a WordPress website
You might want to change your hyperlinks colour on your WordPress website you will need to look for a code like this on the left once you find it change the hex colour code to what you want.
Learning HTML and CSS will help you create a website that stands out from all the rest.
Being able to customize your website design will give you a big advantage when you create a website and learning HTML and CSS will be the first step. I will be adding lots more learning HTML and CSS tutorials on this section soon.
- CSS Tutorials
- How to change Background Color on Text Links in CSS
- Dashed Border around text using CSS
- Dotted Border around text using CSS
- Solid Border around text using CSS
- How to change Link Font
- Different Color Links
- How to change Link Text Size
- Make H1 Link H2 Link