Transcribed

HTML and CSS Cheat Sheet

HTML AND CSS <CHEAT SHEET> HTML lays the foundation, while CSS makes the experience easier, more engaging or more efficient. Snippets allow you to modify certain style elements faster by reducing HTTP requests. Here's what you need to know about HTML and CSS before you start designing your blog or website. A LEXICON FOR BEGINNERS </> НTML CSS SNIPPETS TAGS HYPERLINK An acronym for Hyper An acronym for Short, reusable sections Define HTML elements. An element that points Text Markup Language, Cascading Style Sheet, of programming that to another page, image this computer this digital technology allow you to minimize or text within your site "language" allows you to allows you to control the repetition and clarify or elsewhere on the create web content, appearance, function. web. navigate around the placement, and web, and define certain function of certain types of content. elements on your web pages, like page position, shape, size, and colors. WHAT IS HTML USED FOR? 1. Embedding media 2. Manipulating image parameters A. Widgets 3. Adjusting page layouts B. Images Audio Files 4. Enabling navigation C. D. Videos Files 5. Creating image maps E. Text Files 6. Adding image rollover or hover attributes F. Graphics < COMMON > HTML SNIPPETS Snippets include: Command Code Variable Code Identifies the elementyou want to manipulate. Defines the changes. EMBED IMAGE WITHIN TEXT <img src="http://www.yourcompanydomain.com/images/image.jpg"> Command Code This sample identifies the location of the image to embed. ALIGN IMAGE <img src="http://www.yourcompanydomain.com/images/image.jpg" alt="yourimage" align=right> This sample aligns right. ADJUST IMAGE SIZE WITH PIXELS <img src="http://www.yourcompanydomain.com/images/image.jpg" alt="yourimage" align=right width=100> | This sample aligns right, sets width to 100px. ADJUST IMAGE SIZE WITH PERCENTAGE AND ALIGNMENT <img src="http://www.your companydomain.com/images/image.jpg" yourimage" align=right width=30%> This sample aligns right with a 30 percent adjustment. НTML HYPERLINK HYPERLINK PAGES AND IMAGES <a href="http://www.hyperlinkcode.com">Hyperlink Code</a> HTML TAGS <html> <head> STRUCTURAL TAGS </head> <body> HEADING TAGS <h1> </hl> <p> + <a href=" ANCHORS "> </a> PARAGRAPH TAG </p> <h2> </h2> <p> LINE BREAK <br> </p> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> </body> </html> CORRECT DESIGN ISSUE S WITH CSS COMMON DESIGN VARIABLES WITHIN CSS: STEPS TO ACCESS CSS STYLE FILES AND CHANGE DESIGN VARIABLES 1. Background color Step #1: 2. Font decoration Open style.css file. 3. Border elements Step #2: 4. Image height/width Using CTRL F, bring up dialogue bOx. 5. Shading Step #3: Display style (block, justified, headers, etc.) 6. Search for an elementyou wish to modify (i.e. menus, sidebars, etc.). 7. Margins Step #4: Hover response Change the variables inside the ()to manipulate design. 9. Click action CSS SNIPPETS Snippets include: Selector Property Value Identifies the property you want Defines the changes. Allows you to select and manipulate HTML element(s). to manipulate. A SNIPPET THAT CONTROLS SIDEBAR ATTRIBUTES #sidebar { position: relative; float: left; width: 100px; color: red; font-size: 40%; border-left: solid 2px blue; } Change the variables inside the () to manipulate alignment, color, font size, and border width. FONT SHORTHAND PROPERTY SET TO DEFINE ALL PROPERTIES IN ONE STATEMENT #selector { font: italic bold 12px/30px Georgia, serif; } Font-family* Font-style Font-size* Line-height *Font size and family are required, but other values will automatically set to default if excluded. HOVER OVER/ANCHOR SNIPPETS a:active { color: red; } a:link { color: yellow; } a:visited { color: blue; } a:hover { color: green; } These are the four main snippets for anchor links. Use your predefined color name from your CSS style file or use one of the optional CSS codes. BACKGROUND COLOR SNIPPET #selector { background: #e2eae2; } MULTI-BORDER USING A PSEUDO SHADOW BOX SNIPPET box-shadow: [inset][horizontal offset]* [vertical offset]* [blur radius] [optional spread radius] [color]*; *Horizontal, vertical, color are required. Rest are optional. EXAMPLE : Box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000; CREATIVE PAGE LAYOUT SNIPPET . columns { column-count: 4; column-gap: 1Opx; } Determines how many columns we need. Determines the space between the columns (the gutter). TEXT ALIGN SNIPPET ta 1 { text-align: left; } Specifies the horizontal alignment In this case, it sets all text to the left (instead of center or of text. right aligned). FONT WEIGHT SNIPPET bold { font-weight: bold; } Sets how thick or thin characters in text In this case makes text BOLD. It can be either set to should be displayed. normal, bold, bolder, or, lighter. SNIPPET TO ALIGN TEXT WITH DISPLAY AND MARGIN PROPERTY center { text-align: center: margin: auto; display: block; } Specifies the horizontal alignment of text. Specifies the type of box used. Specifies all the margin properties. TEXT DECORATION SNIPPET no td:hover { text-decoration: none; } Used to remove In this case, underline is removed when the underlines from links. mouse hovers over the link. CLEAR AND FLOAT SNIPPET clear { float: none; clear: both; } Used to remove Specifies which side(s) of an element floating elements are not allowed. In this case no floating elements allowed on the left or the right side of the text. underlines from links. CREATING A COLORIZED GRAPHIC 140 There are a total of 140 named colors across all browsers. 123 17 Out of 140, 123 are available in CSS. only 17 in HTML. •00 Zero density ff Full density НЕХ Code created by a six-integer O-F expression called a HEX value. RED e9 3d f 1 GREEN BLUE RED GREEN BLUE Uses variable weights of red, green, and blue light. WEB DESIGN AND DEVELOPMENT BUDGET YOUR TOTAL BUDGET $ $ $$$$ $ $ $$ 40% 20% 25% 15% PROGRAMMING PLANNING INTERFACE LEADERSHIP DESIGN AND AND MANAGEMENT COMPATIBILITY H bluehost.Com