Nesting Elements in CSS

I'm beginning to work on my site, and the first part I'm going to tackle is the header and menu bar of my site, which is common to all the pages. So I've written up the html content document, which was pretty simple, and am now onto styling it with CSS. I spent yesterday learning the basic elements of CSS and all the things it can do by going through the CSS tutorials on W3Schools (http://www.w3schools.com/css/default.asp). It was quite simple to understand, and I found the "Try It Editors" were really useful to see the actual effects of the CSS code it was teaching. Although I haven't managed to memorise everything, it was good to have an overview of what I can do with CSS, so I could start mentally picturing which tools I could use to achieve the effects I want for my page.

Currently, I'm staring on my stylesheet, and am experiencing some trouble with understanding how to nest elements on my page without having to give everything a different id/class and confusing myself. So far, the general rule seems to be that you can signify a certain element within another element if you type the id of the element and then type a ">" before the nested element.

So for example, if I wanted to specify the paragraphs within my div with an id of "header", then in the css I use #header > p.

I found this page that seems to be helpful with the rules with regards to selectors and nesting within CSS, so sharing it here in case anyone is also having trouble in that area:

http://www.w3.org/TR/CSS21/selector.html

:)

Beginning CSS

So in class this week we learnt about how CSS styles work, and were given the chance to play around with various webpages, as well as a challenge exercise in which we were given a picture of a page and asked to re-create it with CSS. Having previously used tables for everything in styling my webpages, I can definitely see how CSS makes the content and style much simpler to decipher and change if updates are needed. The coding overall also looks much neater than the complex html used to generate tables (and tables nesting into other tables...O_O), and it is much easier to fix and change the style of a page with CSS.

I had some trouble with the challenge of re-creating the style with my own CSS coding, but in the end was happy to have been able to accomplish it (although I used much more CSS code than was required in the solution that was shown). Now having the basic concept of how CSS works, and how it styles webpages, I'm rather excited to practice using it and test out all the funky things it can do even without javascript or any programming!