1 / 16

HTML & CSS

HTML & CSS. Design for Journalists Summer 2013. HTML & CSS recap. HTML defines the structure of a web page. HTML is to a web page what nouns are to a sentence: <p></p> (a paragraph starts here and ends here) <div></div> (there’s a division of content here)

melina
Download Presentation

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. HTML & CSS Design for JournalistsSummer 2013

  2. HTML & CSS recap • HTML defines the structure of a web page. • HTML is to a web page what nouns are to a sentence: • <p></p> (a paragraph starts here and ends here) • <div></div> (there’s a division of content here) • CSS defines the style of the content. • CSS is to a web page what adjectives are to a sentence: • {color:#000;} (text color is black) • {background-color: #ffffff;} (background color is white) • Combined, the above HTML & CSS tell the web browser that we want: • A paragraph with black text. • A box with a white background.

  3. HTML: The DIV tag • The best way to divide content on your web page so it can be managed and stylized is by using DIV tags. • DIV tags group items into sections/blocks/boxes • DIV tags make the content more manageable for: • Positioning (left, right, center, # of pixels, etc.) • Styles (background colors, fonts, line spacing, etc.)

  4. HTML: Basic DIV tag structure Wrapper (total content) Header Header Left (logo?) Header Right (social media?) Content Content Left (text?) Content Right (image?) Footer

  5. 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

  6. Stylizing DIVS: the box model

  7. 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.

  8. CSS syntax • Selector: References which element needs to be styled • A paragraph, DIV, etc. • Property: What specifically you’re changing about the selector • Font family, font size, etc. • Value: The style applied to that item • Helvetica, 12px, etc.

  9. 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)

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

  11. 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)

  12. 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

  13. 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;

  14. Color style properties • Background-color (color of background for page, DIV, etc.) • Border-color (color of border) • Color (text color)

  15. 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)

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

More Related