{"id":32821,"date":"2016-09-15T02:14:12","date_gmt":"2016-09-15T02:14:12","guid":{"rendered":"http:\/\/rkenny.org\/?p=32821"},"modified":"2016-09-21T12:13:48","modified_gmt":"2016-09-21T12:13:48","slug":"eme6207-css","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=32821","title":{"rendered":"EME 6207 – Tech Ed: Cascading Style Sheets"},"content":{"rendered":"
Textbook Reference(s):<\/div>
<\/p>\n

Chap 1: 12-12; Chpt 2: 13-13<\/strong><\/span><\/div><\/div>\n

The purpose of style sheets is to separate the semantics and content from the design.<\/p>\n

There are three types of style sheets:<\/p>\n

    \n
  1. Internal<\/strong> CSS\u2019s that affect the entire webpage<\/li>\n
  2. External<\/strong> CSS\u2019s that affect the entire website<\/li>\n
  3. Inline<\/strong> CSS\u2019s that affect the particular section of a Web page. \u00a0This is not recommended, because it doesn’t effectively separate the content and the design<\/li>\n<\/ol>\n
    \n

    Internal Style Sheets: The Set-up<\/h3>\n The <style> tags are (typically) located in the head of the HTML document: <\/span>\n
    <html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\nbody {background-color: white}\r\n\r\nh1 {color: red}\r\n\r\nfont {font-family: \"Arial\"; color: blue}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1>WORLD CUP 2010!!!!<\/h1>\r\n\r\n<font>GOAAAAAAAAAAAAAAAAAAAAAAAALLLLL !<\/font><br\/>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
    <\/div>
    \nIt will look like this (click the spoiler button to see):
    \n
    <\/span>See the Coding <\/div>

    \nWORLD CUP 2010!!!!<\/strong><\/span>
    \nGOAAAAAAAAAAAAAAAAAAAAAAAALLLLL<\/strong><\/span><\/p>\n
    <\/div><\/div><\/p>\n
    \n
    External: The set-up<\/h3>\n
    An external style sheet is the most common way to include CSS. \u00a0Instead of the <style><\/style><\/code> tags shown above we link to the external file mystyle.css which is in a folder named css<\/p>\n
    <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/mystyle.css\"><\/pre>\n
    please keep in mind. \u00a0the same relative linking used for images is necessary as used with images<\/p>\n
    Inline Set-up<\/h3>\n
    The code is inserted into the body each time it is used. This is more or less impractical. While it MAY save coding time, a simple copy\/paste works just as well, especially if it is used less often. Here is an example of a inline ccs that has to be repeated each page is resides:<\/p>\n
    <strong style =\"font-family: Verdana, Geneva, sans-serif;color: #800000;\">\r\n\"Creating a community of avid readers, one video at a time<sup>\u00a9<\/sup>\"<\/strong><\/pre>\n
    Results in (click the spoiler button to see):
    \n
    <\/span>See the Coding <\/div>
    <\/p>\n
    “Creating a community of avid readers, one video at a time\u00a9<\/sup>“<\/span><\/h3>\n
    <\/div><\/div>
    \n
    Do This<\/div>
    \"dothis\"<\/a><\/p>\n
    Go to the following tutorial sites and take your pick.. both are pretty self explanatory. When you are satisfied you understand things, you can go on to the lesson on Java Script<\/a>.<\/p>\n
    Tutorials<\/h4>\n