Cascading Style Sheets
Mozamel Jawad
CSS Layout - float and clear
• The CSS float property specifies how an element should float.
• The CSS clear property specifies what elements can float beside the
cleared element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to
the text in a container.
The float property can have one of the following values:
•Left – The elements floats to the left of its container.
•right- The elements floats to the right of its container.
•None - The element does not float (will be displayed just where it occurs in the text). This is default
•inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
The clear Property
When we use the float property, and we want the next element below (not on right
or left), we will have to use the clear property.
The clear property specifies what should happen with the element that is next to a
floating element.
The clear property can have one of the following values:
• none - Allows floating elements on both sides. This is default
• left - No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both - No floating elements allowed on either the left or the right side
• inherit - The element inherits the clear value of its parent
CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
There are four different Combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
Descendant Selector
• The descendant selector matches all elements that are descendants
of a specified element.
• The following example selects all <p> elements inside <div>
elements:
Child Selector
• The child selector selects all elements that are the immediate children of a
specified element.
• The following example selects all <p> elements that are immediate children of a
<div> element:
Adjacent Sibling Selector
• The adjacent sibling selector is used to select an element that is
directly after another specific element.
• Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
• The following example selects all <p> elements
that are placed immediately after <div> elements:
General Sibling Selector
• The general sibling selector selects all elements that are siblings of a specified
element.
• The following example selects all <p> elements that are siblings of <div>
elements:
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
• Style an element when a user mousses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
Anchor Pseudo-classes
• a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}
Pseudo-classes and CSS Classes
• Pseudo-classes can be combined with CSS classes
Simple Tooltip Hover
Hover over a <div> element to show a <p>
element (like a tooltip):
Hover on <div>
The :first-child Pseudo-class
Match all <i> elements in all first child <p> elements
Match the first <i> element in all <p> elements
It gives style to even and odd Elements of a series.
CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element
The ::first-line Pseudo-element
Pseudo-elements and CSS Classes
The ::first-letter Pseudo-element
CSS Opacity / Transparency
• The opacity property specifies the opacity/transparency of an element.
Transparent Image
• The opacity property can take a value from 0.0 - 1.0. The lower value, the more
transparent:
Transparent Image
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
CSS Attribute Selectors
CSS [attribute] Selector
• The [attribute] selector is used to select elements with a specified
attribute.
CSS [attribute="value"] Selector
• The [attribute="value"] selector is used to select elements with a
specified attribute and value.
Form
The look of an HTML form can be greatly improved with CSS:
The !important Rule
The !important rule in CSS is used to add more importance to a
property/value than normal.
• In fact, if you use the !important rule,
it will override ALL previous styling rules
for that specific property on that element!
