Help:Wiki University VisualEditor--Text Styling





<< Previous Chapter Next Chapter >>

Visual Editor toolbar




Paragraph 

A 

  Cite



   

<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Insert<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray">

<div style="flex:0.8; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"> Ω

<div style="flex:4; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"> <div style="display:flex; align-items:center; justify-content:center; border:3px solid black; width:20px; height:20px; border-radius:20px; font-size:1.5em; margin-right:10px">? <div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">

<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">

<div style="flex:2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue; color:white; background-color:lightgray">Save page

Text styling
around text you highlighted, which changes the default setting of the font. (Notice: You can also change style by using the Control key with another key such as a "i" to change text to italics.)
 * Underline - draws a line under text.
 * Language - changes language using ISO coding such as "en" for English.
 * Big - makes the text larger.
 * Small - makes the text smaller.
 * Remove - removes any styling attached to the text other than default.

Try these out
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz
 * To make some text bold, what do you click on the drop down menu?
 * A. Bold
 * B. Language
 * C. Italics
 * D. None of the above


 * To make some text bold, you can highlight text and type:
 * A. Ctrl I
 * B. Ctrl 6
 * C. Ctrl U
 * D. None of the above.


 * To make some text italic, you can highlight text and type:
 * A. Ctrl I
 * B. Ctrl U
 * C. Ctrl B
 * D. None of the above.

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px;">Check your answers

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises Copy and paste the lorem ipsum sentences below into your sandbox page and make the following changes using the Visual Editor:
 * Make the first two words of the first sentence bold type.
 * Make the second sentence italics.
 * Remove the bold text from the first two words of the third sentence.
 * Remove the text style of italics from the fourth sentence.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<< Previous Chapter Next Chapter >>