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

106 views

Published on

CSS - Cascading Style Sheets

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Css

  1. 1. Wordpress Training DAY 1 1
  2. 2. Course Outline Day1 •Recap on HTML and CSS •Introduction to HTML5 & CSS3 •Understanding Responsiveness •Introduction to PHP •Writing basic code •PHP Forms •PHP – MySQL Connectivity Day2 •What is Blog? •Introduction to CMS •Introduction to Wordpress •Installing Wordpress •Wordpress UI •User Management •Wordpress Database & Folder Structure •Managing Posts •Managing Media & Pages Day3 •Wordpress Themes •Reports & Databases •Plugins &Addins •Emails & Notifications •Permalinks & Categories •Managing Comments •Backup & Restore •Post Test 2
  3. 3. Agenda  Recap on HTML and CSS  Introduction to HTML5 & CSS3  Understanding Responsiveness  Introduction to PHP  Basics and Functions  Writing basic code in PHP  PHP Forms  PHP – MySQL Connectivity  Summary 3
  4. 4. HTML5/ CSS3 4
  5. 5. CSS Layout 5
  6. 6. The Basis of CSS layout The 3 core concepts to understand about CSS layout are: 1. The CSS box model 2. Floating 3. Positioning Together, these 3 concepts control the way elements are arranged and displayed on a page. 6
  7. 7. The CSS Box Model  Every block element in CSS is effectively inside a box, and can have margins, padding and borders applied to it.  Box widths can be specified in absolute values (e.g. px) or in relative values, usually:  em - values relative to the size of the font in ems  percentage - width values relative the containing box’s content region  The root (or top-most) element’s containing box is effectively the browser window. 7
  8. 8. The CSS Box Model  Every CSS box is divided into regions, consisting of: 1. Content 2. Padding 3. Border 4. Margins 8
  9. 9. The CSS Box Model 9 Content Padding Border Margin
  10. 10. The CSS Box Model 10 Content Padding Border Margin With margin, border and padding properties, each of the 4 sides can be specified independently
  11. 11. Margin Collapse: Stacked Elements 11 Content Area Content Area Margin-bottom: 30px Margin-top: 20px Before Content Area Content Area Margin-bottom: 30px After Margins collapse to form a single margin
  12. 12. CSS Shorthand: Margin & Padding  For margin and padding (and others), CSS provides a number of shorthand properties that can save on writing lines and lines of code. Instead of writing this:  #container { margin-top: 0; margin-right: 5px; margin-bottom: 6px; margin-left: 5px; padding-top: 20px; padding-right: 10px; padding-bottom: 30px; padding-left: 12px; } 12 Content Area 6 5 5 12 10 30 12 0
  13. 13. CSS Shorthand: Margin & Padding  …Its much easier to write this:  #container { padding: 20px 10px 30px 12px; margin: 0px 5px 6px 5px; }  The sequence order is always clockwise, starting from the top 13 Content Area 6 5 5 12 10 30 20 0
  14. 14. CSS Shorthand: Margin and Padding  You can also apply just one value, example:  #container { padding: 20px; margin: 5px; }  Which will apply the value specified equally on all 4 sides 14 Content Area 5 5 5 20 20 20 20 5
  15. 15. CSS Shorthand: Margin and Padding  And you can apply two values, example:  #container { padding: 10px 20px; margin: 0px 5px; }  The first value is applied to the top and bottom  The second value is applied to the left and right 15 Content Area 0 5 5 20 20 10 10 0
  16. 16. CSS Shorthand: Margin and Padding: auto  A useful value to remember is ‘auto’:  #container { padding: 10px 20px; margin: 0px auto; }  Usually applied to the left & right areas of the margin property, auto is useful for centering a block container element in the browser window 16 Content Area 0 auto auto 20 20 10 10 0
  17. 17. Borders  The core border properties are:  Width: absolute (px, in, cm, or ‘thin’, ‘medium’, ‘thick’), or relative (ems)  Style: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, etc  Color: ‘blue’, ‘red’, #FF9900, etc  You can also create the effect of a border by using a graphic image in a CSS background property, instead of the border property 17
  18. 18. CSS3 Borders  Following are few more border properties available in CSS3:  border-radius  box-shadow  border-image 18
  19. 19. CSS Floats: “Normal Flow”  CSS boxes for block elements are stacked, one above the other, so that they’re read from top to bottom.  In CSS, this is said to be the “normal flow”. 19 But…
  20. 20. Floats: Positioning CSS Boxes  …we can position block element boxes side-by-side in CSS using floats.  Setting the float property to left or right causes a box to be taken out of its position in the normal flow and moved as far left or right as possible. 20 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline inline inlineblock
  21. 21. Float Values  The Float property has three value options:  float: left;  float: right;  float: none; 21 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline inline inlineblock
  22. 22. Restoring the Normal Flow: “Clear”  To restore the “normal flow”, we can use the clear property.  The clear property has three value options:  clear: left;  clear: right;  clear: both;  These specify which side of the element’s box may not have a float next to it. 22 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline inline inlineblock block
  23. 23. CSS Positioning  The third core concept to understand in CSS layout (after the ‘box model’ and ‘floats’), is positioning.  There are two types of positioning that can be applied to CSS boxes:  • Relative Positioning • Absolute Positioning  Understanding the differences between the two is difficult at first, but important! 23
  24. 24. CSS Positioning: Relative Positioning  A relatively positioned element will stay exactly where it is, in relation to the normal flow.  You can then offset its position “relative” to its starting point in the normal flow: 24 Box 1 Box 2 Box 3 Containing box
  25. 25. CSS Positioning: Relative Positioning  In this example, box 2 is offset 20px, top and left. The result is the box is offset 20px from its original position in the normal flow. Box 2 may overlap other boxes in the flow, but other boxes still recognise its original position in the flow. 25 Left: 20px top: 20px Position: relativeBox 1 Box 2 Box 3 Containing box #myBox { position: relative; left: 20px; top: 20px; }
  26. 26. CSS Positioning: Absolute Positioning  An absolutely positioned box is taken out of the normal flow, and positioned in relation to its nearest positioned ancestor (i.e. its containing box).  If there is no ancestor box, it will be positioned in relation to the initial containing block, usually the browser window. 26 Left: 20px top: 20px Position: absolute Box 1 Box 2 Box 3 Containing box (relatively positioned ancestor)
  27. 27. CSS Positioning: Absolute Positioning  An absolutely positioned box can be offset from its initial position inside the containing block, but other boxes within the block (and still within the normal flow) act as if the box wasn’t there. 27 Left: 20px top: 20px Position: absolute Box 1 Box 2 Box 3 Containing box (relatively positioned ancestor) #myBox { position: absolute; left: 20px; top: 20px; }
  28. 28. CSS Positioning: Fixed Positioning  Fixed Positioning is a sub-category of Absolute Positioning  Allows the creation of floating elements that are always fixed in the same position in the browser window, while the rest of the content scrolls as normal  (rather like the effect of fixed background attachments)  PROBLEM: fixed positioning is not supported in IE5 and IE6(!), but can be made to work with javascript for those browsers 28
  29. 29. Selectors  3 types of selectors 1. Type Selectors 2. Grouping Selectors 3. ID Selectors 4. Class Selectors 29
  30. 30. Type (Element) Selector Specify the style(s) for a single HTML element. body { margin: 0; padding: 0; border-top: 1px solid #ff0; } RichaGoel 30 <!-- HTML --> <p>...</p> <!-- CSS --> p { ... }
  31. 31. Grouping Elements Allows you to specify a single style for multiple elements at one time. h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif; } RichaGoel 31
  32. 32. Example of Group/ Combined Selectors ul#social li { padding: 0 3px; } ul#social li a { height: 17px; width: 16px; } ul#social li.tumblr a { background: url('tumblr.png') 0 0 no-repeat; } 32
  33. 33. The Class Selector <p class=“intro”>This is my introduction text</p> .intro { font: 12px verdana, sans-serif; margin: 10px; } RichaGoel 33 <!-- HTML --> <div class="awesome">...</div> <!-- CSS --> .awesome { ... }
  34. 34. The Identifier Selector <p id=“intro”> This is my introduction text</p> #intro { border-bottom: 2px dashed #fff; } RichaGoel 34 <!-- HTML --> <div id="show">...</div> <!-- CSS --> #show { ... }
  35. 35. CSS Selectors  Identifier or class? What’s the difference?  An identifier is specified only once on a page and has a higher inheritance specificity than a class.  A class is reusable as many times as needed in a page.  Use identifiers for main sections and sub-sections of your document. RichaGoel 35
  36. 36. You can not have two elements on one page with the same ID 36
  37. 37. Javascript (JS) 37
  38. 38. What is JavaScript  Scripting language (object-oriented)  Lightweight programming language  Interpreted, not compiled  Designed to be embedded in browsers  Ideal for adding interactivity to HTML pages  Detect browser versions  Work with info from user via HTML forms  Validate form data  It’s free, no license required  Syntax is similar to Java, but it’s not Java per se  Can have more than one pair of script tags in a page 38
  39. 39. JavaScript in HTML documents  <script> </script> tag  Place a block of scripting code into HTML document  This element may appear any number of times in an HTML document (e.g., in the HEAD or BODY)  Script is executed when that portion of document is interpreted by the browser 39
  40. 40. Where to write JavaScript?  JavaScript statements in head: write to the beginning of the body section but don’t violate HTML code already there.  JavaScript statements in body: write based on their location  JavaScript interpreted first then HTML interpreted second 40
  41. 41. Head or Body?  Javascript can be located in the head, body or external file  Head section  Ensures script is loaded before trigger event  Body section  Script executes when body loads  External  Allows scripts to run on several pages 41
  42. 42. Document.Write  Document.write writes to the HTML document not the web page  Now, let JavaScript generate HTML for us…  <html>  <head><title>JavaScript HelloWorld!</title></head>  <body>  <script laguage="JavaScript">   document.write("<h2>Javascript-Generated output:</h2> <p>This paragraph generated by JavaScript</p>  <p>It can even insert an image</p>  <img src='../assigns/RayWeb/images/cathedral.jpg' />")   </script>  </body>  </html> 42
  43. 43. What is JavaScript  <html>  <head>  <script language=“JavaScript”>  document.write (“<b> This is first </b>);  </script>  </head>  <body>  Now where does this print on the web page???? <br />  <script language=“JavaScript”>  document.write ( “This might be last?”)  </script>  </body>  </html> 43
  44. 44. Variables  Must declare variables before they’re used in the program  Declare at the top of the program & terminate each statement with ‘;’  Intialize variables when appropriate  Local variables (declared within a function) destroyed after function exit.  Can only be accessed within the function  Example – Note Assignments  var candyBarPrice = 2.50;  var taxRate = .075;  var candyBarsPurchased; 44
  45. 45. Example <script language="JavaScript” src="alert.js"> 45 alert.js contains: alert('Hello world!')
  46. 46. Comments in JavaScript <html> <script> // a single line comment /* a multiline comment */ <!-- this is also a single line comment // the code on the next line is the only 'working' JavaScript in the example alert('done with comment example') --> </script> </html> 46

×