Girl Develop It Cincinnati: Intro to HTML/CSS Class 2

1,891 views

Published on

Published in: Technology, Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,891
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
67
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • CSS files are termed “cascading” stylesheets because of two reasons: one stylesheet can cascade, or have influence over, multiple pages. Similarly, many CSS files can define a single page.
  • Attributes provide additional information about HTML elements.Attributes are formatted like this: attr="value"
  • Make reference to a landing page – how it can like a different format t
  • Girl Develop It Cincinnati: Intro to HTML/CSS Class 2

    1. 1. If you have not already done so, please download Aptana: http://aptana.com Brandery Airport: brandery123 GDI CincinnatiIntro to HTML/CSS: Class 2 Erin M. Kidwell / @erinmkidwell/ erin@girldevelopit.com John David Back / @johndavidback / johndavidback@gmail.com
    2. 2. Agenda• Review of last week• Intro to CSS• Types of CSS Stylesheets• CSS Selectors & Properties• CSS Classes & Ids• Basic CSS Properties: How to control fonts, colors• Back to HTML: div and ul tags• Time permitting: The CSS Box Model
    3. 3. Review Last Week : HTMLHTML History How to find HTML: 1) View Page Source 2) Inspect Element HTML vs CSS How to write HTML code: Notepad/TextEdit or and HTML EditorAptana installment Creating/Saving a new projectHTML Vocabulary: Tag, Element, AttributeExercises • html, head, title, body, p, h1-h6 • br,   character codes • a, href, img, src • img, src • ol, ul • th, tr, td • Forms
    4. 4. Brief review of termsTagTags are used to denote the start of an element or the end of an element A tag is either a start tag or an end tag. (i.e. </p>). Examples of tags: <strong>, <html>, </p>, </body>ElementAn element is the start tag + its content + the end tag: Ex: <tag> + text + </tag>AttributeAttributes provide additional information about HTML elements.Attributes are formatted like this: attr="value" The attribute always goes in the opening tag, never in the closing tag. In <a href="http://www.google.com">go to google</a>, href is the attribute. In <img src=”http://www.google.com/images/logos/ps_logo2.png” />, src is the attribute.
    5. 5. HTML vs CSSCSS stands for Cascading Style Sheets.How does HTML fit in with CSS? CSS was created to allow the separation of document content from document presentation.
    6. 6. HTML vs CSSHTML defines the content of a document: This is a HEADING •this is a new bullet!CSS defines the formatting and style of thecontent your website. I am some blue text! I am Courier font!
    7. 7. Background: CSSCSS is what gives your page format and style.The magic of making websites look cool andclear and visually-striking is the job of CSS – Often, the people who are good at CSS are not programmers! – Web designers and other artist-types tend to excel at CSS.
    8. 8. HTML without CSS Note: this is a Comment. It does not show up on your webpage but can be helpful to leave yourself notes! <!-- Type a comment here -- >
    9. 9. CSS SyntaxA CSS rule has two main parts: Selector Patterns used to select the HTML elements you want to style Declarations Property and value of style you plan use on an HTML element Much of learning CSS is about learning which CSS properties you need to use in order to get the formatting or style you want. In a very simplified way, I like to think of these as: Property=Noun, Value=Adjective. That analogy works if you don’t think about it too much!
    10. 10. CSS SyntaxDeclarations: Property and value of style you plan use on HTMLelement. Declarations end with a semicolon Declaration groups are surrounded by curly brackets. So, in this example – your h1 header is blue and a 12 point font.
    11. 11. CSS PropertiesMany CSS properties have self-explanatory names: • background-color • font-family • font-size • color • width • heightComprehensive list of all CSS properties:http://w3schools.com/css/css_reference_atoz.asp
    12. 12. CSS StylesheetsThere are 3 ways to implement CSScommands into your site: 1. Inline Style 2. Internal Style 3. External Style
    13. 13. 1. Inline StyleInline: combines HTML content with CSS style in onepage. Use the style attribute in the relevant tag. The style attribute can contain any CSS property. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>Inline stylesheets are considered inefficient. If your websitehas multiple pages you’re styling for each individual page.So if you want a mass change, you’d have to revise the CSSon each individual HTML page.
    14. 14. Example: Inline StylesWe’re going to display three paragraphs of text (three p elements) and give them eachthe same style:The first CSS property we will use is font-family:<p style="font-family: Monaco, Arial, sans-serif;">This is my first paragraphof text.</p><p style="font-family: Monaco, Arial, sans-serif;">This is my second paragraphof text.</p><p style="font-family: Monaco, Arial, sans-serif;">This is my third, alsosuper! exciting!!, paragraph of text.</p>
    15. 15. Example: Inline StylesThe second CSS property we will use is color:<p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is myfirst paragraph of text.</p><p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is mysecond paragraph of text.</p><p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is mythird, also super! exciting!!,paragraph of text.</p>
    16. 16. Example: Inline StylesThe third CSS property we will use is text-align:<p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is myfirst paragraph of text.</p><p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is mysecond paragraph of text.</p><p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is mythird, also super exciting!!, paragraph of text.</p> Now you have more style than content on your page. Can you see how this is inefficient if you need to make all paragraphs black? You would have to revise each individual line. Inline Styles negate the purpose of separating content and presentation.
    17. 17. 2. Internal StyleInternal: Defined in the head section of an HTML page using the<style> tag. Could be used when a single html page has a unique style.
    18. 18. Example: Internal Style Unique landing page – uses internal style
    19. 19. Example: Internal StyleTwo column layout – differs from landing page due to styling. Separate CSS than thelanding page, saved on a .css file, not written within HTML content
    20. 20. Example: Internal Style See how the style is incorporated into the html code? Everything is maintained on one page.
    21. 21. 3. External StyleExternal: Use one CSS file for all your pages.Saved as a .css file extension.Does not contain html tags but is referenced in yourhtml file.Ideal for use when style is applied to many pages.Example: any presence of “Girl Develop It” shouldshow up pink on all pages of our website.
    22. 22. Example: External StyleHTML CSS
    23. 23. SelectorsA selector is what links or connects your CSS with a specific HTMLelement, or set of elements using the <link> tagHTML CSS
    24. 24. Summary: CSS Stylesheets Inline Internal External Placed directly in the Placed in the head Saved as a separate HTML element section of the HTML .css file, linked to the HTML page No Selector used Uses the <style> tag Uses the <link> tag in Inefficient, only Only applies to the the <head>tag applies to the HTML current HTML page element Can contain all the styles needed for all Only recommended if Only recommended if pages on the site. you want to you need to style over-ride a style on only one page, or if Recommended your internal style you want different sheet pages to have varying styles.
    25. 25. Exercise: Creating a separate CSS file Refer to Class 2 Handout: Adding a CSS Page
    26. 26. Reference: Linking HTML file to CSS fileLinking our HTML file to our CSS file 1. We need to link our HTML file to our new CSS file. 2. We do this via the <link> element. • <link> is a self-closing tag • <link> goes in the <head> section of our HTML file.
    27. 27. CSS Properties (reminder)Many CSS properties have self-explanatory names: • background-color • font-family • font-size • color • width • heightComprehensive list of all CSS properties:http://w3schools.com/css/css_reference_atoz.asp
    28. 28. CSS Selectors: TypesSelectors are one of the most important aspectsof CSS as they are used to "select" elements onan HTML page so that they can be styled.The selector comes before the curly brackets { }We will cover three kinds of selectors: 1. Element-type selectors (a, body, html) 2. Class selectors 3. id selectors
    29. 29. CSS Selector: Element-type In this example, all h2 headings will be italicizedElementSelector ValuesProperties Declaration Declaration = property: value;
    30. 30. CSS Selector: Element-typeA selector is what links or connects your CSS with a specific HTMLelement, or set of elements using the <link> tagHTML CSS In this example, selector indicates the HTML content should be italicized
    31. 31. CSS Selector: ClassCSS class selectors define the styles for many HTMLelements with the same class name.How does the browser know to look for the blueparagraph? • The . before the name of the selector tells the browser this is a class selector • . = class selector
    32. 32. CSS Selector: ClassCSS class selectors let you set “labels” on elements,and style each labeled element differently.You set these labels in HTML by assigning a classattribute: Example: with this p style, all paragraphs will have blue text, Monaco font, and aligned to the right.
    33. 33. CSS Selector: idCSS id selectors define the style for the UNIQUEHTML element with the same id name. • There should be only one unique id per HMTL document. • How does the browser know to look for username and password in the id attribute? • The # before the name of the selector tells the browser # = id selector
    34. 34. CSS Selector: id
    35. 35. CSS Selector: id (Example)
    36. 36. CSS Comments /* */Just like in HTML, CSS has comments.Comments are ignored by the browser, but it’s ahandy way to make notes for yourself.
    37. 37. Example: CSS element selectorsLet’s put what we just learned topractice.Inside our css file, we have abody selector and no stylesdefined.Let’s add the property font-familyand the value Helvetica to add anew default font for our page.
    38. 38. font-familyAdding this to our CSS changes the font for our entirewebsite to Helvetica instead of the default (TimesNew Roman).If you set the font-family property to Helvetica, andHelvetica is not installed on your visitor’s computer, itwill not work.The browser will use the default font instead, TimesNew Roman.
    39. 39. Using multiple values with font-familyTo specify multiple font types, list them in your order ofpreference, separated by commas:If you want to use a font with a multiword name, be sureto put it in quotes.
    40. 40. Back to HTML: divOne html tag we did not cover last week is the div tag:• The div tag is a great way to apply styles to a bunch of elements all at once. We accomplish this by nesting items within a div.• We can wrap the two paragraphs in one div element, give that div a class, and style that class! One class instead of two!Read more at:http://w3schools.com/tags/tag_div.asp
    41. 41. Back to HTML: div tagsYou will often use these spacing properties on divelements.What if you want a centered design? • One way to align a whole div element in the center of a page is to set that div to have a specified width, and to have margin: 0 auto
    42. 42. Back to HTML: div tags What if we want the first 2 paragraphs to be right aligned, but we don’t want any other paragraphs to be right-aligned? We could set them all to a class... but is there an easier, faster way?
    43. 43. Back to HTML: div tags We can wrap the two paragraphs in one div element, give that div a class, and style that class! One class instead of two! CSS HTML
    44. 44. Exercise: CSS and divLet’s put what we just learned to practice.Inside your html, nest some of your content in div elementsAdd some declarations to your CSS Text Properties color h2 {color:red;} text-align p {text-align:left;} text-indent p {text-indent: 5px;} text-transform h1 {text-transform:uppercase;} Font Properties font-family p {font-family:veranda,arial;} font-size p {font-size: 12px;} font-weight p {font-weight:bold;} font-style h2 {font-style:italic;} Color & background-color body {background-image: url(grahic.jpg); Background background-image color: #FFFFFF; Properties background-repeat background-color: #000000; } color Hyperlink Colors a:link a:link {color: #999999;} a:visited a:visited {color: #FFFFFF;} a:hover a:hover {color: #CCCCCC;} a:active a:active {color: #333333;}
    45. 45. Exercises: Refer to Handout 2
    46. 46. HomeworkReading:HTML lists: http://w3schools.com/html/html_lists.aspStyling lists: http://w3schools.com/css/css_list.aspStyling links: http://w3schools.com/css/css_link.aspClass vs Id Selectors: http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm
    47. 47. Time permitting: The Box ModelThree properties are defined by something called the CSS“Box Model”: • margin • padding • border
    48. 48. Time permitting: The Box ModelThe CSS box model is essentially a box that wraps around HTML elements, and it consistsof: margins, borders, padding, and the actual content.The box model allows us to place a border around elements and space elements inrelation to other elements.The image below illustrates the box model:Read more at: http://w3schools.com/CSS/css_boxmodel.asp
    49. 49. Time permitting: The Box ModelThe content edge surrounds the rectangle given by thewidth and height of the box, which often depend on theelements rendered content. The four content edges definethe boxs content box.The padding edge surrounds the box padding. If the paddinghas 0 width, the padding edge is the same as the contentedge. The four padding edges define the boxs padding box.The border edge surrounds the boxs border. If the borderhas 0 width, the border edge is the same as the paddingedge. The four border edges define the boxs border box.The margin edge surrounds the box margin. If the marginhas 0 width, the margin edge is the same as the borderedge. The four margin edges define the boxs margin box.
    50. 50. Time permitting: The Box Model

    ×