C S S Top Elements
-
Upload
ehorner -
Category
Technology
-
view
553 -
download
4
Transcript of C S S Top Elements
Font-size : x-large ;p {Background-color : purple ;
}SelectorSelectorProperty namesProperty names
Declarations or valuesDeclarations or values
HTML Style• P• H1• H2• body
Class Style• .class• Psuedo-class
Applies to common tags Applies to anything
IDDIVisions
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
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
FontSizeColorBackgroundLinksHeadings
Font-family:Font-size:color:a:linka:visitedH1H2P
• Points for wrappers
• Create a DIV #wrapper• Box: 700 px width
• html, body { margin: 0px; padding: 0px; border: 0px; }
• body { font-size: 62.5% }– Now continue to use ems for the rest of your font
sizes
Pixels for relative size (exc IE)Ems for relative sizes
Numbers for absolute sizeRelative Sizes based on default
Size Matters
Pixel – dot on computer monitor – exc. IEPoints – 1/72 inchInchCentimeterMillimeterPicaEmsExsPercentages
• Format as you go • Create rules
LinkAddEditDelete
Stay Out of TRouBLe
• Shorthand for Margins, Padding, Borders– Top– Right– Bottom– Left
Link Order• a:link• a:visited• a:hover• a:active
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.
• 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
• /* Structure */• /* Typography */• /* Links */• /* Lists, images, etc. */
http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
• a:link • a:visited• a:hover• a:active
• a.nav:link• a.nav:visited• a.nav:hover• a.nav:active