Podcast
Questions and Answers
When specifying multiple font choices in CSS using font-family, how does the browser determine which font to use?
When specifying multiple font choices in CSS using font-family, how does the browser determine which font to use?
- The browser randomly selects a font from the list.
- The browser uses the first font in the list that is installed on the user's system. (correct)
- The browser uses the last font in the list that is installed on the user's system.
- The browser selects the font that best matches the content.
Which CSS property is used to change the color of text?
Which CSS property is used to change the color of text?
- font-color
- text-color
- text_color
- color (correct)
What is the purpose of the text-indent property in CSS?
What is the purpose of the text-indent property in CSS?
- To create a hanging indent, where the first line is not indented but subsequent lines are.
- To adjust the spacing between individual letters in a text.
- To indent the first line of text within an element. (correct)
- To align text to the left, right, center, or justify.
In CSS, what does the em unit refer to when setting the font-size?
In CSS, what does the em unit refer to when setting the font-size?
How do you apply a style to all HTML elements on a page using CSS?
How do you apply a style to all HTML elements on a page using CSS?
What is the purpose of the !important rule in CSS?
What is the purpose of the !important rule in CSS?
Which CSS property controls the space between lines of text?
Which CSS property controls the space between lines of text?
What do the terms 'baseline' and 'line-height' refer to in CSS text formatting?
What do the terms 'baseline' and 'line-height' refer to in CSS text formatting?
What are the five generic font families in CSS?
What are the five generic font families in CSS?
What is the effect of the following CSS?
em {font-style: italics; font-weight: bold;}
strong {font-style: italics; font-weight: 900;}```
What is the effect of the following CSS?
em {font-style: italics; font-weight: bold;}
strong {font-style: italics; font-weight: 900;}```
Flashcards
font-family
font-family
CSS property to set font family. Specifies prioritized fonts. If a font name contains spaces, enclose in quotes.
font-size
font-size
CSS property to define text size. Can be absolute (cm, mm, in, px, pt) or relative (em, ex, rem, %).
font-style
font-style
CSS property to set font style. Values: normal or italics.
font-weight
font-weight
Signup and view all the flashcards
color
color
Signup and view all the flashcards
line-height
line-height
Signup and view all the flashcards
text-align
text-align
Signup and view all the flashcards
text-decoration
text-decoration
Signup and view all the flashcards
text-indent
text-indent
Signup and view all the flashcards
!important
!important
Signup and view all the flashcards
Study Notes
- CSS is used to format text and fonts on web pages
- CSS controls the formatting of characters including font, color, and style
CSS Font Formatting
- CSS supports setting properties related to font choice (
font-family), font size (font-size), font style (font-style), font weight (font-weight), and other attributes font-familyis used to choose a font
Font Families
serif: characters have serifssans-serif: characters don't have serifsmonospace: characters have fixed widthcursive: cursive-style fontsfantasy: decorative fonts
Font-family usage
- To specify a font for
h1tags, list fonts in order of preference h1 {font-family: Times, "Times New Roman", Tahoma, serif;}- If a font name contains spaces, enclose it in double (or single) quotes
- Browsers search for fonts from left to right
- The browser selects a font if none are available
Font Size
font-sizeis used to set the font size, with the following syntax:selector {font-size: size;}- Font sizes can use absolute or relative units
Absolute Font Sizes
cm(centimeters)mm(millimeters)in(inches where 1 inch = 2.54 cm)px(pixels, where 96 pixels = 1 inch)pt(points, where 72 points = 1 inch)
Relative Font Sizes
em(relative to the font size of the current element)ex(relative to the height of the letter "x" in the current font)rem(relative to the font size of the roothtmlelement)- Percentage (
%) of the parent element's font size - Keywords like
xx-small,x-small,small,medium,large,x-large,xx-large(default ismedium) p {font-size: 1.2em;}sets the font size of allpelements to 1.2 times the current browser's font sizehtml {font-size: 100%;}sets the default font size for the entire web page
Font Style and Weight
font-stylesets the text to normal or italic (normaloritalics)font-weightsets the boldness of the text- Options:
normal,boldor numeric values from 100 to 900 em {font-style: italics; font-weight: bold;}setsemtags to italics and boldstrong {font-style: italics; font-weight: 900;}setsstrongtags to italics with a stronger emphasis
CSS Text Color
colorsets the text color- Common values:
black,white,purple,blue,orange,red,green,yellow h1 {color: red;}setsh1text to redem {color: green;}setsemtext to green* {color: black;}sets all other elements to black
CSS Text Line Formatting
- These properties format text lines
- Understanding
baselineandline-heightis necessary baselineis the line on which letters standline-heightis the distance between baselines in a paragraph- CSS defaults
line-heightto2em
Line Height and Text Alignment
line-heightsets the height of a line, using:p {line-height: 3;}- Alternatively, use:
p {line-height: 2em;}which is the same as 2x the current line height p {line-height: 200%;}sets the line height to 200% of the parent element's line heighttext-alignaligns text:left,center,right,justifyp {line-align: right;}aligns text to the right
Text Decoration and Indent
text-decorationadds text effects usingnone(default),underline,overline, andline-through- The property is not inherited
text-indentindents the first line, using positive or negative values- Negative values create a "hanging indent"
CSS Code Example
<style>
h1 {color: red; text-align: center;}
p {text-align: justify;}
</style>
CSS Inheritance
- CSS properties are inherited
- If a CSS style is applied to an HTML element, it is inherited by descendant elements, unless overridden
Inheritance Example
- In the following example, only
h1has red text h2andpinherit the blue color from thebodyelement
<style>
body {color: blue;}
h1 {color: red;text-align: center;}
</style>
<body>
<h1>Inheritance of CSS</h1>
<h2>1. HTML Tree Model</h2>
<p>This is the first paragraph...</p>
</body>
CSS Display Ranking
- When multiple CSS rules apply to an HTML element, the browser applies the last rule written
- This is the "cascading" feature of CSS
Display Ranking Example
h1is left-aligned because the second rule overrides the first
<style>
body {color: blue;}
h1 {color: red;text-align: center;}
h1 {text-align: left;}
</style>
<body>
<h1>Inheritance of CSS</h1>
CSS Symbols
*selects any element, applying to everything not specified elsewhere!importantgives a CSS rule the highest priority, regardless of its position in the stylesheet
Symbol Example
text-align: center !important;in the firsth1rule makes this property highest priority- Colour is then specified
*sets a low priority
<style>
h1 {
text-indent: 0em;
color: blue;
text-align: center !important;}
h1 { text-align: left; color: red;}
- {text-indent: 1em; color: blue; }
</style>
Applying CSS Rules
- CSS rules are applied based on inheritance within the HTML tree
- Last rule and keyword declarations always take precedence
- Elements selected with
*are applied but are the lowest priority - Rules declared
!importantare highest priority
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
