CSS 101
- 1. CSS 101 MPM107 Group Exercise By, Bramwell Su
- 2. How Does CSS Work? CSS = Cascading Style Sheets Uses multiple styles sheets to customize the appearance of different web page aspects Allows you to organize the content and style separately CSS can be internally coded in HTML or kept outside in an external style sheet
- 3. Essential Syntax <Style></Style> - style tag signifies the beginning and end of CSS code Selector – the HTML element Declaration – the piece of code that makes the style, made up of the Property and Value Property – the property of the HTML element Value – the value of the property being declared
- 4. Id vs. Class Id properties are used to adjust styles for a unique HTML element Class properties are used to adjust styles for all HTML elements of the same class. =
- 5. Different CSS Approaches Inline Style - Very simple but not flexible Internal Style – More Flexible but only applies to a single web page External Style – Most Powerful and can be used across multiple pages = What could be in the .css file
- 6. Box Model Layout One of few layouts HTML elements can be autoarranged Box Model allows us to “box-in” elements with things like borders, padding and margins =
- 7. Floating vs. Positioning Floating is a more dynamic way to position elements, the browser will automatic adjust its appearance Floating is similar to how word-wrap works with images. It’ll go around the image. Positioning is a more absolute way to position elements, it is set according to our instructions regardless of other elements Positioning can also be used to overlap elements =
- 8. Grouping vs. Nesting Grouping – used to organize code, you can group elements that share the same style Nesting – used for settings styles on selectors within selectors =
- 9. Aligning Elements Liking floating and positioning, you can set up elements to align to different positions Useful for dynamically adjusting to screen resolutions =
- 10. Navigation Bars CSS has built-in navigation styles Can be used to create navigation bars/buttons for HTML webpages They basically function as a list of links =
- 11. Image Gallery Using everything explained previous you can set up an Image Gallery with CSS =
- 12. Work Cited Weinman, Bill. CSS for Developers. Lynda.com, 12 Feb. 2010. Web. 15 Nov. 2013. http://www.lynda.com/CSStutorials/Examining-three-ways-applystyle/52341/61631-4.html CSS Tutorial. W3 Schools, n.d. Web. 15 Nov. 2013. http://www.w3schools.com/css/default.asp “Google Logo." Wikipedia: The Free Encyclopedia. Wikimedia Foundation, Inc. 13 Nov. 2013. Web. 15 Nov. 2013. http://en.wikipedia.org/wiki/Google_logo