Web engineering

Web Development
CSS Lecture 1
Cascading Style Sheets

CSS
1
2
3
Style Definition
Text Formatting
CSS Basics

CSS Basics
Styles are an electronic publishing invention for dynamically
coding text and other document elements with formatting.
Review example 1 to see how styles can make it easy to make it
consistent
1

CSS Basics1
Defining Styles:
Styles can be defined in several different ways and can be attached to a document
1. Add Style block to the head of a document
<head>
<style type="text/css">
...Style definitions...
</style>
</head>
2. Alternatively style can be contained in a separate document and linked to documents
Using the <link> tag
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>
3. Individual HTML elements can contain styles themselves, and take precedence over
previous two
<ul style="list-style-image: url("images/small-bullet.png");" >

CSS Basics contd.1
Cascading Styles:
Cascading in CSS means, styles can stack, or override each other.
For example, all the documents need to follow the corporate
look and feel in an organization, but HR department use people-
shaped bullets or apply other small changes unique to that
department. See example 2

Style Definitions2
The Style Definition Format:
CSS style definitions all follow the same basic
format. A definition starts with a selector expression
used to match elements within the document(s),
and is followed by one or more style properties and
value sets. Roughly this format approximates the
following structure
selector {
property: value(s);
property: value(s);
...
}

Style Definitions2
Understanding Selectors:
Selectors are patterns that enable a user agent to identify what
elements should get what styles.
For example, following style says, in effect, “if it is a paragraph (p),
then give it this style”
p { text-indent: 2em;}

Style Definitions contd2
Matching elements by type:
The easiest selector to understand is the plain element selector
h1 { color: red;}
h1, h2, h3, 4h, h5, h6 { color: red;}
Single
Multi
Matching using the Universal selector:
Can be used to match any element in the document
* { color: red;}
Matching child, descendant:
tr td ol { color: red;}
tr * ol { color: red;}

Matching elements by class:
To specify a class to match with a selector, you append a period
and the class name to the selector.
p.dark_bg { color: white;}
*.dark_bg { color: white;}
You can omit the universal selector, specifying only the class
itself (beginning with a period)
.dark_bg { color: white;}

Matching elements by identifier:
You can also use selectors to match element identifiers – the id
of the element(s)
#txtName { background-color: green;}
Matching elements by specific attributes:
You can use a selector to match any attribute in elements,
not just Class and id.
table[border="3"]
table[border]
Table element with a border attribute set to 3
No matter what the value of the attribute

Matching child, descendant, and adjacent sibling elements:
The most powerful selector methods match elements by their
relationship to other elements within a document
Understanding document hierarchy:
See Example3 and draw hierarchy diagram out of it

Ancestors and Descendants:
Are elements that are linked by lineage, no matter the distance
between them.
Parents and Children:
Are elements that are directly connected in lineage.
Siblings:
Are children that share the same, direct parent.
Prepared by: Asgher Ali

Selecting by hierarchy:
Several selector mechanisms are available that enable you to match
elements by their hierarchy.
div.div2 li Descendant: list all separated by spaces
div.div1 > table Child
table + p Sibling

Using Pseudo-Classes:
Pseudo classes are identifiers that are understood by user agents,
and they apply to elements of certain types without the elements
having to be explicitly styled.
Anchor Styles:
: link Unvisited links
: visited Visited links
: active Active links
: hover The link over which the browser point is hovering
: focus The link that currently has the user interface focus
:link { color: blue;}
:visited { color: red;}
:hover {color: green;}

Pseudo-Elements:
Are another virtual constructs to help apply styles dynamically to
elements with a document.
First Line:
The :first-line pseudo-element specifies a different set of property
values for the first line of elements.
p:first-line { text-decoration: underline;}

Pseudo-Elements:
First Letter:
The :first-letter pseudo-element is used to affect the properties of an elements’s first
Letter.
p.dropcap:first-letter { font-size: 3em;
font-weight: bold; float: left;
border: solid 1px black; padding: .1em;
margin: .2em .2em 0 0;}
Before and After:
You can use the :before and :after pseudo-elements to add additional text to specific
Elements.
.quote:before { content: `"';}
.quote:after { content: `"';}

Text Formatting3
Aligning Text:
Controlling horizontal Alignment:
You can use the text-align property to align blocks of text in four
basic ways: left, right, center, or full. See Example 4
Controlling vertical Alignment:
In addition to aligning text horizontally, CSS also enables you to
align text vertically via the vertical-align property. See Example 5
Indenting Text:
<p style="text-indent: 25px;">
Text-indent property indents only the first line

Text Formatting contd.3
Controlling Letter and Word spacing:
The letter-spacing and word-spacing properties can be used to control the letter and word
Spacing in an element, respectively. Both properties take an explicit or relative value to
Adjust the spacing – positive values add more space, negative values remove space.
See Example 6
Specifying Capitalization:
You can also use styles to control the capitalization or case of text.
See Example 7
Using Text Decorations:
You can add several different effects to text through CSS.
See Example 8

Controlling Table Attributes:
Table Borders:
table, table * { border: 1pt solid black;}
All tables and all tables descendants meanin
Each cell, as well as entire table has a border
table * { border: 1pt solid black;} Only table cells have border
table { border: 1pt solid black;} Only table body has borders
Table Border spacing:
To increase the space around table borders, use the border-spacing (much like cellspacing)
and padding CSS Properties.
border-spacing: horizontal_spacing vertical_spacing;

Collapsing borders:
Creates gridlines instead of distinct individual borders
Border-collapse: separate (default) or collapse
Border on empty cells:
You can use the empty-cells (show or hide) CSS property to control whether the agent
Should or should not show empty cells.
Aligning and Positioning Captions:
CSS can help control the positioning of table caption elements.
caption-side: top | bottom | left | right;

Web engineering

More Related Content

What's hot

Similar to Web engineering

Recently uploaded

Web engineering