The Start of a Journey - HTML5 & CSS3 - Part 2

As mentioned before I'm going to elaborate on the other css classes in my css styling sheet, first up; .nav {} class:

Here is my .nav CSS class specification, currently anything that is under the influence of <div class="nav"> will automatically adopt these characteristics. The first 'font-family' line of code tells them all to be the font 'HelvecticaNeue' in the 'color: black;' with a padding of 20px; this adds distance from the edge of the div to the text element, pushing it further down, and it will remain in the center because of the 'text-align: center;'                                                           command this will always keep it in the middle of the page.

The next CSS Class is '.nav li {}' this means that anything with a class of .nav, and .li will be effected allowing you to target once specific element. This overrides the original .nav if there are any conflicting lines of code as the browser reads from the top to the bottom of each page. So for example here the .nav li is saying anything that is a <li> within a <div class="nav"> will now turn red, it will have a margin of 10px inbetween each word with the opacity of 80% and most importantly it will display 'inline' this means that instead of it being a 'block' level element and having 100% width making everything stack                                        on top of each other it will now rest side by side, which is expected in                                                      navigation.

---

Now looking at the <p> tags that I looked at in my previous blog post, these refer directly to my title and subheading:

The first 'Welcome to my website' is <p1> and here is the CSS3 styling:

Very simply it is just a change to the font-size of the text, as it is within a div being influenced by the .nav I don't need to specify the font or padding or display type. this makes customising individual areas of the page an easy job.



Finally, the <p2> tag for the second sub heading 'please select a subject to learn more':
This is the p2 class it has a very slightly smaller font size of 18px and I have also used some new code here, 'opacity 0.6;' gives it the opacity of 60%. The third and final piece of code is currently being un-used however I have left it in there so if I want to give it a drop shadow I can, each '0px' can be changed to a value and each moves the position / increases the strength of the shadow.