Name: Mastering Text Style on the Web: From Inline Formatting to CSS
Brand: EduBirdie
Rating: 5.0 (3 reviews)

University:
California State University, Northridge
Course:
CIT 160/L | Internet Technologies and Lab
Academic year:

2024
Views:

238

Pages:

4
Author:

ceownikc8a

Styling Text There are three ways in which the style of text can be adjusted in a web page: formatting elements, formatting attributes, and CSS. Since using (X)HTML for presentation is non-semantic coding, most formatting elements are deprecated, as are, to a lesser extent, many formatting attributes. This page will note the more common deprecated methods of formatting text but will concentrate on CSS methods. Examples will show the CSS using inline styling, but the same styling properties may be used in stylesheets. There are many ways to format text, and the categories below do not exhause all the possibilities, especially for CSS. ● ● ● ● ● Text Weight Emphasis Fonts Indentation Text Alignment Text Weight Technically, text weight refers to the thickness of the characters. For the purposes of this discussion, text weight will be defined as a method of making text more or less prominent with indicating the meaning of that prominence. There are two (X)HTML elements used for this purpose: and . This is text inside tags. This is text inside tags. By default, most browsers display these elements in bold. Thus the above code will display as This is text inside tags. This is text inside tags. The only difference is that : is slightly more semantic than ; thus it is preferable for those who are aiming to make their coding as semantic as possible. A preferable choice is to use the CSS font-weight property:
Some text in bold.
Other values that might be given for the font-weight property are normal, bolder, or lighter. Numerical values from 100-900 may also be given, with 400 equivalent to normal and 700 equivalent to bold. Emphasis In typography, some types of text are indicated by means of italics. Examples include not only text intended to be read as emphasised, but also titles of books and foreign words. This type of usage is not semantic because italics does not have a single meaning. It is nevertheless possible to display text in italics on a web page by various means. In (X)HTML, there are two elements used for this purpose: and . As with the and elements, is sometimes preferred to because it is perceived as being slightly more semantic. In CSS, italics can be displayed by using the value italic for the font-style property:
Some text in italics.
Other possible values are normal, oblique, and inherit. These will not be discussed here, but there uses are easy to look up or discover by experimentation. Fonts In older forms of HTML font styles, colours, and sizes could all be set by using the element with various attributes. Here is an example: This is some text! This will display This is some text! The element is now deprecated and fonts should always be set using CSS. The CSS properties for font style, colour, and size are as follows: font-family, font-size, color. Hence the text above will be generated by the following code:
This is some text!
A few further words need to be said about each of these properties. The web has inherited from print technology two basic types of fonts: serif (e.g. Times New Roman) and sans serif (e.g. Arial, Helvetica, and Courier). When applying a font, it is possible to designate first, second, and third choices:
This is some text!
This will render the text in the paragraph element in Arial. If Arial is not available, Helvetica will be used, and, if Helvetica is not available, the text will appear in the browser's default sans-serif font. The font-size property accepts a variety of types of values: percentages (e.g. 200% for double normal size), point sizes (e.g. "12pt" for a 12 point font), pixel heights (e.g. 10px for 10 pixels), or ems— the length of the letter m (e.g. 1em, 2em). The color property accepts basic English colour names like black, white, red, and blue. However, it will also accept a greater variety of colours designated by hexidecimal or RGB codes. There are a variety of resources on the the internet for getting these codes. For a basic tutorial, see the W3Cschools CSS Color page. Indentation Recall that in (X)HTML two consecutive spaces are processed as one. Therefore, it is not possible to indent text using spaces (or the tab key). Originally, the most common technique was to use the
element since most browsers add a margin all around the element. Here is an example. This text is inside
tags. You could move text further to the right by nesting blockquotes inside of blockquotes. However, this is not only unwieldy, but also unsemantic, since a blockquotes is technically supposed to be used for an extended quotation. A more effective method is to exploint the CSS block model. Since all elements have margins, all you have to do to indent text is increase the size of the margin. Here is an example:
This is some indented text!
The code above produces the following result: This is some indented text! The margin can be set precisely (using pixels, points, or ems), which makes it much preferable to
. Other margins can also be set; for further information, see the discussion of the CSS box model. Note that this effect does not reproduce the first-line only indentation that we normally associate with the beginning of a printed paragraph. For this, there is another CSS property: text-indent. It accepts the same values and measurements as margin. Alignment Whilst indentation simply moves the text in a particular direction by a fixed measure, alignment moves the text in a direction relative to the boundaries of the browser window. Text aligned to the left will appear on the left side of the window; text aligned to the right will appear on the right side of the window. Text aligned to the centre will appear in the centre. Historically, the align attribute was used for this purpose:
Some Centred Text

Some Left-Aligned Text

Some Right-Aligned Text
The above code will be displayed as follows: Some Centred Text Some Left-Aligned Text Some Right-Aligned Text This method of aligning text is still frequently used, although it is technically deprecated due to the W3C's recommendation that separate presentation from our (X)HTML markup. The same effect can be achieved using the CSS text-align property:
Some Centred Text

Some Left-Aligned Text

Some Right-Aligned Text
The reason why (X)HTML's @align continues to be used is probably that it is less cumbersometo type for inline styling. But, wherever possible, one should attempt to style text using stylesheets, where this is not as great a problem.

Related Documents

How do You Determine the Shortest Path Between Two Nodes in a Weighted

Data Synthesize Learning Materials

Making Visual Hierarchy

Data Analytics Practice Exam #10

Essentials of Lean Enterprise

Six Sigma: A Brief Overview

Examination of Histograms

The Concept of Recursion Work in Solving Problems

The Resilience and Enduring Relevance of UNIX

Compressing Data Assignment

Unit 18B. The Rate of Reaction Between HCl and CaCO3

Exam Notes: Unit 7 Level 3

Constructor, Inheritance and Method Overriding

Networking Fundamentals: Quiz 10 - Exploring Computer Science Concepts

Java Design Patterns & Streams Quiz 12: Test

Graph Theory Principles and Data Structures

Exploring the Harlem Renaissance Through Literature

Polymorphism, Generics and Encapsulation

Interface and Abstract Class

Java Multithreading Quiz 9: Test Your Knowledge on Concurrent Programming

Mastering Text Style on the Web: From Inline Formatting to CSS

of 4

0/0

Recommended Documents

Creating Webpage Short Tutorial
California State University, Northridge CIT 160/L | Internet Technologies and Lab
Lecture Note

How Web Pages Work
California State University, Northridge CIT 160/L | Internet Technologies and Lab
Lecture Note

Fair Use Policy

EduBirdie considers academic integrity to be the essential part of the learning process and does not support any violation of the academic standards. Should you have any questions regarding our Fair Use Policy or become aware of any violations, please do not hesitate to contact us via support@edubirdie.com.

All universities

Princeton University

California State University, Northridge

American Baptist College

Virginia Maryland College of Veterinary Medicine

Northwest College

Augusta University

Colorado State University

The Pennsylvania State University

University of Pittsburgh

Elon University

Stanford University

Chamberlain University: College of Nursing & Public Health

All courses

PHY 103 | General Physics I

CHEM 101 | Introduction To Chemistry

CIT380 | Computer and Network Security

BUS 104 | Introduction to Business

PSY 150 | Introduction to Psychology

CHEM 107 | Fundamentals of Chemistry (GT-SC2)

BSC 1010 | General Biology I

VN 220 | Medical/ Surgical

VN 310 | Mental Health

CS229 | Machine Learning

FINANCE 201 | Managerial Finance

Introduction to Mathematical Thinking

Contact us

support@edubirdie.com

+3 (595) 691 8356

+1 (888) 337 5415

2024 © EduBirdie.com. All rights reserved

Edubirdie.com is owned and operated by "RADIOPLUS EXPERTS" Ltd. Louki Akrita, 23 Bellapais Court, Flat/Office 46 1100, Nicosia, Cyprus

Privacy Policy
|
Terms of Use
|
Fair Use Policy

Report

Tell us what’s wrong with it:

This document has been uploaded under the incorrect course.The name of the document is incorrect.The document contains low-quality or useless content.The document is difficult to read.There is another reason.

Thanks, got it!
We will moderate it soon!

Free up your schedule!

Our EduBirdie Experts Are Here for You 24/7! Just fill out a form and let us know how we can assist you.

Take 5 seconds to unlock

Enter your email below and get instant access to your document

This field is required

Please enter a valid email address

This field is required

Are you open to sharing your study documents in the future?
This field is required

By clicking 'Sign Up', you agree to our Terms and Conditions and Privacy Policy.

Description

Related Documents

Free up your schedule!

Take 5 seconds to unlock