CSS Introduction
•Take control of the style of your pages,
including the colors and size of fonts, the width and colors of lines, and the
amount of space between items on the page.
•Allow you to specify rules that
say how the content of elements within your document should appear.
•CSS
rule made up of two parts:
–The
selector ,
which indicates which element or elements the declaration applies to (if it
applies to more than one element, you can have a comma - separated list of
several elements)
–The
declaration ,
which sets out how the elements referred to in the selector should be styled
–The
declaration has two parts, separated by a colon:
•A
property ,
which is the property of the selected element(s) that you want to affect, in
this case the width property.
•A
value ,
which is a specification for this property; in this case it is that the table
cells should be 36 pixels wide.
–
•HTML
was NEVER intended to contain tags for formatting a document, it was intended
to define
the content of
a document
•The
style definitions are normally saved in external .css
files.
•A CSS
declaration always ends with a semicolon, and declaration groups are surrounded
by curly braces:
CSS Selectors
•CSS
selectors are used to "find" (or select) HTML elements based on their
id, class, type, attribute, and more.
•Universal Selector
–The
universal selector is an asterisk; it is like a wildcard and matches all
element types in the document e.g.
*{ }
•The element/Type Selector
–Based
on the element name e.g.
p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
–All
<p> elements will be center-aligned, with a red text color
•The
id Selector
–Uses
the id attribute of an HTML element
–The following applied to the HTML element with id="para1”
#para1 {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
•The class Selector
–Selects
elements with a specific class attribute
–All
HTML elements with class="center" will be center-aligned
.center {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
p.center {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
•Grouping Selectors
–You
can group the selectors, to minimize the code.
–To
group selectors, separate each selector with a comma.
h1 {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
h1, h2,
p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
CSS Selectors
•The Child Selector
–The
child selector matches an element that is a direct child of another.
–The
names of the two elements are
separated by a greater - than symbol to indicate that b is a child of td ( > ) which is referred to as a combinator :
separated by a greater - than symbol to indicate that b is a child of td ( > ) which is referred to as a combinator :
td
> b {}
•The Descendant Selector
–The
descendant selector matches an element type that is a descendant of another
specified element (or nested inside another specified element), not just a
direct child.
–Example:
table
b {}
•The Adjacent Sibling Selector
–An
adjacent sibling selector matches an element type that is the next sibling of
another.
h1+p
{}
•The General Sibling Selector
–The
general sibling selector matches an element type that is a sibling of another,
although it does not have to be the directly preceding element
h1~p
{}
