c s s top elements
TRANSCRIPT
![Page 1: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/1.jpg)
![Page 2: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/2.jpg)
Font-size : x-large ;p {Background-color : purple ;
}SelectorSelectorProperty namesProperty names
Declarations or valuesDeclarations or values
![Page 3: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/3.jpg)
HTML Style• P• H1• H2• body
Class Style• .class• Psuedo-class
Applies to common tags Applies to anything
IDDIVisions
![Page 4: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/4.jpg)
HEAD BODY
<title> </title> <p> </p><h1> </h1>
<style type="text/css"><!--.style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000;}--></style>
<h1 class="style1">This is an H1 Style</h1>ADD CSS for Styles
Internal CSS Sheet
![Page 5: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/5.jpg)
Internal / Embedded• Build one page with all
attributes & styles• Export the styles to
separate CSS page
External• Build regular html page• Build separate CSS page• Link the HTML to CSS
![Page 6: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/6.jpg)
FontSizeColorBackgroundLinksHeadings
Font-family:Font-size:color:a:linka:visitedH1H2P
![Page 7: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/7.jpg)
![Page 8: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/8.jpg)
• Points for wrappers
![Page 9: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/9.jpg)
![Page 10: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/10.jpg)
![Page 11: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/11.jpg)
• Create a DIV #wrapper• Box: 700 px width
![Page 12: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/12.jpg)
• html, body { margin: 0px; padding: 0px; border: 0px; }
![Page 13: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/13.jpg)
• body { font-size: 62.5% }– Now continue to use ems for the rest of your font
sizes
![Page 14: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/14.jpg)
![Page 15: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/15.jpg)
Pixels for relative size (exc IE)Ems for relative sizes
Numbers for absolute sizeRelative Sizes based on default
![Page 16: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/16.jpg)
Size Matters
Pixel – dot on computer monitor – exc. IEPoints – 1/72 inchInchCentimeterMillimeterPicaEmsExsPercentages
![Page 17: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/17.jpg)
![Page 18: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/18.jpg)
• Format as you go • Create rules
LinkAddEditDelete
![Page 19: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/19.jpg)
Stay Out of TRouBLe
• Shorthand for Margins, Padding, Borders– Top– Right– Bottom– Left
![Page 20: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/20.jpg)
Link Order• a:link• a:visited• a:hover• a:active
![Page 21: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/21.jpg)
Block <div>, <p>, <h1>, <form>, <ul>, <li>▪ Always begin on a new line▪ Height, Margins can be changed▪ Width 100% of parent
Inline <span>, <a>, <label>, <input>, <img>, <strong>, <em>▪ Begin on same line▪ Height, Margins cannot be changed▪ Width can’t be changed.
![Page 22: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/22.jpg)
• Style Larger elements first• DIVs for DIVisions of logical content• SPANs for exceptions to the rules• Styles– Class – multiple elements – Starts with a . Case
sensitive.– ID – one element – Starts with a # Case sensitive.
• Name Styles & Classes– No starting with # or non-alpha
http://webdesign.about.com/od/css/a/aa071204.htm
![Page 23: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/23.jpg)
• /* Structure */• /* Typography */• /* Links */• /* Lists, images, etc. */
http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
![Page 24: C S S Top Elements](https://reader036.vdocument.in/reader036/viewer/2022062405/5560b2b2d8b42af43b8b4765/html5/thumbnails/24.jpg)
• a:link • a:visited• a:hover• a:active
• a.nav:link• a.nav:visited• a.nav:hover• a.nav:active