1 / 24

Advanced HTML & CSS

Advanced HTML & CSS. Multimedia Storytelling Spring 2012. The DIV tag. Used to group items on a web page into sections/blocks/”boxes” Used to create more manageable content Positioning Styles. DIV tag tips.

lavonn
Download Presentation

Advanced HTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced HTML & CSS Multimedia StorytellingSpring 2012

  2. The DIV tag • Used to group items on a web page into sections/blocks/”boxes” • Used to create more manageable content • Positioning • Styles

  3. DIV tag tips • Add your DIVs after the contents of your web page have been added using basic HTML structure • Label your DIVs with a name you’ll recognize • Close out your DIVs immediately after your open them

  4. Basic DIV tag structure Wrapper (total content) Header Header Left Header Right Content Content Left Content Right Footer

  5. The box model

  6. The box model explained • Margin: Pushes the box away from other boxes. The margin does not have a background color, it’s transparent. • Border: A border that goes around the padding and content, between the margin and padding. • Padding: Pushes the border of the box away from the box’s content. • Content: The inside of the box, where text, images & media appear.

  7. Box model width & height • The total width and height of a DIV element includes the padding, border and margin • To calculate width: content width + left & right padding width + left & right border width + left & right margin width • To calculate height: content height + left & right padding height + left & right border height + left & right margin height • For example, the total width of the following DIV is 250px: • width:220px; padding:10px; border:5px; margin:0px;

  8. CSS + HTML = BFFs • CSS is a style sheet language that controls the presentation of HTML documents • While HTML controls the structure of a web page, CSS controls the style/presentation • By separating structure & presentation, you can change how a page looks without affecting the underlying structure

  9. With CSS…

  10. Without CSS…

  11. With CSS…

  12. Without CSS…

  13. With CSS…

  14. Without CSS…

  15. So what is CSS? • A style sheet language used to tell a browser what a web page is supposed to look like • Style sheets carry a collection of formatting rules • Commonly contained in a separate file, referenced/linked to the HTML document

  16. CSS syntax • Selector: References which element needs to be styled • Declaration: The formatting instructions • Always enclosed in curly brackets • Can contain multiple styles • Property: The item that needs to be styled • Font family, font size, etc. • Value: The style applied to that item • Helvetica, 12px, etc.

  17. CSS syntax examples • #wrapper {margin: 0 auto; width: 1010px; height: 820px; } • P {font-family: Arial, Helvetica, sans-serif; font-size: 12px;} • For both: • Curly brackets contain indicate the beginning and end of each declaration • Colons indicate break between the property and value • Semi-colons indicate the end of each property

  18. With CSS you can format… • Backgrounds (images, colors) • Fonts (family, size, style) • Paragraphs (alignment, indentation, letter spacing, word spacing, line height) • Margins & padding • Borders (style, size, color) • Color (text) • Positioning (relative, absolute) • Floating (left, right)

  19. Font & paragraph style properties • Font-family (type face) • Font-size (size of font) • Font-style (bold, italics, etc.) • Text-align (paragraph alignment) • Text-indent (first line of paragraph indentation) • Letter-spacing (space between letters) • Word-spacing (space between words) • Line-height (space between lines of type)

  20. Margins & padding style properties • Margins • Can be set the same for entire element, or individually based on side • Example • margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px • Padding • Also can be set the same for entire element, or individually based on side • Example: • padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px

  21. Border style properties • Can be set the same for entire element, or individually based on side • Three main properties: • Border-style • Border-width • Border-color • Example: • Border-top-style: solid; Border-top-width: 1px; Border-top-color: black;

  22. Background & color style properties • Basic background properties: • Background-color (basic color or gradient) • Background-image (photo, graphic, etc.) • Background-repeat (image repetition • Basic background properties: • Border-color (color of border) • Background-color (color of background) • Color (color of text)

  23. Positioning & floating properties • Fixed (positioned relative to the browser window) • Relative (positioned relative to its normal position) • Absolute (positioned relative to its nearest positioned parent element) • Floating (positioned directionally relative to other elements on the page)

  24. HTML & CSS extra help • Lynda.com: CSS Fundamentals • http://www.w3schools.com/css/css_intro.asp • http://www.css-help.com/

More Related