{"id":3813,"date":"2022-09-05T17:27:32","date_gmt":"2022-09-05T17:27:32","guid":{"rendered":"https:\/\/nmi.cool\/web-rev\/?page_id=3813"},"modified":"2022-09-05T17:27:32","modified_gmt":"2022-09-05T17:27:32","slug":"styling_text","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/styling_text\/","title":{"rendered":"Styling Text"},"content":{"rendered":"\n

1. <\/strong>Download this file<\/a> and unzip it (this may happen automatically).  Find the unzipped stylesheet_example folder (most likely in your downloads folder) and copy it into the folder that you are working in for this class. <\/p>\n\n\n\n

2. <\/strong>Take a look inside the stylesheet_example folder and make sure there are three files named example_page1.html, example_page2.html, and stylesheet.css, as well as a folder named pix.<\/p>\n\n\n\n

3. <\/strong>Open example_page1.html with your editor and attach stylesheet.css by adding the following code just below the <title> tags:  <\/p>\n\n\n\n

<link href=\"stylesheet.css\" rel=\"stylesheet\" \/><\/code><\/pre>\n\n\n\n
In this case, the stylesheet is in the same folder as the HTML document. Otherwise, you would have added a folder name in the path statement such as\u00a0<link href=\u201dcss\/stylesheet.css.<\/strong><\/p>\n\n\n\n
4.\u00a0<\/strong>Open stylesheet.css and take a look at the style names, .style1, .style2, through .style5. These types of styles are referred to as classes because they begin with a period. Styles that begin with a hashtag #, are referred to as ids.\u00a0\u00a0You are about to apply for those 5 classes.<\/p>\n\n\n\n
5. <\/strong>Return to example_page1.html and add the style1 class to the paragraph tag that encompasses Style 1. Nmix 4010 by changing<\/p>\n\n\n\n
<p>Style 1. Nmix 4010<\/p><\/code><\/pre>\n\n\n\n
to<\/p>\n\n\n\n
<p class=\"style1\">Style 1. Nmix 4010<\/p><\/code><\/pre>\n\n\n\n
6. <\/strong>Do the same with \u201cStyle 2. Nmix 4010\u201d etc. until you have applied all five styles to a different text block. <\/p>\n\n\n\n
7.\u00a0<\/strong>Now that you have applied the styles, edit each style by changing colors, sizes, letter spacing, etc. Hint: style4 in stylesheet.css should serve as a good example.<\/p>\n\n\n\n
8. <\/strong>Create a brand new class in stylesheet.css (name it  .newstyle if you wish), add some properties to the new style, add a new text block in example_page1.html (<p> and <\/p> tags with text between them) and apply the new style to the new text block.<\/p>\n\n\n\n
9. <\/strong>When you are done be sure and save the stylesheet.  Close example_page1.html. <\/p>\n\n\n\n
10.\u00a0<\/strong>Create a new HTML file and attach the same stylesheet.\u00a0\u00a0Add some text and apply the different styles to it.\u00a0\u00a0Now change each of these styles.\u00a0\u00a0Change them radically!<\/p>\n\n\n\n
11. <\/strong>Reopen example_page1.htm.  Does it look different?   That\u2019s because you changed the stylesheet. Because stylesheet.css is a separate file, any document that is applied to is affected when you alter it.<\/p>\n\n\n\n
12.\u00a0<\/strong>To illustrate this point further drag the file named stylesheet.css out of the stylesheet_example folder to the desktop.\u00a0\u00a0Now look at your example page.\u00a0\u00a0All of those styles should disappear because the HTML file can no longer find the stylesheet. Ie, you broke the relationship.\u00a0\u00a0Put stylesheet.css back into the stylesheet_example folder.\u00a0\u00a0Did the styles reappear?<\/p>\n\n\n\n
13. <\/strong>Before you leave, you MUST explore some of the CSS text effects such as text-shadow:<\/p>\n\n\n\n
text-shadow: 2px 2px #ff0000;\n<\/code><\/pre>\n\n\n\n
text-transform, which converts text to upper or lower case:<\/p>\n\n\n\n
text-transform: uppercase;<\/code><\/pre>\n\n\n\n
or<\/strong><\/p>\n\n\n\n
text-transform: lowercase;<\/code><\/pre>\n\n\n\n
letter-spacing:<\/p>\n\n\n\n
letter-spacing: 2px;<\/code><\/pre>\n\n\n\n
and word spacing. Have fun.<\/p>\n\n\n\n
Once you have a truly funky-looking document, it is time\u00a0to save it, link to it from your homepage (index.html), and upload everything.\u00a0\u00a0Be sure and upload stylesheet.css into the same relative location as example.html or all that good work will be for nothing. Also, don\u2019t forget to replace the older version of index.html on the server with the newer version that you just added a link to.<\/p>\n","protected":false},"excerpt":{"rendered":"
1. Download this file and unzip it (this may happen automatically).  Find the unzipped stylesheet_example folder (most likely in your downloads folder) and copy it into the folder that you are working in for this class. 2. Take a look inside the stylesheet_example folder and make sure there are three files named example_page1.html, example_page2.html, and stylesheet.css, as well as a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3813","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/3813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=3813"}],"version-history":[{"count":0,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/3813\/revisions"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=3813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}