CSS Foundations, pt 1
Upcoming SlideShare
Loading in...5
×
 

CSS Foundations, pt 1

on

  • 2,204 views

http://shawncalvert.com/webdesign-1

http://shawncalvert.com/webdesign-1
Web Design 1
Columbia College Chicago

Statistics

Views

Total Views
2,204
Views on SlideShare
1,276
Embed Views
928

Actions

Likes
0
Downloads
33
Comments
0

1 Embed 928

http://www.shawncalvert.com 928

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS Foundations, pt 1 CSS Foundations, pt 1 Presentation Transcript

  • CSS Foundations, pt 1 22-3375 Web Design I // Columbia College Chicago
  • For Starters ! ! Post assignment and blog post Review student blog posts Instructor review of Assign 3 HTML refresher exercise ! !
  • Skills learned so far
 how to create a web directory and link between files Code a basic webpage from scratch how to mark up different types of content with appropriate HTML tags how to use basic HTML attributes to create links and web images how to set up a site domain, server host and install a wordpress site
  • Three layers of web design:
 Structure, Style, Behavior
  • Three layers of web design
  • Three layers of web design
  • Three layers of web design
  • BEHAVIOR Javascript PRESENTATION CSS Imagery STRUCTURE HTML markup Site planning Three layers of web design
  • What is CSS?
  • Cascading
 +
 Style Sheet
  • Stylesheet
 A stylesheet is a set of rules defining
 how an html element will be “presented” in the browser. These rules are targeted to specific elements in the html document.

  • The concept is very similar to how you create stylesheets in InDesign.
  • Cascading
 Most pages will have multiple stylesheets that define different styles to the same elements. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.

  • low importance Client (user) stylesheet
 Linked stylesheet
 high importance Embedded stylesheet
 Inline Styles

  • Stylesheet 1
 make the paragraph 16px, Verdana, red
 Stylesheet 2
 make the paragraph blue
 16px, Verdana, blue

  • How to add css to your document
  • There are 2 basic ways to add styles to your html page:
 External (linked)
 <head> Internal

  • External 
 <head>
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
 </head>
 Except in special circumstances, best practice is to keep all your styles in a separate css document. Linked stylesheets can be applied across multiple documents and sites.
  • Internal (embedded) 
 <head>
 <style> p {color: red} </style>
 </head>
 You can add styles directly into your html page using the “style” element in the <head> of your document. Embedded styles apply ONLY to that 
 html document.
  • Internal (inline) 
 <p style=”color: red”>Red Text</tag>
 You can add styles directly into your html markup using the “style” attribute on opening tag of your element. This is called an “inline” style. Inline styles apply ONLY to that specific instance of the element.
  • Best Practice
 In most cases you should use the external method of adding styles to your html page. Writing the css in the <head> of your document is acceptable if you definitely only want to apply the styles to a single page. However, adding your styles “inline” — inside a html starting tag, e.g. <p style=”font-size: 14px”> — should be avoided. 

  • CSS Syntax Syntax = the rules for how to write the language

  • Three terms for describing your styles: CSS rule CSS selector CSS declaration

  • CSS Rule 
 selector {property: value;}
 declaration
 Every style is defined by a selector and 
 a declaration. The declaration contains at least one property/value pair.Together they are called a CSS Rule.
  • CSS Selector body 
 {font-family: Arial, Helvetica}" p {color: #666666}" h1 {font-size: 24px}" a {color: blue}
 The selector associates css rules with 
 HTML elements.
  • CSS Selector p {
 color: red
 }
 
 
 The selector is typed in front of the declaration, with a space separating it and the opening curly-bracket (aka curly-brace). Typically, extra spaces and returns are added as shown for the sake of readability.
  • CSS Selector 
 h1,h2,h3,h4 {
 font-weight: bold
 }
 
 You can apply styles to multiple selectors in the same rule by separating the selectors with commas.
  • CSS Declaration 
 p {
 property: value
 }
 
 The declaration is always defined in a property/ value pair. The two are separated by a colon. How you define the properties will affect how HTML elements are displayed.
  • CSS Declaration 
 p {
 font-family: Arial, sans-serif;
 font-size: 14px;
 color: #666666;
 }
 
 You can apply multiple declarations to a selector(s) by separating the delcarations with semi-colons.
  • CSS Selectors
  • p Type (element) # ID . Class Descendant

  • Type (element) Selectors 
 body {declaration}
 p {declaration}
 h1 {declaration}
 ul {declaration}
 The simplest selector is the type selector, which targets an html element by name.
  • The essential selector types (elements)
 Primary
 Structure Body
 Elements Formatting
 Elements html p em body br i h1 – h6 strong ul b ol q a blockquote img span div
  • Type selectors vs ID & Class selectors
 Type selectors use the tag names that are built into HTML. 
 ID and class selectors use names that you define, and are added to html elements to make them more specific.

  • Class Selectors
 
 .ingredients {declaration}" CSS 
 <ul class=”ingredients”>
 HTML A class is an html attribute that is added to your html markup. You reference that ID in your css with a period.
  • ID Selectors
 
 #logo {declaration}" CSS 
 <img id=”logo” src=”” alt=””>
 HTML An ID is an html attribute that is added to your html markup. You reference that ID in your css with a hash.
  • IDs vs Classes
 The most important difference between IDs and classes is that there can be only one ID on a page, but multiple classes. An ID is more specific than a class. An element can have both an ID and multiple classes.
  • IDs vs Classes
 ID: #344-34-4344 Class: Male Class: Student ID: #123-54-9877 Class: Female Class: Student
  • Multiple classes
 CSS
 .ingredients.time {declaration}" HTML
 <div class=”ingredients time”>
 <h1></h1>
 </div>
 
 Elements can have multiple classes, giving you more control. The are written in the CSS in the exact order they appear in the html, with no spaces.
  • Combining IDs and classes
 CSS
 #wrapper.ingredients.time {declaration}" HTML
 <div id=”wrapper” class=”ingredients time”>
 <h1></h1>
 </div>
 
 Elements can have both ids and classes. While an element can have only one id, it can have multiple classes.
  • Descendant Selectors
 
 .ingredients p {declaration}" CSS 
 <div class=”ingredients”>" HTML <p></p>" </div>
 A descendant selector is a selector that combines the selectors of different elements to target a specific element(s).
  • Applying Styles
  • The Cascade Inheritance Specificity

  • The Cascade
 The “cascade” part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements. For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will “trump” the other. 

  • low importance Client (user) stylesheet
 Linked (external) stylesheet
 high importance Embedded (internal) stylesheet
 Inline (internal) Styles

  • Inheritance & Specificity
 As a designer, your goal is to set an overall global consistent style, then add in more specific styles as needed. You can control how and where your styles are applied to your HTML by managing their inheritance and specificity. 

  • Inheritance
 Most elements will inherit many style properties from their parent elements by default. A parent is a containing element of a child. HTML " 
 <body>
 <div>
 <ul>
 <li></li>
 </ul>
 </div>
 </body>
 relationship " parent of site" parent of ul and li, child of body" parent of li, child of div and body" child of ul, div, and body" 
 
 
 !
  • Inheritance
 body
 make the paragraph 16px, Verdana, red
 p
 make the paragraph blue
 16px, Verdana, blue

  • Not all properties are inherited
  • Specificity
 Shortly after styling your first html elements, you will find yourself wanting more control over where your styles are applied. This is where specificity comes in. 
 Specificity refers to how specific your selector is in naming an element. 

  • Specificity
 If you have multiple styles applied to the same element, the browser goes with whichever selector is more specific.
 
 Male Male
 Student 
 Male 
 Student
 George
  • Specificity
 body
 make the paragraph 16px, Verdana, red
 p
 make the paragraph blue
 p.pink
 make the paragraph pink
 16px, Verdana, pink

  • Where specificity gets tricky
 The basic concept of specificity is fairly simple: you target specific elements in your HTML by listing out more of their identifiers. For example, if you want to apply a special style to a paragraph, you need a “hook” in the html to make it different from every other paragraph.
  • Where specificity gets tricky
 This can get tricky in your css, because 
 the more specific you make your selectors, the harder it is to manage global styles (inheritances).
  • 
 Where specificity gets tricky
 Make all text pink. body {color: pink}
 Make all text in the element with the id “recipe” blue. #recipe {color: blue}
 Make all text in the element with the class “ingredients” blue. .ingredients {color: green}
 Make all text in the paragraph element with the class “ingredients” purple. p.ingredients {color: purple}
 Make all text in the paragraph element with the class “ingredients”, contained in the element with the id “recipe”, grey. #recipe p.ingredients {color: grey}"
  • Where specificity gets tricky
 HTML 
 <div id=”recipe”> 
 <p class=”ingredients”>
 <div>" CSS 
 body {color: pink}
 #recipe {color: blue}
 .ingredients {color: green}
 p.ingredients {color: purple}
 #recipe p.ingredients {color: grey}" !
  • Style Declaration: Text
  • Property Values color: #444444; font-family: "Times New Roman", Georgia, serif; font-size: 16px; (define in px, em, or %) Style declarations are made of a property and a value. The type of value you can use depends on the property. 

  • There are 5 basic ways of identifying fonts: Web Safe Fonts
 (called font-family in your text) Font-Face Service-Based Font-Face Images sIFR/Cufon

  • Web-safe Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.
  • from http://www.w3schools.com/cssref/css_websafe_fonts.asp
  • from http://www.w3schools.com/cssref/css_websafe_fonts.asp
  • Font Stack The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. ! EXAMPLES
 body {
 font-family: Helvetica, Arial, sans-serif}" h1 {
 “Lato”, Arial, sans-serif} "
  • Units of Type Size There are three different ways to define type sizes in css. ems
 Ems are a relative unit: 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. px
 Pixels are a an absolute unit, it sets the text to a specific size instead of a size relative to the browser’s default. Except in special cases, you should define pixels in your css with the number and “px” together, no spaces: “16px”. %
 Like ems, percentages are also a relative unit. It is very useful for layout, not usually a good idea for type sizes.
  • Specifying Color There are three different ways to define color in css. Hex Codes
 This is the most common way to identify colors in CSS. The code gives two characters to correspond to RGB values. The number always has 6 characters (#44de42), unless all four characters are the same, and you can shorten it (#444). RGB
 You can use a color’s RGB values with this syntax: 
 p {color: rgb(34,123,125);} Color Names
 There are built-in color names that you can use, that will provide generic hues: 
 p {color: rgb(34,123,125);}
  • Specifying Color ! Hexidecimal RGB
  • Color: white, black, grey White = #ffffff, or #fff Black = #000000, or #000 Greys = #111111 – #999999

  • Type properties to learn now: color font-family font-size font-weight font-style letter-spacing line-height text-align text-transform
  • Example values: color: #444444; font-family: "Times New Roman", Georgia, serif; font-size: 16px; (define in px, em, or %) font-weight: bold; (or by number, 400, 700) font-style: italic; letter-spacing: .02em; line-height: 1.6; (relative to whatever your type size is) text-align: left; 
 text-transform: uppercase;
  • Styling Lists
  • List styling Links can be styled just like any text, but have special properties. The most often used is “liststyle-type”, which allows you to control whether bullets are used, and how they are styled. ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 } ! ! !
  • List styling By default, <li> elements are block-level elements (they stack on top of each other). You can force them to line up in a row by changing the display property to “inline.” li {
 display: inline;
 } ! ! !
  • Styling Links
  • Link states Links can be styled just like any text, but have special pseudo-classes that allow you to define their behavior. a {color:#FF0000;}      /* unvisited link */ a:visited {color:#00FF00;}  /* visited link */ a:hover {color:#FF00FF;}  /* mouse over link */ a:active {color:#0000FF;}  /* selected link */ When setting the style for several link states, there are some order rules: — a:hover MUST come after a:link and a:visited — a:active MUST come after a:hover !
  • Links By default, links are underlined. You can turn this off by changing the “text-decoration” property. In the example below, the link will only have an underline when the cursor is hovering over the element. a {
 color:#FF0000;
 text-decoration: none;
 }  a:hover {
 color:#00FF00;
 text-decoration: underline;
 }  !
  • Class Exercise 9 !