Web Development Quiz 2
Property
"Property" indicates the aspect of the element you want to change (color, font, width, height, etc.)
Value
"Value" indicates the the setting for the property ("red, "Ariel, "5px" etc.)
Including Font Files
@font-face is used to specify the URL to a font file that the browser will download. Requires: "src" attribute to specify the path to the font (can be relative if you're hosting the font file yourself, or absolute to include it from a different website) "format" attribute to provide the name of the format of the font "font-family" attribute to give the name of the font. Need to provide multiple formats for different browsers. Need to apply the font in a "font-family" declaration in a separate rule. Services will generate the CSS for you. @font-face{ font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.tff) format('truetype'); } p{ font-family: 'ChunkFiveRegular'; }
background-color
Background color is set by this property, it determines the background color or an element
Border Color
Border color can be set using the "border-color" property. It accepts all color values. You can also use "border-top-color", etc. Or this shorthand: "border-color: red green blue yellow;" (top, right, bottom, left) ex) div{ border-width: 1px; border-style: solid; border-color: red; }
Styling Forms
Browsers display forms differently by default, so it is very helpful to add some styling to your forms to make them easier to use. Commonly styled form elements: text inputs and text areas, submit buttons, labels on forms (including alignment) Elements that are difficult to style: select boxes, radio boxes, checkboxes
CSS Rules
CSS rules target HTML elements and apply a group of styles to them. Rules contain 2 parts: selector and declarations
Key Layout Concepts
CSS treats each HTML element as if it is in its own box, either a block-level, box, or an inline box. These boxes act like "building blocks" for our page layout, we can change their style (size, color, border, margin, etc) and then move them around the page to create our layout. We can use containing elements like <div> and <span> to group a number of elements together. This allows us to position a group of elements. ex) we might wrap an image, a heading, and a navigation list in a <div> to create a site header positioned at the top of the page.
HSL
CSS3 added a new color property, HSL, to indicate a color by its hue, saturation, and lightness. Used as a back up color. More intuitive than HEX and RGB. Easier to tell what the color is if you can imagine the color wheel. Easier to modify colors (especially lighten/darken) without needing to use a program.
Including CSS
Can be included in 3 ways: Bad: "Style" attribute on individual elements <p style="color: red;"> Being phased out HTML5, avoid this method Better: <style> tag in the <head> for your HTML <style type="text/css> p{color:red} </style> Can't re-use CSS on multiple pages, clutters HTML file Best: <link> tag to include an external css file using "href" attribute <link href="style.css" type="text/css" rel="stylesheet" /> Allows you to re-use the same stylesheet for multiple pages
External CSS
Can have multiple <link> tags to import multiple CSS files which allows you to separate portions of your CSS into different files. <link> tag uses three attributes: href- specifies the path to the CSS file. Can be "relative" to a CSS file within the same website or can be "absolute" to a CSS file on another domain (useful for loading frameworks, libraries, or themes from a Content Delivery Network) type- specifies the type of document being linked to. Should always be "text/css" rel- specifies the relationship b/w the HTML page and the file it is linked to, should always be "stylesheet" <link href="style.css" type="text/css" rel="stylesheet"
CSS
Cascading Style Sheets Allows us to create rules that specify how the content of an HTML element should appear (color, size, position, etc.) CSS is all that is required to take a plan HTML file and add style/layout.
Color Values
Color Names, RGB Values, Hex Codes
CSS Comments
Comments in CSS are wrapped by /* and */ /* Comment goes here */
CDN
Content Delivery Network
Choosing Colors
Contrast is extremely important when coloring text - make sure there is enough contrast between the foreground and background or it will be hard to read. (For dark text on light background, try #555 for text, #FAFAFA for background)
Box Appearance
Every box has three properties that can be adjusted to control its appearance: border, margin, padding
CSS Box Model
Every element in HTML is a rectangular box. CSS can adjust properties of the boxes: size, border, padding, margin Ex) *{border; 1px solid red; } i
Fixed Positioning
Fixed positioning will position an element relative to the browser window. Fixed elements are positioned relative to the browser window and will stay in the same position when the user scrolls up or down on the page. Surrounding elements will ignore the space that would have been taken up by the fixed position element. (i.e. if creating a website header that is fixed, you will need to add some top margin to the next element in your HTML so that the content will not be covered up by the fixed header.)
color
Foreground color is set by the property "color" which determines the color of text
HSLA
HSLA adds an alpha value to a HSL color, allowing for opacity. Like RBGA, 0.0 is fully transparent while 1.0 is fully opaque. Used as a back up color.
Monospace Fonts
Have equal widths for all letters. Great for presenting code examples or technical info. Examples: Courier, "Courier New", Inconsolata
Serif Fonts
Have extra stroke details. Inspired by calligraphy and traditionally used for long passages of text in print. Examples: Georgia, Times, Times New Roman
Sans-Serif Fonts
Have straight ends to letters, much cleaner and more modern design. For most websites, a sans-serif font improves readability and design aesthetics. Examples: Arial, Helvetica, Verdana
Hue
Hue is the color itself, represented by an angle position on the color wheel, 0-360 degrees, where 0 is red.
Cascading
If multiple CSS rules apply to the same element, there are several factors that determine which rule is applied: Last Rule, Specificity, !important,
Centering Content
If you want to center a box on the page (or within its containing element) you can set "margin-left" and "margin-right" to auto. Note: the element you are trying to center will also need a "width" set, otherwise it will take up the full width of the page and not appear centered. ex) div.intro{ width: 50%; margin-left: auto; margin-right: auto; }
Lightness
Lightness is the amount of white/black in a color, from 0% being fully black to 100% being fully white.
Backup Color
Like RGBA, HSL and HSLA should both be used as a back up color. p{ color: #66a329; color: hsl(90, 60%, 50%); }
List Marker Position
Lists are indented into the page by default and the "list-style-position" property indicates whether the marker should appear on the inside or outside of the box containing the list. outside: will cause the bullet point to sit on the left of the block of text (this is the default behavior) inside: will cause the marker to sit inside the box of text, and the text will be indented Ex) ul{ list-style-position: inside; }
CSS History
Maintained by W3C (like HTML) and has evolved over time. CSS3 is being developed. CSS can be interpreted differently in different browsers, so it is important to check multiple browsers, especially for complex layout or fancy styles.
Submit Text Inputs
Many of the CSS properties already covered can be used to add style to text inputs: "font-size" to set the size of the text entered by the user "color" to set the color of the text, and "background-color" to set the color of the background of the input "border" to add a border around the input, and "border-radius" to create round corners ":focus" psuedo-class to change the background color of text inputs when it is being used ":active" psuedo-clas to apply styles when the user hovers over an inout "background-image" to add an icon or texture image to the background of the input
White Space
Marin and Padding are very helpful in adding white space between items on the page.
Adjacent Sibling Selector
Matches an element that is the next sibling h1 + p{} targets the first <p> element after any <h1> element (that is a sibling)
General Sibling Selector
Matches any element that is a sibling h1 ~ p{} targets all of the <p> elements that are siblings of any <h1> element
Opacity
RGBA Values allow you to indicate an opacity value along with a RGB color. The opacity value is known as an alpha value and is a number between 0.0 and 1.0. Added in CSS3 and only supported by modern browsers - good to indicate a backup color as well. 0.0 is fully transparent 1.0 is fully opaque. p{ color: rgb(102, 205, 170); color: rgba(102, 205, 170, 0.5; }
Saturation
Saturation is the amount of color vs. gray, represented as a percentage from 100% color to 0% color, which is fully grey.
Typeface Terminology
Serif Fonts, Sans-Serif Fonts, Monospace Fonts
Margin
Sits outside the edges of the border and can create a gap between the borders of two adjacent boxes. Note: If the bottom margin of any box touches the top margin of another, the larger of the two margins will be used. If they are the same, only one will be applied. Helpful in adding white space between items on the page.
Inheritance
Some CSS properties will be inherited by child elements. Example: "font-family" or "color" applied to the <body> element will be inherited by child text elements such as <h1> or <p>. Other properties, like "padding" and "border" will NOT be inherited by child elements. You can force any property to inherit values from its parent element by using "inherit" for the value of the properties: body{ font-family: Arial; padding: 10px; } h1{padding: inherit; }
Overflowing Content
Sometimes the content inside a box is larger than the box itself. The "overflow" property tells the browser what to do when this is the case. It takes the following values: "show" - default value and will show overflowing content "hidden" - simply hides any extra content that does not fit in the box "scroll" - will add a scrollbar to the box so that users can scroll to see the missing content ex) p{ height: 300px; overflow: scroll; }
Element Positioning
Static Positioning, Relative Positioning, Absolute Positioning, Fixed Positioning
Styling Submit Buttons
Styles added to the submit button can help it fit the theme of your website and make it easier for the users to see "color" change the color of the text on the button "text-shadow" to give the text a 3D look "border-bottom" to make the bottom border of the button slightly thicker, which gives it a 3D feel "background-color" to set the background color of the button ":hover" pseudo-class to change the appearance of the button when the user hovers over it
Styling Tables
Tables by default have very little styling, and are not very easy to read. We can use CSS properties to add some basic style and spacing to tables, which will make them much more useful: "width" to set the width of a table "padding" is useful to set the space between the border of each table cell and its content "text-transform" can convert the content of the table headers to uppercase "letter-spacing, font size" can add additional styling to the content of the table headers or rows "border-top, border-bottom" can create border above and below table heading or rows "text-align" can align the text of some cells to the left, and some cells to the right "background-color" can change the background color of alternating rows ":hover" is useful to highlight a table row when the user is hovering over it
CSS3 Rounded Corners
The "border-radius" property can be used to create rounded corners on any box. It takes pixel values which determine how curved the corner is. You can specify individual values by using "border-top-right-radius", etc. Shorthand: "border-radius: 5px, 10px, 5px, 10px;" (top, right, bottom, left)
Table Cell Spacing
The "border-spacing" property allows you to control the distance between adjacent cells, specified in pixels (similar to margin for other block elements) ex) table {border-spacing: 10px; } You can specify two values if you want to specify separate values for horizontal and vertical spacing " table { border-spacing: 5px 15px; }" The "border-collapse" property can be used to collapse the borders of table cells that are adjacent and have no space between them. It accepts two values: collapse - will collapse borders into a single border both border-spacing and empty-cells properties will be annoyed separate - borders are detached from each other, border-spacing and empty-cells works
Border Style
The "border-style" property controls the style of a border. It can take the following values: "solid" - a single solid line "dotted" - a dotted line "dashed" - a dashed line "double" - two solid lines "groove", "ridge", "inset", "outset" - a 3D effect "hidden"/"none" - no border shown Like width, individual border styles can be changed using specific properties: "border-top-style", etc
Border Width
The "border-width" property is used to control the width of a border. It accepts values in pixels, or one of these shorthand values: "thin", "medium", "thick". Individual border widths can be controlled with these properties: "border-top-width", "border-right-width", "border-bottom-width", "border-left-width". Different widths for the 4 border values can also be written like this: "border-width: 2px 1px 1px 2px;" (top, right, bottom, left)
CSS3 Box Shadow
The "box-shadow" property allows you to add a drop shadow around a box. It works just like the "" property and takes the following values: "horizontal offset" - negative pixel values position the shadow to the left, positive to the right "vertical offset" - negative pixel values position the shadow to the top, positive to the bottom "blur radius" - distance in pixels fora blur. If omitted, will be soli "spread radius" - (optional) positive pixel value will cause the shadow to expand in all directions, negative will shrink it "insert" - optional keyword can be added to create an inner shadow "color" takes any color value. Often RGBA or HSLA is used to create a semi-transparent shadow
Changing Inline/Block
The "display" property allows you to turn an inline element into a block element or vise versa. It can also be used to hide an element from the page. It takes the following properties: "inline" - causes a block-level element to act like an inline element "block" - causes an inline element to act like a block-level element "inline-block" - causes a block-level element fo flow like an inline element while retaining other features of a block-level element (like width and height) "none" - hides an element from the page (although it will still appear when viewing source or using the inspector)
Table Empty Cells
The "empty-cells" property can be used to specify whether or not borders for empty cells should be shown. It can take three values: "show" will show the borders of empty cells "hide" will hide the borders of empty cells "inherit" can be used for nested tables, to take the parent's value Ex) table { empty-cells: hide; }
Floating Elements
The "float" property allows you to do two things simultaneously: Take an element and move it as far left or right as possible within its containing element; allow other elements that sit inside its containing element to flow around it. The float property takes 3 values: "left", "right", or "none" ex) "img{float: right; }" moves the image as far to the right as its containing element as possible, and allows other elements within the containing element to float around it.
Specifying Font Faces
The "font-family" property allows you to specify the typeface that should be used for any text inside the elements that a CSS rule is targeting. The value of the property is the name of the typeface you want to use. Users visiting your site need to have the typefaces you are specifying installed in order to be able to see them. Because of this, you should specify "fallback" typefaces with commas, ending with a generic font name for the type of font you are using. Font names with a space should be wrapped in quotes. Ex: font-family: Arial, Verdana, sans-serif; font-family: "Courier New", Courier, monospace;
Box Dimensions
The "height" and "width" properties can be used to control the dimensions of HTML elements. 3 types of values can be used: pixels are the easiest and most accurate percentages will size the box relative to the size of the browser window or, if the box is wrapped by another element, a percentage of the size of the containing box ems will size the box based on the size of the text within in. This can be useful for creating designs that are flexible across different sized screens.
List Shorthand
The "list-style" attribute can be used to set both list style and list position in one shorthand property. The position value is given first, followed by a space, and then the style or image. ul {list-style: inside circle; } ul{list-style: insider url('image.jpg'); }
List Style
The "list-style-type" property allows you to control the shape and style of a bullet point on a list. It cane applied to the <ol>, <ul>, and <li> elements. Unordered lists can use the following values: none disc (filled in circle) circle (empty circle) square (filled in square) Ordered lists can use the following values for the "list-style-type" property: decimal (1.) decimal-leading-zero (01.) lower-alpha (a.) upper-alpha (A.) lower-roman (i.) upper-roman (I.)
Margin II
The "margin" property controls the gap between boxes. Its value is most commonly given in pixels, although percentages and ems work as well. If one box sits on top of another, their margins are collapsed, which means the larger of the two margins will be used and the smaller will be discarded. "margin: 10px;" will apply margin to all sides of the box "margin-left: 10px;" etc can be used to add margin to a specific side shorthand: "margin: 1px 2px 3px 4px;" (top, right, bottom left" alternative shorthand: "margin: 20px 10px;" (top/bottom, left/right)
Padding II
The "padding" property allows you to specify how much space should appear between the content of an element and its border. The value of this property is most often specified in pixels, although it is also possible to use percentages or ems "padding: 10px;" applies padding to all sides "padding-top: 10px;" etc. can be used to add padding to a specific side shorthand: "padding: 10px 5px 3px 1px;" (top, right, bottom, left) alternate shorthand: "padding: 20px 10px;" (top/bottom, left/right)
Position Property
The "position" CSS property is used to change the positioning of an element. It takes the following values: "static" - the default, causes element to use normal flow "relative" - uses relative positioning, requires offset properties relative to the element's default position "absolute" - uses absolute positioning, requires offset properties relative to containing element "fixed" - uses fixed positioning, requires offset properties relative to window
Offset Properties
The "position" property determines the element's positioning, and box offset properties are used to give the positioning values. There are 4 properties available: "top", "left", "bottom", and "right". The box offset properties accepts pixel values, as well as percentages and ems.The value of the offset properties is the space that the element should be offset from the side of the box that the "position" property indicates. i.e. "top: 10px; " will offset the element 10px from the top of the element, the top of the containing element, or the top of the window depending on how the box is positioned. Negative values are allowed.
Hiding Boxes
The "visibility" property allows you to hide boxes from users but leaves a space where the element would have been (as opposed to "display" none;" which does not leave an empty space). It takes takes the following values: "hidden" - hides the element "visible" - shows the element note: the elements will still show up when viewing source or using the inspector, so do not use for sensitive information
Z-index
The "z-index" property, the higher the z-index, the more "priority" an element is given. z-index only works for positioned elements, meaning elements that have "position" set to something other than static. The z-index property takes a numeric value, and can be negative. Negative values are often needed if you want to move a positioned element behind a non-positioned element, since you can't add a greater z-index to the non-positioned element.
Border Shorthand
The border property allows you to specify the width, style, and color of a border in ne property. The values need to provided in that exact order ex) div{ border: 1px solid red; }
Bold Text
The font-weight property allows you to create bold text. This property can take two values: bold and normal (which will un-bold text)
Letter and Word Spacing
The letter-spacing property allows you to increase the spacing between letters. The word-spacing property allows you to control the gap between words. These properties take in "em" and can be useful for headings.
Line Height
The line-height property allows you to increase or decrease the spacing between lines of a paragraph. The property takes values in "em". 1.4em or 1.5em are good default values to make paragraphs of text more readable and aesthetically pleasing.
Padding
The space between the border of a box and any content contained within it. Helpful in adding white space between items on the page.
Alignment
The text-align property allows you to control the alignment of text and can take one of 4 values: left, right, center, justify (causes every line in a paragraph, except the last line, to take up the full width of the containing box)
Underline and Strikethrough
The text-decoration property allows you to underline text. This property can take 3 values: none: which will remove any decoration underline: which will make the text underlined line-through: which will strike-through the text
Text Indent
The text-indent property allows you to add indentation to text. It takes values in pixels.
Drop Shadow
The text-shadow property allows you to create a shadow around text. it takes the following values: left-right offset of the shadow in pixels (negative values go to the left, positive values go to the right) top-bottom offset of the shadow in pixels (negative values go up, positive values go down) amount of blur apply to the shadow in pixels (optional) color of the drop shadow h1{ text-shadow: 1px 1px 3px #AFAFAF; }
Uppercase and Lowercase
The text-transform property allows you to change the case of text. This property can take 3 values: uppercase: which will make the text appear uppercase lowercase: which will make the text appear lowercase capitalize: which will capitalize the first letter of each word
Color (Both)
There are 2 main color properties in CSS: "color" and "background-color"
CSS Selectors
There are many different types of selectors that can be used to target HTML elements. Universal Selector, Type Selector, Class Selector, ID selector, Descendant Selector, Direct Child Selector, Adjacent Sibling Selector, General Sibling Selector
Basic Table Style
Tips for making tables easier to read: Give cells padding to help improve readability Distinguish headings to make then easer to read, and clearly indicate that they are headings, not part of the data you are presenting Shade alternate rows to help users follow along the lines. Use a subtle change from the normal background color Align numerals (generally to the right) so that large numbers are clearly distinguished from smaller ones
Limiting Size
Websites can be designed to expand or shrink to fit the user's screen. The "min-width" and "min-height" properties can be used to specify the smallest size a box can be displayed. The "max-width" and "max-height" properties can be used to specify the largest size a box can be displayed. Both properties can take pixels, percentages, or ems. ex) div.intro{ min-width: 300px; }
Overlapping Elements
When using relative, fixed, or absolute positioning, boxes can overlap each other. If this happens, the elements that appear later on the HTML will sit on top of those that appear earlier in the page. To control which element wits on top, you can use the "z-index" property.
List Images
You can specify an image to act as a bullet point using the "list-style-image" property. The value uses the format "url('image.jpg');" and can be an absolute or relative URL. Margin or padding may need to be added to space the text of the list properly, depending on the size of the image used Ex) ul{ list-style-image: url('images/star.png'); }
First Letter of a Line
You can specify different styles for the first letter or first line of text inside an element using pseudo-elements. :first-letter selects the first letter inside an element :first-line selects the first line inside an element p.intro:first-letter{ font-size: 2em; } p.intro:first-line{ font-weight: bold; }
Styling Links and Input
You can use pseudo-classes to target different types of links. :link selects links that have not yet been visited :visited selects links that have been visited :hover selects links that the mouse cursor is hovering over :active selects links or buttons that the user is clicking (styles only apply while the mouse button is depressed) :focus selects from fields that are in focus and the user is inputting text Ex: a:hover{ color: lightblue; }
Universal Selector
applies to all elements on the page (yes rarely) *{}
!important
can be added after your property value to indicate that it should be considered more important than other rules that apply to the same element. Use very sparingly, better to resolve specificity/inheritance issues than override with !important p{ color: yellow !important; }
Color Names
can be used to indicate the name of a color. There are 147 colors supported by browsers, which is a relatively limited palette. Not commonly used p{ color: MediumAquaMarine; }
RGB Values
express the red, green, and blue values of a color as numbers between 0 and 255 p{ color: rgb(102,205,170) ;}
Italic Text
font-style property allows you to create italic text. This property can take the values: italic, oblique, and normal (which will un-italicize text)
Last Rule
if 2 selectors are identical, the latter of the 2 will take precedence. This is also the case when multiple CSS files are included - they are applied in order so rules in the second or third CSS file may overwrite rules in previously included CSS
Specificity
if one selector is more specific than the others, the more specific rule will take precedence over more general ones i.e. "p#intro" is more specific than just "p" Order from least to most specific: type --> class --> id -->style attribute
Declarations
indicate how the targeted elements should be styled. Contained inside { } after the selector. Multiple declarations separated by semi-colons. Contain two parts: property and value
Selector
indicate which elements the rule applies to
Class Selector
matches elements by their class, uses"." .note{} p.note{} targets only <p> elements that have class "note" p.note.important{} targets only <p> elements that have class "note" AND class "important" (i.e. <p class=note important">
Type Selector
matches elements by their name (i.e. <p>="p") h1, h2, h3{}, li{}, a{}
Direct Child Selector
matches elements that are direct "children" of another - with no other elements in between li > a{} targets any <a> elements that are direct children of an <li> will not target elements that are inside of a <li> but are not direct children
Descendant Selector
matches elements that are inside of other elements p a{} targets any <a> elements anywhere inside a <p> element #intro a{} targets any <a> elements inside element with id="introduction" p.note em{} targets <em> elements inside <p class="note">
ID Selector
matches elements used by their id, uses "#" #intro{}
Relative Positioning
moves an element relative to where it would have otherwise been. Relatively positioned elements remain within the normal flow of the document. Thus, relative positioning an element does not affect the position of surrounding elements- they will stay in their original position. Empty space may be left in the space the element was moved from.
Absolute Positioning
positions an element relative to its nearest positioned ancestor (i.e. the first parent element that is not statically positioned). If no parent elements are positioned (not static), the element will be positioned relative to the <body>. Absolute positioning removes an element from the normal document flow-other elements will be positioned as if it does not exist, and no empty space will be left where it originally was located.
HEX Codes
represent values for red, green, and blue in hexadecimal code p{ color: #66cdaa; }
Border
separates the edge of one box from another
Size of Type
the "font-size" property enables you to specify a size for the font. There are three ways to specify the size: font-size: 12px; font-size: 200%; (a percentage of the parent element's font size) font-size: 1.3em; (similar to percentage, relative to the parent) For best readability, set body text no smaller than 1em or 16px.
Static Positioning
the default, where every block-level element appears on a new line
