Today I continued with fonts. I learned that if you want to specify a font with two words in the name, such as Lucida Console, you must surround it with quotes, like so: "Lucida Console." I learned about the font-weight property, which can have a value of 100 to 900, and 400 corresponds to the value "normal," while 700 corresponds to the value "bold." The values "lighter" and "bolder" select a font-width that is lighter or bolder than the current font width, respectively. These two values do not function on many fonts.
A font stack is a prioritized list of fonts that the browser will cycle through until it finds a font that is installed on the user's computer.
In regards to font-size, we can use "small," medium," or "small," or we can use relative size keyword values, such as "larger" or "smaller," which select a size larger or smaller than the current font size. We can also set a font size to a certain amount of pixels. We can also use percentages to specify a font size. Percentages work based on the parent element's default font size (16 pixels is the usual default), so if I select a value of 100%, then, if the parent element's default is still 16 pixels, then my font will be 16 pixels. 200% would result in a 32 pixel font, for example. This is the same as the em value, so, 1 em, would equal 16 pixels, 2 em would equal 32 pixels, if the parent element's default font size is 1 pixels. You could state this as "1 em is equal to 1 times the current font size." Ems are gaining in popularity, and are recommended by the W3C (or percentage), because they are ideal for maintaining more scale-able layouts.
The font-style property can have a value of normal, italic, or oblique. Italic is preferred over oblique, because many fonts are not capable of displaying an oblique value, while that the opposite is true of the italic value. The font-variant property can be set to small-caps and this makes all the letters be in upper case. We are also able to simply use the property font, followed by the multiple desired values, separated by a space. This would look like this:
font: italic 1.5em bold
However, this is not ideal because of some restrictions, which, if not followed, cause the entire line to be ignored. In this method, the font-style, font-variant, and font-weight must be defined before defining the font-size, while the font-family needs to be the last value defined. Any value that is omitted will take its initial value, not its inherited value.
The line-height property controls the total size of a line, which is the text space plus the upper and lower "letting." The "letting" is a term used in typography, and it is the gap between the descender and the ascender, which basically means the gap in between two lines of text. Line-height can accept five types of values, a normal value, a unit-less value, the em value, a percentage value, or a pixel value. If the unit-less value is used, you could enter a "1," with no unit following it, and this would be the same as 100% or 1 em
The text-align property aligns the text (right, left, center, and justify, for example). The justify value makes every line in a paragraph, except the last line, take up the fill width its containing element. Left is the preferred alignment, and is also the default alignment.
The text-decoration property can have a value of none, overline, and underline. This can be used, for example, to remove the underlining in a hyperlink. Overline creates a line over the text and underline creates a line under the text. Line-through creates a line through the text, and the default value for this property is "none."
The text-indent property can be specified in length units or percentages. For example, a 5% indent would indent to 5% of the container. 5em, on the other hand, would indent 80 pixels (5 x 16px (unless parent element's default font size has been changed to something other than 16 pixels)). Text-indent can also be set to a negative value, if desired.
The text-transform property controls the case of the text. Text can appear in all uppercase, all lowercase, or with each word capitalized. Uppercase will create all uppercase, lowercase will create all lowercase, and capitalize will make the first letter of each word into an uppercase letter.
The white-space property sets how the white space in an element is handled. The default value is normal, which ignores line breaks and spaces. This is why if you space twice between words in your html paragraph text, only one space will appear when the text is displayed in the browser, and is also why, when you type text into your html paragraph text and hit enter (to jump to the next line), the jump to the next line is ignored in the text displayed on the browser. Instead, the browser (unless you change the value for white-space, will create a line break at the edge of the containing element). Another value for this property is nowrap (as in, the text does not "wrap" around to the next line) value, which ignores all line breaks, collapsing all text into a single line on the browser. The pre value renders content exactly as written in the text editor, honoring every text and line break in the editor (in the markup). This even includes the spaces in the markup (the text in the editor) indentation. The pre-line value ignores multiple spaces in the markup, but it does honor line breaks. Finally, pre-wrap works like the pre value, except it will also wrap at the edge of the container.
Something interesting I noticed today is that the property "color" can control the color of the text in a paragraph, but there is no such thing as a property called "font-color" in css. Html, however has an attribute that goes like so: <font color="red">. I will not use this, though, because I am being taught to keep structure in html and style in the CSS, in order to be consistent with the way the W3C and the industry prefers code to be written.
The text-shadow property is used to create a drop shadow for text. This property has four values. We can use pixels (we can use cm as well, but the results are not too practical, pixels work well for this property). The values for this property are, in order: horizontal axis, vertical axis, blur, and color. The horizontal and vertical axis can have negative numbers (to move the shadow left or upwards, as positive numbers will move the shadow right or downwards).
We discussed the overflow property and the text-overflow property. If the overflow property is set to a value of hidden, then any text that goes past its container element (due to the white-space being set to a value of nowrap, forcing the text into one long line) will be hidden from view. The default value for text-overflow is clip, which will clip the text (it disappears). If you change the value for text-overflow to ellipsis, the browser will display three dots where the text tapers off into the border of the container.
Using the word-wrap property and the break-word value, we can make the text bumping into the edge of the container wrap around to the next line.
We went over properties that can modify lists. The list-style-type property can modify list markers. With the list-style-position property, we can set whether we want the list marker to appear inside or outside a list item (outside is the default position). A good way to look at how the list-style-position property works is to set a border for your list (example, 1px solid black). This will clarify the effects of the list-style-position property.
List indentation in IE is controlled by margin. In firefox, safari, and chrome, it's controlled by padding. List-style-image can be used to add a custom marker image (the marker is what we use to refer to the list dot (which doesn't have to be a dot)). It would go like this, for example: list-style-image: url(imagefile.png);. The problem with this is the image is simply inserted at the beginning of each list item, and the positioning doesn't look right. Another approach to positioning an image into the beginning of a list is to set the list-style-position to none, then add the custom marker (the image) as a background to the list item, like so (the no-repeat prevents the image from repeating in the background, the 0 and 2px control the vertical and horizontal spacing (like in the shadow placement axises we went over previously), respectively, and the padding controls where the text goes, so putting 35px in this case gives the text enough space to start past the image):
background: url(marker.png) no-repeat 0 2px;
padding-left: 35px;
}
The margin-bottom property (with a value of 1em, for example) places a space under each list item.
The list-style property can accept the values for the other list-style properties withing it, in any order. So, position, type, and image (would be url(), for example) can all be specified within the list-style property (separate them with a space).
Total Treehouse Points: 1,380
Treehouse Points by Subject Matter: HTML 663, CSS 687, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 66% of all students."
Badge(s) Earned Today:
Texts, Fonts, and Lists
Courses Completed:
How to Make a Website
HTML
HTML
Books Read or in Progress:
"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)
Hours Spent Coding Today: 5.5
Total Hours Coding: 84.5
No comments:
Post a Comment