Cascading Style Sheets (CSS) - Duq
html3.doc-jma50101/20/2013Cascading Style Sheets (CSS)Outline:What are stylesWhat are style typesWhere do we store stylesBoxes Let’s add some CSS styling to improve the way the page displays Tutorials: Examples: on the right side to choose all designsCan see the HTML and the cssStyling PurposeHTML was designed to markup scientific papers; e.g. here is a heading 1, here a (sub) heading 2, and here is a paragraph. It wasn’t designed to style the pages (bold, font, color etc.), CSS (Cascading Style Sheets) isWe want to separate the content from the stylingOur Current Page:Kind of bland, we need to add styling information.What are styles?They are made up of rules: The example below shows a rule for paragraphs p {color:#C0C0C0;}Format:Element to be styled (p) above{CSS property (color above):a property value (#c0c0c0 above);}We might save this in the <head> section <head> <style> p{color:#c0c0c0;}… </style></head>Can enter this in <head> section…see below… (or one of two other possible locations: inline (within the paragraph) and external in a .css file )Don’t confuse this p with <p>. The example specified a color(c0c0c0) to be applied to paragraphs. (Kuler color below) Remember: The CSS rule can be placed inside the <head> section: Don’t type what you see below. Instead, open the (css for index page ) link, select the content and paste into index.htm.I added a new <h1> element because we’ll be styling it:Recall kuler:The colors used in this CSS:#efefef color:#087368 results in:Style TypesThree main types of styles:Tag, Class, and IDTag Selectors are applied to existing HTML elements (Like the example above)Class selectors create styles can be applied to anything, andID selectors can be applied to sections of a document (won’t use much )Tag SelectorsGeneral format of a tag selector rule: An HTML tag (a.k.a the selector),a {, a CSS property, a : a value and a ; and a }Example:You can have multiple declarations for one rule: 2.) Class SelectorsFormat: A period, a name and a declarationCan be applied to anythingExample:ID Selectors Applies to a section of your page OK, so three style types: Tag, Class and IDAs noted previously, most HTML tags create boxes, <p> creates a box <body>, <h1> do too. Like any boxes, they can have a background color, a border, a margin, padding and so on. We’ll look at the box model again a bit laterBlock Level Elements (tags)…let’s call them boxesThey have a blank line above and below them. Examples of blocksp – Paragraphsh1,h2…h6…level 1, level 2 sizes etcdiv – arbitrary Divisiono, uL – Listtable – for tabular dataInline elements (no boxes):Placed inside the paragraph <span>, <em>, <strong> even <style> can be inline. Not recommended Save and testTest your page. Should look like this (May have to hit ctrl- a few times to shrink the page; see the border (different size each side). It’s centered,)Box ModelMargins: Want a box (p, h1) to be so many pixels away from all the adjacent boxes Padding: Want the content of this box to be so many pixels from its border, if there is oneCan place a border around the box The CSS box model is made up of four parts:marginborderpaddingcontentThe margin is the outermost edge of the box. It is transparent and manifests as space between the element and others on the page. Margins can collapse into one another, so that the bottom margin of one element overlaps with the top margin of the element below it.The border is the next thing surrounding the box. Borders can be colored or transparent. If the border is set to 0 it effectively disappears and the border edge is the same as the padding edge.The padding is the space between the content and the border. Padding is the same color as the background color for the box. If the padding is set to 0, the padding border is the same as the content border.The content is what most people think of as the element. This is the text or image or whatever is displayed inside the box.You can manipulate the different parts of the box model with CSS properties:marginborderpaddingwidthheightHere is an example of a boxPlacing style information:Recall we can save the styling information in one of three locations:inline <em> …>/em> for example or,embedded in the <head> section (as we did), or Saved as an external file (.css) and then link to it. In our case, the styling information is inside the page…called embeddedExternal CSS…will cover more in DreamweaverAnother benefit of CSS: I can save the styles in an external file, and link my pages to that file: Here is the concept:Would modify the link rel line to look like this…just an example, don’t type 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 add what are called a class selector; a style that can be applied to anything:Add the these classes to your index style section I made up the name border; it’s called a class selector—can apply it to anything, note the period in frontfooter’s the sameTo make them do anything, we have to apply them to something. For example, Add class=”border” inside the <h1 tag> as shown below. If you don’t have an <h1> anymore, create an <h1> Class projects</h1> after the img tag, and apply the class: It draws a line (border) around the <h1> at the 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 the .footer class (see above)Attach the class to the <td>Go down to where your name isInside that <td> enter class=”footer”Like this:Here is my entire stylingHere is the rest of the page:Here is the rendered page:Save and testFTP the following: index.htm,banner.gif, Test using ’ll do more with CSS when we look at DreamweaverEND ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.