list-style-type: type;
where type
is the various types of markerslist-style-type | Marker(s) |
---|---|
disc | |
circle | |
square | |
decimal | 1, 2, 3, 4, … |
decimal-leading-zero | 01, 02, 03, 04, … |
lower-roman | i, ii, iii, iv, … |
upper-roman | I, II, III, IV, … |
lower-alpha | a, b, c, d, … |
upper-alpha | A, B, C, D, … |
lower-greek | a, b, g, d, … |
upper-greek | A, B, G, D, … |
none | no marker displayed |
tss_styles.css
file is open in your editor. article.syllabus ol {
list-style-type: upper-roman;
}
article.syllabus ol ol {
list-style-type: upper-alpha;
}
article.syllabus ol ol ol {
list-style-type: decimal;
}
tss_run.html
file in your browser. tss_styles.css
file in your editor.nav > ul
selector, add the style list-style-type: none;
tss_home.html
file in your browser. Verify that there are no markers next to the navigation list items in the left column.list-style-image: url(url);
where url
is the URL of a graphic file containing the marker imagetss_styles.css
file in your editor.article#about_tss ul {
list-style-image: url(runicon.png);
}
tss_home.html
file in your browser. list-style-position: position;
where position is either outside or insideHow often do you use a bulleted list in your everyday lives? Some people rely on them heavily to keep track of all kinds of information. How beneficial can lists be for presenting information in a Web format?
padding: size;
where size
is expressed in one of the CSS units of length or the keyword auto to let the browser automatically choose the paddingtss_styles.css
file in your editor.nav > ul
style rule in the Navigation Styles section and insert the style padding-left: 5px;
tss_home.html
file in your browser. Verify that the entries in the navigation list in the left column have been shifted to the left, which is the result of changing the left padding setting to 5 pixels.margin: size;
margin: top right bottom left;
border-width: size;
border-width: top right bottom left;
tss_styles.css
file in your editor.nav > ul
selector in the Navigation Styles section, insert the following rule:nav > ul > li.newgroup {
margin-top: 20px;
}
tss_styles.css
file in your editor.aside blockquote
selector in the Aside and Blockquote Styles section and insert the margin: 20px 5px;
style into the style rule.tss_home.html
file in your browser. p {padding: 15px 20px;}
The above code sets the top and bottom padding spaces at 15 pixels and 20 pixels, respectively. element:pseudo-class
where element
is an element from the document and pseudo-class
is the name of a css pseudo-classPseudo-Class | Matches |
---|---|
:root | The top element in the document hierarchy (the html element) |
:empty | An element with no content |
:only-child | An element with no siblings |
:first-child | The first child of the parent element |
:last-child | The last child of the parent element |
:first-of-type | The first descendant of the parent that matches the specified type |
:last-of-type | The last descendant of the parent that matches the specified type |
:nth-of-type(n) | The nth element of the parent of the specified type |
:nth-last-of-type(n) | The nth from the last element of the parent of the specified type |
:only-of-type | An element that has no siblings of the same type |
:lang(code) | The element that has the specified language indicated by code |
:not(selector) | An element not matching the specified selector |
tss_styles.css
file in your editor.article#about_tss ul
style rule that sets the list style image marker and replace it with the following three style rules:article#about_tss ul li:first-of-type {
list-style-image: url(runicon.png);
}
article#about_tss ul li:nth-of-type(2) {
list-style-image: url(bikeicon.png);
}
article#about_tss ul li:last-of-type {
list-style-image: url(swimicon.png);
}
Pseudo-Class | Matches |
---|---|
:link | The link has not yet been visited by the user. |
:visited | The link has been visited by the user. |
:active | The element is in the process of being activated or clicked by the user. |
:hover | The mouse pointer is hovering over the element. |
:focus | The element is receiving the focus of the keyboard or mouse pointer. |
tss_styles.css
file in your editor. nav > ul > li > a:link, nav > ul > li > a:visited {
color: rgb(151, 151, 151);
text-decoration: none;
}
nav > ul > li > a:hover, nav > ul > li > a:active {
color: rgb(255, 64, 255);
text-decoration: underline;
}
tss_home.html
file in your browser and hover your mouse pointer over the links in the navigation list.element::pseudo-element
where element
is an element from the HTML file and pseudo-element
is the name of a CSS pseudo-elementPseudo-Element | Description |
---|---|
::first-letter | The first letter of the element text |
::first-line | The first line of the element text |
::before | Content inserted directly before the element |
::after | Content inserted directly after the element |
element::before {content: text;}
element::after {content: text;}
where text
is the content to be inserted into the rendered web pageValue | Description |
---|---|
none | Sets the content to an empty text string |
counter | Displays a counter value |
attr(attribute) | Displays the value of the selector's attribute |
text | Displays the specified text |
open-quote | Displays an opening quotation mark |
close-quote | Displays a closing quotation mark |
no-open-quote | Removes an opening quotation mark, if previously specified |
no-close-quote | Removes a closing quotation mark, if previously specified |
url(url) | Displays the content of the media (image, video, etc.) from the file located at url |
content: attr(attribute);
where blockquote
and q
elements are used for quoted materialcontent: open-quote;
content: close-quote;
tss_styles.css
file in your editor.quotes: "\201C" "\201D";
aside blockquote::before {
content: open-quote;
font-family: 'Times New Roman', Times, serif;
font-size: 1.6em;
font-weight: bold;
}
aside blockquote::after {
content: close-quote;
font-family: 'Times New Roman', Times, serif;
font-size: 1.6em;
font-weight: bold;
}
#top > p : first-of-type : first-line
div .Links img(usemap)