Cascading Style Sheets (CSS) and Boxes

Cascading Style Sheets (CSS) and Boxes

html3.docjma50101/31/2015

Cascading Style Sheets (CSS) and Boxes

Outline/reminder:

  • What are styles
  • What are style- types
  • Where can we store styles

Styling Purpose

HTML was designed to markup scientific papers; e.g. here is a heading 1, here a (sub)heading 2, here is a paragraph etc. Itwasn’t designed to style the pages (bold, font, color etc.), CSS (Cascading Style Sheets) is

We want to separate the content from the styling.

  • Open your index.htm page in Notepad
  • Render it

The 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 …whatto be styled (p) above +
  • { +
  • CSS propertyname (color above) +
  • : +
  • a property value (#6B42E3 above) +
  • ; and
  • }

Here is an example I modified from aw3schools.comexample: save it as Samplestyles.htm in your USB,sPractice 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 Color

Colorwas specified two ways:

Color:“#” (HEX)

Color:name

The result:

C Users John AppData Local Temp SNAGHTMLaeb07c5 PNG

Questions?

Possible Style Locations

  • Cansave 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.htm

Delete 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/Pasteinto yourindex.htminside the <head> element. Here is what you should see:

C Users shepherd AppData Local Temp SNAGHTML16c1838 PNG

Change the bodyBackgroundcolor to what you (I) selected from Color.#efeffa, I think...

  • Save and test on USB device

Notes

  • Verdana is a sans serif font
  • Font-size as a % allows text to scale as % of M…Don’t usually specify a pixel value, called responsive: Renders same on phone, tablet, desktop
  • Margin 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 window
  • Table’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 sides

Border-radius makes the corners rounded: top-left, top-right, bottom-right, and bottom-left

Want responsive sites…not in this class, too complicated

Example

Let’s test on our network/pub folder. To do so, send (put via FTP or drag and drop) these assets:

  • Index.htm
  • Banner.gif

Then:

Or, select your name in the list on the schedule page.

Did it work?

Now, let’s delve into styles at a more conceptual level

Selector Types

Three types of selectors: (What to apply the styles to)

  • Element (a.k.a tag),
  • Class,and
  • ID
  • Tag/Element Selectors are applied to existing HTML elements (Like the “p”example above)
  • Classselectors are styles that can be applied to anything, and
  • ID selectors that can be applied to named sections of a document, <div> for example…more when we look at Dreamweaver

1.)Tag Selectors

  • General format of a tag selectorrule:

An HTML element(aka.the selector),a {, a CSS property, a : a value and a ;and a }

Example:

C Users shep AppData Local Temp SNAGHTML61649d PNG

As seen, you can have multiple declarations for one rule:

e.g. a hypotheticalh1 rule with 6 declarations: Note two ways to specify colors, besides hash tags: rgb and color name

h1{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

C Users shep AppData Local Temp SNAGHTML145ddc7 PNG

2.) Class Selectors

Format: A period, a name and a declaration

  • Can be applied to anything
  • Example:

3.)ID Selectors

Applies to a section of your page…will see later

OK, so three style selectors: Tag, Class and ID

Inline styles are placed inside the paragraph

<em>, <strong> even stylecan 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 thenlink 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:

C Users shep AppData Local Temp SNAGHTMLdab53f PNG

So, we’ve seen examples of the two main places to store CSS information: embedded and external…we won’t deal with inline very much

So far, we’re working with Tag selectors…what are class selectors?

Class Selectors

Now let’s see what are called a classselector; a style that can be applied to anything:

Inside the index page we now have 2 classes: header and footer

  • it’s called a class selector—can apply it to anything, note the period in front of it
  • To make them do anything, we have to apply them to something. For example,
  • Addclass=”border” inside h1 as shown below. (watch the quote marks)

  • It draws a line (border) around the <h1> at its top and bottom

Applying a footer selector

  • Let’s push text in row 3 to the right, change its color and make it smaller:

We already created a.footerclass (see above), let’s attach it to something

Attach the class to the <td element in row 3

  • Go down to row 3
  • Inside that <tdaddclass=”footer”
  • Like this:

Here is my entire styling sheet

Here is my rendered page:

(uncomment the styles )

  • Save and test
  • FTP/Drag and Drop the following:
  • index.htm,
  • banner.gif,
  • Test again using

Boxes and Pseudo classes

As 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 classes

  • One 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>

CSSPage 1

Top View