Any webpage contains HTML5 and CSS3. The HTML is the mark-up language for your text. The CSS3 is the make-up of your page. Like colors, back-ground images, colors, sizes of images, sizes of fonts and much more..

When you use a program like WordPress for a blog then you have seen the visual and the text. The text is used to add HTML5. In the text inline style elements like padding, margin, colors.., can be manipulated.

Like to have more freedom in your design? –> Learn to code. HTML5 and CSS3 are the basics and simple to learn. The basics of the code you can read below, not the details of how to code…

 

html5 and css3Building blocks with HTML5 and CSS3

Blog, the basic set-up with HTML5 and CSS3

 

A webpage or blog, in principle, is divided into two big blocks: the HEAD and the BODY.

HEAD

In the HEAD we will write the TITLE and meta description text.  Both are used in the results in the search engines. To have a better search ranking the text in both should reflect your topic in your blog. See also the blog about simple SEO. Also in the HEAD you can find the links to the CSS3 files and JavaScript files for example a slider or Google Analytics.

When opening your blog the uses experience the CSS3 and Javascript as these are part of the make-up  of the blog.

The title will be seen in the tab on the topside of your browser page. Normally I have several pages open and for navigational reasons. The tab only shows the first 30% of your Title. For the user experience, best practice is to show your keywords in those first 30%.

BODY

The body is the visible part for the reader. In the BODY are all the HTML5 text, the pictures and videos.

The structure of every blog or webpage is build out of blocks. The blocks are square or rectangle. In principle you can make hundreds of block but this is normally not done.

With the HTML5 you specify the different blocks with the following most common names :

  • HEADER – top of the page, with a slider or picture
  • SECTION – middle part of the page, with the main text inside
  • FOOTER – bottom of the page, normally used for links
  • NAV – used for navigation
  • DIV – used to make more blocks inside HEADER, SECTION and FOOTER.

In the HTML5 text the most common used elements are: the p for paragraphs, the a for anchors or links, the img for images, the h1 ..h6 for headings. Those can also be seen under the tab text if you edit your blog in WordPress.

CSS3

With a special document with the extension.css in the head, the blog will get its make-up. In the CSS3 document, the precise spots, the back ground colors, the sizes etc of the HEADER / SECTION / FOOTER / NAV and DIV’s, are defined.

Class and id notations links HTML5 and CSS3 files

Normally the DIV blocks, the spans in the HTML5 document will be identified with an “id” or “class” notation. The difference between the both is that an “id” is used for one div while a “class” name can be used on multiple divs and spans. Example of the notations are :

  • <div class=”red”>class name is used for multiple blocks, In this case the name is red</div>
  • <div id=”green”>used for a single block, in this case the name is the green</div>

To understand class and id is the key to understand CSS, so here another visual example. The class red has the same blocks, both float to the left and both has the background color yellow. Because the width and height are not specified, the complete block doesn’t look the same

3 same blocks with class=red floating to the left and background color yellow. Width = 250 px Height =250px
3  same blocks with class=red floating to the left and background color yellow Width = 250 px Height =250px
still same block with class=red floating to the left and background color yellow. Width = 250 px Height =300px. If you use for height auto then the bock will adjust to the text. This is used in the orange block.
same block with id = green and floating to the right and background color orange.Width = 250 px Height =auto

The “class” notation in the CSS3 file is starting with a “.” and the “id” notation with a “#” The name remains the same as the name in combination with the “.” or “#” will be the link between the html5 and css3 files.

In last example, the text in the CSS3 file looks like:

.red {background-color:yellow;float:left;}  —this is a class notation in CSS3 file

#blue{background-color:orange;float:right;} –this is a id notation in CSS3 file

In the CSS3 document you will define for the different class and id names: the place, the width, the height, the colors, borders ,letter types etc This works the same as for HEADER / SECTION / FOOTER / NAV.

The website to go is W3schools. Here you will find all html5 and css3 tutorials including examples.

view page source

html5 and css3 view source

view source html5 and css3

With a right click of the mouse on a web page,  the “view source” can be clicked. Now the source of this document will be revealed, so the actual HTML5 (with inspect element our live is made easy and we can find for example the used colors code back).

The CSS3 and JavaScript files can be mostly followed via the link in the HEAD section (the head section can be found on the top of the page).

Editors

To write code, you don’t need to spend any money. Till now I used Notepad++ It’s is free and more advanced then Notepad (although you also can use this). But in the open source there are two top editors called Foundation and Bracket. Bracket is from Adobe. I am using this next to the Notepad++ as both has their own advantages.

  • Bracket
  • Foundation
  • Notepad++

Conclusion

HTML5 and CSS3 are used in any page or post and can be learned very quickly. WordPress gives you a change to use some inline styling via the button text. Normally the style will be done in a separate document, but this requires a bit more knowledge.

Any webpage is constructed with blocks and therefor almost always easy to design and develop. With some color pens and a piece of paper anybody can deliver a start-up for a required design. It is the task of the designer to transform it in a user friendly design.