Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Basic Syntax (1)

1,171 views

Published on

This is Part-1 of an introduction to basic CSS syntax using sample code to get you started styling your html pages - and covers syntax, color, and background

Published in: Software
  • Justin Sinclair has helped thousands of menget their Ex girlfriends back using his methods. Learn them at here♥♥♥ http://goo.gl/nkXEkK
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS Basic Syntax (1)

  1. 1. Introduction  This is Part-1 of a basic introduction to CSS syntax  See “HTML Basic Tags” for an introduction to HTML markup  This presentation is designed to be a starting point for learning CSS  Subsequent presentations build on this starting point  All you need to get started is a text editor and a browser  So, enjoy!
  2. 2. Objectives With practice, you will be able to:  Create inline, internal, and external styles  Recognize and use cascading rules and rules of inheritance  Use tag, ID, and class selectors to target specific HTML page elements  Refine target HTML elements with descender and combination selectors  Add comments to styles  Use color names to set text formatting  Add background color and images  Manage repeat, scroll and position properties  Use shorthand notation to set background properties
  3. 3. Not Here See later presentations for  Font and Text properties – Part 2  Margins, borders, and padding – Part 3  Lists, links, and tables - Part 4  Floats, layouts, and positioning elements – Part 5  Working with color – Part 6  Responsive and mobile design – depending on interest  CSS3 Effects – depending on interest
  4. 4. Default Styles <!DOCTYPE html> <html> <head> <title> Default Styles </title> </head> <body> <h1> Default Styles </h1> <p> Without CSS, the default browser styles are used. </p> </body> </html>  Without CSS, this page renders with the browser default styles  Text is black on white and uses the default font  <h1> is large and bold  Headings and paragraphs are separated with extra whitespace
  5. 5. CSS Styles <!DOCTYPE html> <html> <head> <title> CSS Styles </title> </head> <body style=“background:blue;” > <h1> Inline Styles </h1> <p> CSS is used to change browser default styles. </p> </body> </html>  CSS changes the browser default style where specific styles are applied  All other HTML styles are unchanged and continue to inherit browser styles  Only the background changes from the default styles – from white to blue  <h1> and <p> tags will not change
  6. 6. Styles  CSS styles can be written as inline, internal, or external styles  Inline styles are written as quoted attributes within a specific tag element  Inline styles are specific to the tag  Internal styles use <style> </style> tags in the <head> section of a page  Internal styles are specific to the page in which they are declared  External styles are declared in an external .css stylesheet and uses a <link> tag in the <head> section to reference the .css file  External styles can be applied site-wide and are recommended as best practice
  7. 7. Inline Styles <body style = “background : blue;” > <h1> Inline Style </h1> <p> Inline styles are declared as an attribute of any tag. </p> </body>  Inline styles are added as a quoted attribute within the opening tag of the selected element  Inline styles are difficult to maintain and generally not recommended  They are specific to the tag/page
  8. 8. Internal Styles <head> <style> body { background : blue; } </style> </head>  Internal styles are declared using the <style> tag  <style> tags are added within the <head> section of a web page  Internal styles share a common syntax with external styles (more later)  Inline styles override external styles
  9. 9. External Styles <head> <link href=“styles.css” rel=“stylesheet” /> </head>  External styles are declared in a separate, external .css file  The .css file is linked to the current web page using a <link> tag within the <head> section  The href attribute declares the name (and path) of the external file  The rel=“stylesheet” attribute sets the relationship between the web page and the external .css file  Link tags are self-closing
  10. 10. “Cascading" Style Sheets  External, Internal, Inline, and default styles establish a hierarchy of styles  CSS styles declared closest to the tag override previous styles  Inline styles declared in the tag override all other styles  Internal styles (declared on a page) override external styles  All CSS styles override the browser default styles  This is the “cascade” within the meaning of CSS (Cascading Style Sheets)
  11. 11. “Cascading" Style Sheets  Multiple CSS files can be linked to a single web page  The order of the <link> declarations affects which styles are applied fist/last  If a conflict occurs, the last declared styles will be applied  If a <link> tag is declared after an internal <style> declaration, then the external stylesheet becomes closer to the tag and will override the internal style!
  12. 12. Summary 1  Default browser styles can be changed using CSS  CSS only changes the elements to which they are applied  CSS styles can be written as inline, internal, or external styles  Inline styles are quoted attributes and are specific to a tag  Inline styles are difficult to maintain and generally not recommended
  13. 13. Summary 1  Internal styles are declared within <style> tags in the <head> section of a page and are specific to that page  External styles are declared in an external stylesheet and the <link> tag links the external stylesheet to the web page by referencing the location of the .css file  External styles can be used site-wide  CSS establish a hierarchy of styles where later style rules override previous ones  This is the “cascade” in Cascading Style Sheets
  14. 14. p { background: blue; color: white; text-align: center; }  Internal and external styles share a common syntax  The <head> reference is different but the declaration syntax is the same  Learning CSS is all about learning the structure and syntax of the rules  As well as the property-value pairs that are available Syntax
  15. 15.  External styles are declared in a plain text file and saved with a .css filename  External files include only style declarations – and comments  Spaces can be used to separate style declarations  Internal styles are declared on each web page in the head section between <style> tags  The advantage of using external files is the ease of maintenance  There is only a single file to make any changes Syntax
  16. 16. p { background: blue; color: white; text-align: center; }  CSS syntax rules consists of a selector and a declaration block  Selectors target the HTML element(s) to be styled  Declaration blocks contain one or more property value pairs inside curly braces  Each property value pair is separated by a colon and ends with semicolon Syntax
  17. 17. Tag Selectors p { color: white; } h1, h2, h3 { color: blue; }  Tag names (without angle brackets) can be used as selectors to target all elements of that type  A comma separated list can be used to apply a single CSS rule to more than one tag name
  18. 18. ID Selectors #top { color: blue; } #main { color: blue; } #top, #main { color: blue; }  id attributes can be used as selectors  A #sign is added to the id name in the CSS rule (no spaces)  A comma separated list can be used to apply a single CSS rule to more than one id name
  19. 19. Class Selectors .note { color: blue; } .special { color: blue; } .note, .special { color: blue; }  Class names can be used as selectors  A period is added to the class name in the CSS rule (no spaces)  A comma separated list can be used to apply a single CSS rule to more than one class name
  20. 20. Descendant Selectors div p { color: blue; } ul li { color: red; }  Tags nested within other tags form a parent-child relationship  Use a space separated list to target nested tags – as “descendants”  div p applies only to paragraphs that are nested within a div tag  ul li applies only to list items that are in unordered lists  Paragraphs not inside div tags and li tags in ordered lists are not affected
  21. 21. Combining Selectors p.note { color: red; } span.note { color: blue; }  A tag.class selector targets a specific subset of tags with the class name  paragraphs with class .note will be red  span tags with class .note will be blue  other elements with the class .note are not affected  Paragraphs and span tags without the class name are also not affected
  22. 22. Combining Selectors div p.note { color: red; } li span.note { color: blue; }  Combining descender and tag.class selectors refines the target even more  p.note will be red only within a div tag  span.note will be blue only within a list  other elements with the class .note will not be affected  There is a lot more to selectors – but these will get you started
  23. 23. Comments /* This is a comment */ /* Comments can be in a single line or on multiple lines */  Comments begin with a slash star and end with its /* opposite */  Comments add useful information for stylesheet developers  They are ignored when processed by the browser
  24. 24. Summary 2  Internal styles are declared in the head section of a page  External styles are declared in a plain text file with a .css file extension  Internal and external styles share a common syntax  Selectors identify the element to be styled  Declaration blocks mark the beginning and end of a rule with curly braces  Property and value pairs assign styles to specific attributes of the selector
  25. 25. Summary 2  A selector is used to target specific page element(s)  Common selectors are tag names, class names, and id names  Selectors can be used individually or in a comma separated list  They can be made more specific using a space separated list  This establishes a nested “descender” relationship by including a parent element  A tag.class combination can also be used to target a more specific element  Descender and tag.class can also be combined
  26. 26. Summary 2  Style rules are declared between opening and closing curly braces  Rules consist of property and value pairs separated by a colon:  Each property and value pair ends with a semicolon;  Add /* comments */ for clarity  Learning CSS is about learning the selectors, properties and values that are available in CSS – which we start to cover next
  27. 27. Text Color p { color: white; } h1, h2, h3 { color: blue; }  When used by itself, color refers to the text color – the foreground color  There are over 100 color names that can be used in CSS  There are also HEX, RGB, and HSL notations for declaring color values  This presentation will get you started with some common color names
  28. 28. Color Names black, white, silver, gray (grey) red, pink, magenta, purple, green, yellow, lime, olive blue, navy, teal, aqua yellow, gold, orange, tomato lightGrey, lightGreen, . . . darkRed, darkBlue, . . .  Here are 20 common color names to get you started  Light and dark can be used with some colors written as a single word  A google search for css color names will give you lots of choices  Names are not case sensitive but it is usual for values to be lowercase
  29. 29. Background Color body { background: darkGray; } div { background: lightGray; }  Color names can also be used to set the background property of a page or page element  This example uses shorthand notation to declare the background property  There is also a more specific notation using background-color: darkGray;  Throughout this presentation, we use shorthand notation to get you started
  30. 30. Background Image body { background: url(“bkgnd.jpg”); } div { background: url(“bkgnd.jpg”); }  Images can be used as backgrounds  The url(“path”) notation is used to indicate the file name and location  There is also a more specific notation background-image: url(“path”);  This example uses shorthand notation to set the background property
  31. 31. Background Repeat body { background: url(“bkgnd.jpg”) repeat-x ; } div { background: url(“bkgnd.jpg”) repeat-y ; }  Background images repeat in both directions - horizontally and vertically  Use repeat-x or repeat-y to specify a single direction  When using shorthand notation the closing semicolon is used only once at the end of a space separated list  When specific notation is used the semicolons are used in each case background-repeat : repeat-x ;
  32. 32. No Repeat and Position body { background: url(“bkgnd.jpg”) no-repeat top right ; } div { background: url(“bkgnd.jpg”) no-repeat top right ; }  A single image can appear in the background using no-repeat  When no-repeat is used the image is placed top-left of its parent container  The position property can be used to place the image in one of 9 positions  The more specific notation can also be used for both repeat and position background-repeat : no-repeat ; background-position : top right ;
  33. 33. Background Position left top left center left bottom right top right center right bottom center top center center center bottom  The background-position is relative to the parent container  This may be different than the page except when applied in the body  Experiment with placing the image at different positions and elements  A single value can be used when the second value defaults to “center”
  34. 34. Fixed or Scroll body { background: url(“bkgnd.jpg”) no-repeat fixed top right ; } div { background: url(“bkgnd.jpg”) no-repeat fixed top right ; }  Background images will scroll with the page by default  To change this, add the fixed value to the background property  Notice the placement location of the fixed value – the order is important  However, the more specific notation can be used in any order background-attachment : fixed ;
  35. 35. Shorthand Sequence background: lightgrey url(“bkgnd.jpg”) norepeat fixed top right ; background-color: lightgrey ; background-image: url(“bkgnd.jpg”); background-repeat: norepeat; background-attachment: fixed; background-position: top right;  When using shorthand notation the order of the values is important  The order must be declared in the sequence shown opposite color image repeat fixed position  Individual values can be omitted but the sequence cannot be changed  The more specific notation can be used in any order
  36. 36. Color and Image background: lightgrey url(“bkgnd.jpg”) norepeat fixed top right ;  It is common to add a background color with a background image  This allows a complimentary color to show when a repeat restriction is used  Also when images may be disabled
  37. 37. Summary 3  The color property refers to the text color  There are over 100 color names that can be used in CSS  Names are not case sensitive but common practice suggests lowercase  Other notations include HEX, RGB, and HSL  Color names can also be used with the background property  A shorthand notation can be used – background: grey;  Or the more specific notation – background-color: grey;
  38. 38. Summary 3  Images can be used as backgrounds using the url(“path”) notation  The path should include the location, file name, and extension  Background images repeat in both directions by default  The background-repeat property can be used to repeat in a single direction or to display as a single image using repeat-x or repeat-y or no-repeat.  The no-repeat value positions the image at the top-left of the container  Use the position property to place the image in any of 9 positions  The background is positioned relative to the parent container  Add the fixed value to the background property to prevent default scrolling
  39. 39. Summary 3  Shorthand notation declares a single background property with multiple values  A single closing semicolon is used at the end of a space-separated list  The order of the values is important (color image repeat fixed position)  Individual values can be omitted, but the sequence cannot be changed  Adding a background color with a background image allows a complimentary color to show when a repeat restriction is used or images are disabled
  40. 40. Summary 3 background: lightgrey url(“bkgnd.jpg”) no-repeat fixed top right ; background-color: lightgrey ; background-image: url(“bkgnd.jpg”); background-repeat: no-repeat; background-attachment: fixed; background-position: top right;  Here is a summary of the shorthand and more specific notation
  41. 41. Inheritance  Tags that are nested within other tags inherit the style of the parent tag  All tags are nested within the body tag – so all tags inherit from the body tag  CSS can target and change specific properties for specific elements  But, again – only the specified styles are changed – all others continue to inherit from the parent – whether from inline, internal, external, or default browser styles
  42. 42. Review How did you do? Are you able to:  Create inline, internal, and external styles  Recognize and use cascading rules and rules of inheritance  Use tag, ID, and class selectors to target specific HTML page elements  Refine target HTML elements with descender and combination selectors  Add comments to styles  Use color names to set text formatting  Add background color and images  Manage repeat, scroll and position properties  Use shorthand notation to set background properties
  43. 43. Next  In Part 2 we cover Font and Text properties
  44. 44. s l i d e d e c k b y P e t e r R u s h t o n isharebyme @gmail.com

×