CS 318 - Week 4 Lecture - 2-13-13
Mostly-intro-to-CSS
aside: yet-another HTML element:
fieldset
* semantic purpose: to group together related
controls within a form
* a block element (but can be within a form)
* <fieldset>
<legend> text describing this set of controls </legend>
...desired controls...
</fieldset>
* its default appearance is a thin solid border
around the contained controls, with the legend
inside that border (like a Java Swing TitledBorder)
fieldset.html
NOW to CSS...
* Cascading Style Sheets
* idea: HTML is for content, and structuring content --
NOT display and formatting!
*CSS* is supposed to be for display and formatting!
* we'll cover (I hope) fundamentals, and enough
to layout and format forms reasonably --
there's a LOT more, I hope this will get you
started!
* note: that your pages with CSS do need
to validate using the required W3C link,
now included in the html5-template.html
* where does CSS "go"?
...style sheet information CAN be added in 3 ways:
1. INLINE -- inline within an individual HTML element
with a style *attribute* <-- inline style sheet
2. EMBEDDED in the HTML page's head element
as a style *element* <-- internal style sheet
3. placed in an EXTERNAL .css file and applied
to a page with a link *element* placed in
that page's head element <-- external style sheet
* we will be concentrating on EXTERNAL style sheets in this
class
* there IS a cascading order to all these --
you can have multiple style sheets, a later
one's styles can override an earlier one --
but you don't have to know the rest of the
cascading rules for this class.
* how do you indicate that a page should use an
CSS external style sheet?
* a link element placed in the head element
* (OK to have more than one link element,
put them in the desired order for the
cascade you want...)
* have an href attribute whose value is the
.css filename to be used (relative to this
page) OR its URL
* we'll use type="text/css" for older browser
compatibility
* and have a rel attribute with value "stylesheet"
<head>
...
<link href="filename-or-url.css" type="text/css"
rel="stylesheet" />
...
</head>
* what do you put in a stylesheet?
CSS rules
a CSS file contains one or more rules
* each rule consists of one or more SELECTORS
describing which content the style applies to
* following the selectors, a rule lists
presentational PROPERTIES and their values
that should apply to the selected content
* basic syntax: [class style standard --
curly braces on their own line,
lined up with the beginning of the selector]
selector
{
property: value;
property: value;
...
property: value;
}
example: (from course text)
p
{
font-family: "Trebuchet MS";
color: red;
}
* demo'd in lect04.css, css-ex1.html
* adding to those basics...
* if a property value has blank(s),
it must be written in quotes;
font-family: "Trebuchet MS";
(it looks like quotes are not a good idea
if you don't have blanks...)
* you can have multiple elements in a
selector -- just separate them by commas
* this causes all the elements h1 through
h6 to have the color property with the
value green:
h1, h2, h3, h4, h5, h6
{
color: green;
}
* when you'd sometimes like different styles
for the same element
...one way to do that is with a class
selector
* in the .css file,
you put . followed by the new class in the
selector --
that can WITH or WITHOUT an element!
/* any element can be given this class */
.right
{
text-align: right;
}
/* only a p element can be given this class */
p.center
{
text-align: center;
}
* for an element to USE a class selector in
a document, you giv that element a class attribute
whose value is the class selector:
<h1 class="right">
<p class="center">
* IF an element would LIKE multiple classes,
separate their names with white space:
<p class="center yell">
* you can use an ATTRIBUTE selector
when you'd like a style to apply to
an element with an attribute of
a particular value (nice for the input
element, for example!)
* put [attr="desired-value"] in the selector
input[type="text"]
{
background-color: blue;
}
* if a property's value has units,
don't put a space between the value and
the units
(px = pixels)
margin-left: 20px
* CSS gives you multiple ways to indicate
the value of a color property --
* some color names are defined (red, blue, and a number
of others -- see chart in Chapter 3)
* you can express a color as rgb:
rgb(100, 0, 4)
or rgba
rgba(100, 0, 4, 50)
* you can express a color as a hex code:
#FFFFFF
* there are a variety of properties related to
fonts...
* HTML div element -- <div> ... </div>
is USED to represent a major division or section
of a page,
and it is also often a target for CSS rules