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:
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:
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:
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
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:
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