You will be able to pass a quiz
CSS and Open Lab
Watch & Read:
CSS at w3schools
CSS: Adding Style to the Web
3 ways to attach a style sheet! Internal, External, and inline Style Sheets
Format for Internal and External Styles:
selector {property: value}
Example: h3 {color: #FF0000}
This changes all h3's font color to Red (#FF0000)
You can apply multiple styles at once by separating them with a ; (semi colon)Example: h3
{
color: #FF0000;
font-family: Arial;
}Internal Styles use the style tag inside the head section of your webpage
Example: Change the color of the h3 text and size of the font (text) inside a p tag
<style>
h3 {color: #FF0000}
p { font-size: 150%}
</style>External Styles are called by using the Link tag
Example: <link rel="stylesheet" type="text/css" href="file-name_of_stylesheet.css" />
Inline styles are placed inside the tag (element) as an attribute!
Example: <p style="font-family: arial, 'lucida console', sans-serif">
Javascript use HTML DOM to change CSS
The W3schools HTML DOM has example of CSS Style changes
Style Object: document.getElementById("id").style.property="value"
The Style object property categories:
Background properties
W3C: W3C Standard.
Property Description W3C background Sets all background properties in one Yes backgroundAttachment Sets whether a background-image is fixed or scrolls with the page Yes backgroundColor Sets the background-color of an element Yes backgroundImage Sets the background-image of an element Yes backgroundPosition Sets the starting position of a background-image Yes backgroundPositionX Sets the x-coordinates of the backgroundPosition property No backgroundPositionY Sets the y-coordinates of the backgroundPosition property No backgroundRepeat Sets if/how a background-image will be repeated Yes Border and Margin properties
Property Description W3C border Sets all properties for the four borders in one Yes borderBottom Sets all properties for the bottom border in one Yes borderBottomColor Sets the color of the bottom border Yes borderBottomStyle Sets the style of the bottom border Yes borderBottomWidth Sets the width of the bottom border Yes borderColor Sets the color of all four borders (can have up to four colors) Yes borderLeft Sets all properties for the left border in one Yes borderLeftColor Sets the color of the left border Yes borderLeftStyle Sets the style of the left border Yes borderLeftWidth Sets the width of the left border Yes borderRight Sets all properties for the right border in one Yes borderRightColor Sets the color of the right border Yes borderRightStyle Sets the style of the right border Yes borderRightWidth Sets the width of the right border Yes borderStyle Sets the style of all four borders (can have up to four styles) Yes borderTop Sets all properties for the top border in one Yes borderTopColor Sets the color of the top border Yes borderTopStyle Sets the style of the top border Yes borderTopWidth Sets the width of the top border Yes borderWidth Sets the width of all four borders (can have up to four widths) Yes margin Sets the margins of an element (can have up to four values) Yes marginBottom Sets the bottom margin of an element Yes marginLeft Sets the left margin of an element Yes marginRight Sets the right margin of an element Yes marginTop Sets the top margin of an element Yes outline Sets all outline properties in one Yes outlineColor Sets the color of the outline around a element Yes outlineStyle Sets the style of the outline around an element Yes outlineWidth Sets the width of the outline around an element Yes padding Sets the padding of an element (can have up to four values) Yes paddingBottom Sets the bottom padding of an element Yes paddingLeft Sets the left padding of an element Yes paddingRight Sets the right padding of an element Yes paddingTop Sets the top padding of an element Yes Layout properties
Property Description W3C clear Sets on which sides of an element other floating elements are not allowed Yes clip Sets the shape of an element Yes content Sets meta-information Yes counterIncrement Sets a list of counter names, followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default is 1 Yes counterReset Sets a list of counter names, followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0 Yes cssFloat Sets where an image or a text will appear (float) in another element Yes cursor Sets the type of cursor to be displayed Yes direction Sets the text direction of an element Yes display Sets how an element will be displayed Yes height Sets the height of an element Yes markerOffset Sets the distance between the nearest border edges of a marker box and its principal box Yes marks Sets whether cross marks or crop marks should be rendered just outside the page box edge Yes maxHeight Sets the maximum height of an element Yes maxWidth Sets the maximum width of an element Yes minHeight Sets the minimum height of an element Yes minWidth Sets the minimum width of an element Yes overflow Specifies what to do with content that does not fit in an element box Yes verticalAlign Sets the vertical alignment of content in an element Yes visibility Sets whether or not an element should be visible Yes width Sets the width of an element Yes List properties
Property Description W3C listStyle Sets all the properties for a list in one Yes listStyleImage Sets an image as the list-item marker Yes listStylePosition Positions the list-item marker Yes listStyleType Sets the list-item marker type Yes Misc properties
Property Description W3C cssText Positioning properties
Property Description W3C bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element Yes left Sets how far the left edge of an element is to the right/left of the left edge of the parent element Yes position Places an element in a static, relative, absolute or fixed position Yes right Sets how far the right edge of an element is to the left/right of the right edge of the parent element Yes top Sets how far the top edge of an element is above/below the top edge of the parent element Yes zIndex Sets the stack order of an element Yes Printing properties
Property Description W3C orphans Sets the minimum number of lines for a paragraph that must be left at the bottom of a page Yes page Sets a page type to use when displaying an element Yes pageBreakAfter Sets the page-breaking behavior after an element Yes pageBreakBefore Sets the page-breaking behavior before an element Yes pageBreakInside Sets the page-breaking behavior inside an element Yes size Sets the orientation and size of a page Yes widows Sets the minimum number of lines for a paragraph that must be left at the top of a page Yes Table properties
Property Description W3C borderCollapse Sets whether the table border are collapsed into a single border or detached as in standard HTML Yes borderSpacing Sets the distance that separates cell borders Yes captionSide Sets the position of the table caption Yes emptyCells Sets whether or not to show empty cells in a table Yes tableLayout Sets the algorithm used to display the table cells, rows, and columns Yes Text properties
Property Description W3C color Sets the color of the text Yes font Sets all font properties in one Yes fontFamily Sets the font of an element Yes fontSize Sets the font-size of an element Yes fontSizeAdjust Sets/adjusts the size of a text Yes fontStretch Sets how to condense or stretch a font Yes fontStyle Sets the font-style of an element Yes fontVariant Displays text in a small-caps font Yes fontWeight Sets the boldness of the font Yes letterSpacing Sets the space between characters Yes lineHeight Sets the distance between lines Yes quotes Sets which quotation marks to use in a text Yes textAlign Aligns the text Yes textDecoration Sets the decoration of a text Yes textIndent Indents the first line of text Yes textShadow Sets the shadow effect of a text Yes textTransform Sets capitalization effect on a text Yes unicodeBidi Yes whiteSpace Sets how to handle line-breaks and white-space in a text Yes wordSpacing Sets the space between words in a text Yes
Terms:
You should Read W3schools CSS and the HTML DOM Style Object Page.