Computer (Finals, 9)

Ace your homework & exams now with Quizwiz!

•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.


Related study sets

American Indian History Midterm IDs

View Set

CIT A+ Final Exam Question - Part Two

View Set

Chapter 23&24/Chapter 60&61- Assessment and management of Integumentary Function

View Set

Life Insurance Policy Provisions, Options, and Exclusions

View Set

PSYCH 101 MONSTER FINAL STUDY SESH

View Set

Mastering Biology 2 - Natural Selection

View Set

Chapter 7: Schedules of Reinforcement

View Set

Chapter 9: Game Theory and Strategic Thkning

View Set

Gouwens Honors American Studies Semester 2 Final

View Set

Chapter 2 Cell Structure and Function

View Set