IT 116

• CSS

  Cascading style sheets
• World wide web consortium (W3C)


  created CSS
• Declaration block


  Surrounded by curly braces
• CSS selectors


  Used to "find" or select HTML elements you want to style
• Simple selectors


  Select elements based on name, id and class
• Combinator selectors


  Select elements based on specific relationship b/n them
• Pseudo-class selectors


  Select elements based on certain state
• Pseudo-elements selectors 


  Select and style a part of an element
• Attribute selectors


  Select elements based on attribute/ attribute value
• Element selector


  Select elements based on element name
• Id selector


  Used to select one unique element
• Id selector 


  Uses # character followed by the id of the element
• Class selector


  Select HTML element with a specific class attribute
• Class selector


  Uses (.) character
• Universal slector


  (*)
• Universal selector


  Selects all elements on the page
• Grouping selector


  Selects all elements w/ the same style definitions
• Three ways to insert css


  External css

  Internal css

  Inline css
• External css


  Changing the look of the entire website by changing just one file
• External css


  Can be written in any text editor and must be saved w/ a .css extension
• External css


  Must not contain HTML tags
• Internal css


  May be used if one single HTML page has a unique style
• Internal css


  Defined inside the <style> element inside the head section
• Inline css


  Used to apply unique style for a single element
• Multiple style sheets


  If the same element was defined in different style sheets, the value from the last style will be used
• Cascading order


  It will happen when there is more than one style specified for an HTML element
• Cascading order arrangement


  Inline style

  External and internal style sheet

  Browser default
• CSS comments


  Used to explain the code
• CSS comments


  Ignored by browsers
• Text transformation


  Specifies uppercase and lowercase letters in a text
• Web safe fonts


  Fonts universally installed across all browsers and devices
• Fallback fonts


  Back-up fonts
• fonts for HTML and CSS


  arial

  Verdana

  Helvetica

  Times new roman

  Tahoma
• Commonly used fallbacks


  Serif

  Sans-serif

  Cursive

  Fantasy

  Monospace
• CSS box model


  Used when talking about design and layout
• Responsive text


  Displays horizontal scroll bar if the screen is too small to display the full content
• Z-index


  Specifies the stack order of an element
• Overflow


  Controls what happens to the content that is too big to fit into the area
• Overflow


  Specifies whether to clip/add scrollbars when the content of an element is too big
• Overflow property values


  Visible

  Hidden

  Scroll

  Auto