Cascading Style Sheets (CSS) and Boxes - Duq



html3.docjma50101/31/2015Cascading Style Sheets (CSS) and BoxesOutline/reminder:What are stylesWhat are style- typesWhere can we store stylesStyling PurposeHTML was designed to markup scientific papers; e.g. here is a heading 1, here a (sub) heading 2, here is a paragraph etc. It wasn’t designed to style the pages (bold, font, color etc.), CSS (Cascading Style Sheets) isWe want to separate the content from the styling.Open your index.htm page in NotepadRender itThe page is kind of bland, we need to add styling (formatting) information.What are styles?They are made up of rules: The example below shows a rule for coloring an existing element, paragraph text p {color:#6B42E3;}Format:Selector …what to be styled (p) above +{ +CSS property name (color above) +: +a property value (#6B42E3 above) +; and}Here is an example I modified from a example: save it as Samplestyles.htm in your USB,s Practice folder and render it on your own. Once you’ve done this, let’s discuss what’s there<!DOCTYPE html><html> <head> <style> body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } P { font-family:"Times New Roman"; font-size:20px; color:#9E1E4E; }</style> </head><body><h1>CSS example!</h1><p>This is a paragraph.</p></body></html>Background color in ColorColor was specified two ways:Color:“#” (HEX)Color:nameThe result:Questions?Possible <Style> LocationsCan save styles in the <head> section (see above) or one of two other possible locations: inline within a paragraph, and external in a .css file Example CSS rules to style our index.htmDelete current styles, everything between <style> and </style>Open (double-click the actual link) the “css for index” link on the class web site, select the content and Copy/Paste into your index.htm inside the <head> element. Here is what you should see:Change the body Background color to what you (I) selected from Color. #efeffa, I think...Save and test on USB deviceNotesVerdana is a sans serif fontFont-size as a % allows text to scale as % of M…Don’t usually specify a pixel value, called responsive: Renders same on phone, tablet, desktopMargin left, Margin right: Auto centers the table ( Can also apply auto to body element)Table width as 85 % scales the page…will always be 85% of the current width of the browser windowTable’s Border properties have different values for left side, right side etc., also specifies the border color.Padding keeps a cell’s content to be 35 pixels from the cell sidesBorder-radius makes the corners rounded: top-left, top-right, bottom-right, and bottom-leftWant responsive sites…not in this class, too complicatedExample Let’s test on our network/pub folder. To do so, send (put via FTP or drag and drop) these assets:Index.htmBanner.gifThen: jma.duq.edu/users/YourLoginName/pub/jma501Or, select your name in the list on the schedule page.Did it work?Now, let’s delve into styles at a more conceptual levelSelector TypesThree types of selectors: (What to apply the styles to)Element (a.k.a tag), Class, and IDTag/Element Selectors are applied to existing HTML elements (Like the “p” example above)Class selectors are styles that can be applied to anything, andID selectors that can be applied to named sections of a document, <div> for example …more when we look at Dreamweaver Tag SelectorsGeneral format of a tag selector rule: An HTML element (aka.the selector),a {, a CSS property, a : a value and a ; and a }Example:As seen, you can have multiple declarations for one rule:e.g. a hypothetical h1 rule with 6 declarations: Note two ways to specify colors, besides hash tags: rgb and color nameh1 {color:blue; background- color:rgb(153,102,102); font-family:Arial, Helvetica, sans-serif; font-size:1.5em; letter-spacing:.5em; text-indent:1em; }Notes: in the css above: To adjust vertical lines of text (technically called leading) use line-height; (default is 1.2 em, not illustrated above)There is also word-spacing, not shown, which separates each word from a previous word by so much ; Examples of letter spacing 2.) Class SelectorsFormat: A period, a name and a declarationCan be applied to anythingExample:ID Selectors Applies to a section of your page…will see later OK, so three style selectors: Tag, Class and IDInline styles are placed inside the paragraph <em>, <strong> even <style> can be inline. Not recommended :Recall we can save the styling information in one of three locations:inline <em> …>/em> tags for example or,embedded in the <head> section (as we did), or Saved as an external file (.css) and then link to it. Let’s try this…didn’t test!You would save the styles in an external file, and link all pages to that file: The external file would have a .css extension, such as portfoliocss.css. Here is the concept: So, we’ve seen examples of the two main places to store CSS information: embedded and external…we won’t deal with inline very muchSo far, we’re working with Tag selectors…what are class selectors? Class SelectorsNow let’s see what are called a class selector; a style that can be applied to anything:Inside the index page we now have 2 classes: header and footerit’s called a class selector—can apply it to anything, note the period in front of itTo make them do anything, we have to apply them to something. For example, Add class=”border” inside <h1 > as shown below. (watch the quote marks) It draws a line (border) around the <h1> at its top and bottomApplying a footer selector Let’s push text in row 3 to the right, change its color and make it smaller: We already created a .footer class (see above), let’s attach it to somethingAttach the class to the <td> element in row 3Go down to row 3Inside that <td> add class=”footer”Like this:Here is my entire styling sheetHere is my rendered page:(uncomment the styles )Save and testFTP /Drag and Drop the following: index.htm,banner.gif, Test again using and Pseudo classesAs noted previously, most HTML tags create boxes: <p> creates a box <body>, <h1> does too. Like all boxes, they can have a background color, a text color, a border, a margin, padding and so on. For example, a <p> is a box that can have height, width and color attributes Example:Result: Styling links i.e. pseudo classesOne rule for each state Put inside <style> element<!doctype html><head> <style>/* unvisited link */a:link { color: #FF0000;}/* visited link */a:visited { color: #00FF00; Font-size:.7em;}/* mouse over link */a:hover { color: #666666; font-family:verdana;sans-serif; font-size:.9em;}/* selected link */a:active { color: #F000FF; font-family:georgia, serif; font-size:.9em;}</style></head><body> <a href=""> Duquesne </a></body> ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

Related download
Related searches

©2024 5y1.org, Inc. All rights reserved.