Computer (Finals, 9)
•Pixel value •Em value •Percent value
With CSS, we can define the value of font-size in three ways:
background-attachment property
With CSS, you can also set your background as fixed, so that when you scroll up or down your web page, the background remains immovable. as values you can input: the scroll, fixed, local, initial, and inherit. To make the background immovable, use the fixed value. This property defines whether the background images are fixed or scrolls with the page.
Generic family Font family
two types of font family names:
Uppercase
•This capitalize all the letters.
Numerical Weight Bold Normal Bolder/Lighter
"font-weight" can be specified in a number of ways
Line-height declaration
"line-height" property defines the spacing before and after each line in a paragraph. The common ways to set the line-height values are by: •Number •Percentage •Absolute measurement.
Font weight
-"font-weight" property defines the thickness of the letters. Weight values specified as: -300, 400, 600, 700, or 800 with each succeeding weight appearing heavier than the previous.
Percentage
-If you specify a percentage value, your font size will be multiplied by the percentage. Example: Line-height = 120% - this would be the same value in number, converted to decimal, converted to decimal, which is 1.2.
Percent & em
-It will be a good practice if we use to set the default font-size of the <body> element. The em size follows the percent size as it appears larger or smaller.
CSS TEXT FORMATTING
-Proper way of displaying text in your website is very important. There are so many factors why you have to display the text in your HTML document properly. Factors to be considered: •Attracting (but not distracting) •Easy to read Not irritating to the eyes
Letter-spacing declaration
-This determines the spacing of each letter. -"letter-spacing" property to increase or decrease the space between characters.
number
-This value takes your font-size property and multiplies the number set in the line-height property. For example: font-size value = 14px line-height value = 1.2 Number value = 16.8px
Absolute measurement
-You can set an absolute measurement, such as line-height: 17px. When you adjust you font-size property, always change the absolute measurement.
Text-align declaration
-You can specify how you want to align your text. -It has left, right, center, and justify value.
Pixel value
-allows us to have full control over the size of our text. With this option, the user can still use the zoom tool to resize the whole web page by using the pixels.
em value
-is used to allow the users to resize the text in the browser menu. Remember that 1 this is equal to 16px for the current font size. = pixels/16
text-shadow
-property adds shadows to a text.
background-repeat
It defines how to repeat the background images.
background
It defines multiple sequenced background properties using one line.
background-image
It defines the background images, which can be more than one. This property sets an image as the background.
property sequence.
When using a shortened property syntax for the background, remember to follow this These are background-color, background- image, background-repeat, background-attachment, background-position, and background.
Color name, RGB value, or HEX value.
With CSS, colors can be added to the HTML content by specifying this These three kinds of color definition are recognized by all web browsers.
the background-position property. The background-position has the following values we can input, the left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom.
With CSS, you can also use the no-repeat property while setting the position of the background so that it does not clash or contrast with the text on the foreground.
CSS BACKGROUND POSITIONS
With CSS, you can set the background image to repeat horizontally or vertically by using repeat-x or repeat-y properties for horizontal and vertical alignments, respectively. It defines the position of the background images.
background-color
It defines the background color.
Line-through
this strikes a line through your text.
CSS text properties:
Color, alignment, decoration, transformation, letter, spacing, height, text direction, word spacing, line height, and text shadow.
no-repeat
If you want to stop a background image from appearing again in the next web page, you can use the property for the background. This value sets the background with no repetition.
Licensing
Not all fonts are free to use. Check if you have the right to use any font for your website
When building a website, you want pages to have a fluid design. Color plays a big part to achieve a fluid design. When choosing a color for certain elements on the website, remember that it must not be irritating to the the intensity of hot colors (red, yellow, orange). Use complementary colors so eyes. Tone down that elements of your page do not clash or stand in too much contrast with each other. Consider how color affects the readability of text in your website. Dark text on light backgrounds are most readable. If you will notice, most websites use a white background. This is also the default background for most emails and search engines because of its simplicity and readability with darker text. Dark backgrounds with lightly colored text cause strain on the eyes, so avoid this approach. If you do not want to choose a white background, it is always safe to use a light-colored background.
Rules for Choosing Colors
-Times New Roman, Palatino Linotype, and Bookman Old Style.
Serif fonts include?
Blink Underline Overline Line-through
Text-decoration types
Capitalize Lowercase Uppercase
Text-transform declaration types
font-style property.
The property that is most commonly used to specify italic text is the?
•left shadow, top shadow, blur size, color
The syntax to insert shadow to text is text-shadow:
Clarity
The text must be clear and easy to read. Avoid fancy styles for your paragraph.
Capitalize
This capitalize the first letter of each word.
Underline
This puts a line under the text within a given tag.
None
This renders the text exactly how it is typed. Default.
Emphasis
Use bold and italic styles only to emphasize, select words such as headings and important terms.
a color picker
Use this to select a color visually. Once you select a color, a code for HEX or RGB values will display. There are many web-based available on the Internet. This tool can be used to easily identify codes of RGB and HEX values.
FONTS AND TEXT FORMATTING
Using CSS, you can add style and design to the texts and fonts in HTML.
<span>
We can ascribe a subscript and superscript value to a text using the sub and super values with this element.
Repeat-y
We can use this value to set background image to repeat vertically.
Repeat-x
We can use this value to set the background image to repeat horizontally.
vertical alignment
You can also use this, which defines not only text alignment, but also the alignment of elements. •Top •Bottom •Text-top •Text-bottom •Baseline •Middle
background properties
You can define multiple of these using the background property. However, a sequence must be followed when defining multiple properties.
BACKGROUND IMAGES
You can set one as a background with CSS. This is almost the same as a background color, except that instead of specifying a color code in RGB inserting or HEX, you specify the source directory of the image. The image is repeated for the entire element.
SHORTENING BACKGROUND PROPERTY SYNTAX
You can shorten the syntax for the background property by defining more than one value in one line.
Normal Italic Oblique
font-style property has three values:
Font family
is a name of a font family of choice or the preferred font.
HEX
is a short term for hexadecimal and is identified by CSS using the formula #000000, with values ranging from 00 to FF; where 00 represents the lowest color intensity and FF represents the highest color intensity. Its color combination is also based on RGB values. The first two digits represent red, the next two digits represent green, and the final two digits represent blue. values are defined using the code #000000. The first two digits define red, the second two digits define green, and the last two digits define blue. The values range from 00 to FF.
Generic family
is used as a fallback or default font in case a browser is unable to support preferred font.
Sans
means "without"
Sans-serif
means without strokes or lines, it is easier to read than serif fonts because of their smoother edges.
Text readability
must be the primary consideration when choosing color values such as font type, font color, font size, etc. It is also advisable to set dark colored text against a light background, instead of the opposite.
text-indent
property allows you to indent lines of your paragraphs, especially the first line.
Text-align
property allows you to set text alignment. It only works on block-level elements or those which add line breaks around themselves, such as h1, p, and div. You can set the alignment as left, right, center, justify.
"text-transformation"
property is used to modify how the paragraph is rendered in the browser.
-If font family contains more than one word, it must be placed within quotation marks. -"font-family"
property to change font family
"font-size"
property to set the font size
RGB Its syntax is rgb(0,0,0) where the first value is for red, the second value is for green, and the third value is for blue. If you indicate 0 for the values of red, green, and blue, the resulting color will be black.
stands for red, green, and blue. Other colors are the results of a combination of these With CSS, we can specify a color by indicating a number from 0 to 250.
HTML
supports 140 standard color names. Aside from this, it also recognizes separate formats for RGB and HEX values. there are three ways to define color: by using a color name, by using RGB values code, and by using HEX values code. We can easily select RGB and HEX values codes by using an online color picker.
Relative size
the user will be able to modify the size of its surrounding element, including the size of text displayed in the browser.
Serif
these are the little strokes or lines attached to the end of a letter or a symbol.
Oblique
this creates a kind of a bold-italic text, if supported.
Italic
this displays the selected text, in this case all <p> tags.
Normal
this makes your font appear how it does in default.
Bolder/Lighter
this makes your text format appear a little bit more or less bold, if supported.
Bold
this specifies that you want generic bold text in CSS.
Numerical Weight
this uses the weights available in the text.
RGB
values are defined using the code 000, 000, 000. The first three digits define red, the second three digits define green, and the last three digits define blue. The values range from 000 to 255. By combining different values of red, green, and blue, you will arrive at different colors.
background positions
you can set these as left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom. This property defines the position of images in the background.
Overline
•This adds a line on your text. You might use this along with underline, for an invoice total.
Blink
•This creates text that flashes on and off.
Lowercase
•This lowercases all letters.
Absolute size
•the user will not be able to modify the size of the text even by zooming in or zooming out.
Normal
•this is how the font appears before any modification.