Class 7 Notes for Web Scripting 

Learning Objectives:

You will be able to pass a quiz

 

Topics Covered:

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

Border and Margin

Layout

List

Misc

Positioning

Printing

Table

Text



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.

 

Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.