CSS Selectors and Styling
#CSS
##CSS Selectors
Today we had a chance to talk about and introduce CSS selectors and styling. I had the students using a template that was built up with normalize.css to deal with cross browser problems.
I had explained the concept of inline styling yesterday when I introduced basic HTML. We added widths and colors to different html elements.
Today I showed an example of how that can get very clunk and diffucult and how people invented CSS style sheets instead to try to overcome this. It all ties back to that basic programmer philosophy, DRY. Why add inline stylign to multiple elements when we can just manage it in one central location using a stylesheet.
Separation of concerns was another thing that my coteacher brought up, we dont want things related to stylign clogging up out HTML page. Similarily, we dont want things related to the text/copy clogging up the stylesheet.
We started off with just adding a link to a style sheet and using *
to change the color of every element on the page to a red color just to make sure that everyone had a stylesheet linked.
Then we transitioned to using element
, class
, and id
selectors. I gave the students a list of properties that we implemented on different elements.
To try to keep it interesting for the people who had experience with CSS before I talked a little about CSS3 transitions and transforms.
I had them implement all thse things on a basic HTML homework assignment I ahd given them the night before