CSS Introduction

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;
}

–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;
} 

•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;
}

p.center {
    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;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

h1, h2, p {
    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 :

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