CSS Font, Box Model, Positioning & Table Formatting
•Download as PPTX, PDF•
1 like•1,146 views
The document discusses various topics in CSS including font families, the box model, text formatting and positioning, and table formatting. It defines five font families - serif, sans-serif, script, monospace, and fantasy - and describes their common uses. It also explains the box model of margins, padding, borders, and background, and properties for text alignment, positioning, and table styling.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to CSS Font, Box Model, Positioning & Table Formatting
Similar to CSS Font, Box Model, Positioning & Table Formatting (20)
More from CK Yang
Recently uploaded
Recently uploaded (20)
CSS Font, Box Model, Positioning & Table Formatting
- 1. Web Authoring Topic 17 – Font Family in CSS
- 2. Objectives Students should able to: 1 Explain the font families in CSS. 2 Explain the CSS Box Model 3 Explain the properties that make up the box: padding, border, margin, background colour 4 Perform CSS positioning and alignment 5 Format a table in CSS.
- 3. Font Family in CSS The most common way that Cascading Style Sheets are used is to change the font of a Web page or site. CSS recognizes five font families: - Serif - Sans-serif - Script - Monospace - Fantasy
- 4. Font Family in CSS Each category has many different typefaces that are a part of the family.
- 5. Types of Font Sans-serif fonts should be the basis of your Web content. They are easy to read online and there are many that are common to most computer operating systems. Serif fonts are best used in print style sheets because they make printouts much easier to read.
- 6. Types of Font Monospace fonts should be used when the spacing of the content is important - such as with pre-formatted text. Another common use of monospace fonts is to display code or other technical details.
- 7. Types of Font Script fonts are best used as signatures or other locations where the look of cursive handwriting is desired. Fantasy fonts are best used for headings and artistic text. However, they are the least common of all the categories.
- 8. Font Style Property Define the typeface using the font-family style property. Some possible style listings: - sans-serif body copy body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; } - serif body copy for print body { font-family : "Times New Roman”, Times, serif; }
- 9. Box Model Margins, padding and borders (see next page) are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin.
- 10. Box Model It can be visually represented like this: You do not have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page.
- 11. Text Align The CSS text-align property is used for aligning elements left, right, center etc. Syntax : text-align: <value> Example: td { text-align: right }
- 12. Text Align <style type="text/css"> div { text-align: right; } </style> <div>This div has been aligned using the css text-align property. Try changing the values to see the effect. </div>
- 13. Text Position The CSS positioning properties allow you to position an element. Elements can be positioned using the top, bottom, left, and right properties.
- 14. Static Position Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
- 15. Fixed Position Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.
- 16. Relative Position Relative Positioning A relative positioned element is positioned relative to its normal position.
- 17. Absolute Position Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>.
- 18. Format Table In the example below, the table is named as table1. .table1 {width:200px; margin:auto; font-size:12px; border:1px solid #000000; }
- 19. Format Table Formatting each TD cell in the table using a bold blue colored font and applied a border to each cell and text centered vertically and left aligned horizontally. .table1 td {font-weight:bold; color:#000099; vertical-align:middle; text-align:left; border:1px solid #000000; }
- 20. Add Background to Table Add the following to the appropriate class: background:#ccccff; .table1 td { background:#ccccff; font-weight:bold; color:#000099; vertical-align:middle; text-align:left; border:1px solid #000000; }