Cascading Style Sheets Flashcards
What are the two aspects to adding style to a web page via CSS?
Declaration & Selector
Tells the browser to apply the declared style to the HTML <body> element.
Selector
The most basic kind of CSS selector. It selects every instance of the corresponding HTML element.
Simple type selectors
Selects all elements on a page and can be used in combination with other selectors.
Wildcard selector
You can apply the same declaration to a group of selectors by listing all of the desired selector names separated by commas.
Grouping selectors
What are the two naming options for an HTML element?
ID names & Class names
The syntax is similar of that to Grouping selectors, but without the commas.
Descendant (Nested) selectors
The associated style selectors.
Hyperlink (or “anchor) pseudo-class selectors
What is the correct order when styling hyperlinks?
a.link
a.visited
a.hover
a.active
Lo Ve H A
A more specific selector beats out a less specific selector.
Cascading
What if there is a “tie” regarding how specific the selectors are?
In a tie, the last-defined selector wins.
How/Where do we add the style declaration to our HTML files?
- Internal Stylesheet
- External Stylesheet
- Inline Style
Put the style declarations in the <head> of HTML text file. Also known as “Embedded” or “Global”.
Internal Stylesheet
Put the style declarations in a separate text file and then import that text file into your HTML file.
External Stylesheet
Simply put the style declaration within the HTML tag when it is used.
Inline Style
Refers to the layout of the items on your page. Also refers to the “position” descriptor in CSS rules.
Positioning
Controls the transparency of an element and determines how much of a hidden element’s content is visible.
Opacity
We can make an element’s background partially transparent but keeping the text inside visible by setting the element’s opacity property to a value between _ & _ ?
0 and 1
Is used to specify the space between the content of an element and its borders.
Padding
It is a technique for creating page numbers for a website, which allows users to easily navigate between large amounts of content.
Pagination
To create a pagination element in HTML, you can use either of these two elements.
<div> or <ul>
</ul></div>
Determines the appearance of the mouse cursor when hovering over an element to which this property is applied.
Cursor property
Is used to set the color of the text.
Color property
The default text color for a page is defined where?
Body selector
Used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
Text-align property
When the text-align is set to this, each line is stretched so that every line has equal width, and the left and the right margins are straight (like in newspapers and magazines).
Text-align: justify
This text-align property specifies how to align the last line of text. Can be right, centered, or justified.
Text-align-last
Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
unicode-bidi
This property is used to add a decoration line to text.
text-decoration-line
This property is used to set the color of the decoration line.
text-decoration-color
This property is used to set the style of the decoration line.
text-decoration-style
This property is used to set the thickness of the decoration line.
text-decoration-thickness
Is used to remove the underline from links.
text-decoration:none;
This property is used to specify uppercase and lowercase letters in text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
text-transform property
It is used to adjust the spacing between letters. In the world of design, this is commonly referred to as the tracking of text.
letter-spacing property
It is used to specify the indentation of the first line of a text.
text-indent property
Is used to specify the space between lines.
line-height property
Used to specify the space between the words in a text.
word-spacing property
Specifies how white-space inside an element is handled.
white-space property
This property adds shadow to text.
text-shadow property
