Embed Size (px)
Citation preview
html3.doc jma501 01/31/2015
Cascading Style Sheets (CSS) and Boxes
Outline/reminder:
What are styles What are style- types Where can we store styles
Styling 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) is
We want to separate the content from the styling.
Open your index.htm page in Notepad Render it
CSS Page 1
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 …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 w3schools.com 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 {
CSS Page 2
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
CSS Page 3
Color was specified two ways:
Color:“#” (HEX)
Color:name
The result:
Questions?
CSS Page 4
Possible <Style> Locations Can 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.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/Paste into your index.htm inside the <head> element. Here is what you should see:
CSS Page 5
Change the body Background color 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
CSS Page 6
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: www.jma.duq.edu/users/YourLoginName/pub/jma501
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 TypesThree types of selectors: (What to apply the styles to)
Element (a.k.a tag),
CSS Page 7
Class, and ID
Tag/Element Selectors are applied to existing HTML elements (Like the “p” example above)
Class selectors 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 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 name
CSS Page 8
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
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing
CSS Page 9
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
CSS Page 10
<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!
o 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 SelectorsNow let’s see what are called a class selector; a style that can be applied to anything:
CSS Page 11
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,o Add class=”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 .footer class (see above), let’s attach it to something
Attach the class to the <td> element in row 3
CSS Page 12
Go down to row 3 Inside that <td> add class=”footer” Like this:
Here is my entire styling sheet
CSS Page 13
Here is my rendered page:(uncomment the styles )
Save and test FTP /Drag and Drop the following:
o index.htm,o banner.gif,
Test again using http://....
Boxes 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:
CSS Page 14
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;}
CSS Page 15
/* 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="http://www.duq.edu"> Duquesne </a></body>
CSS Page 16
