INTRODUCTION TO
CSS
Presented by
Eng./Abanoub Nabil
Teaching assistant at ITI
abnabil@iti.gov.eg
Introduction…
• CSS is used to control the style of a web document in a simple
and easy way.
• CSS is the acronym for "Cascading Style Sheet".
• It is used with various HTML elements to stylize and
format them.
• CSS describes how HTML elements should be
displayed.
CSS Syntax
CSS Syntax Example.
CSS Syntax Example.
CSS Syntax Example.
CSS Syntax Example.
CSS Syntax Example.
CSS Selectors.
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
We can divide CSS selectors into five categories:
1- Simple selectors (select elements based on name, id, class).
2- Combination selectors (select elements based on a specific
relationship between them).
3- Pseudo-class selectors (select elements based on a certain
state)
4- Pseudo-elements selectors (select and style a part of an
element)
5- Attribute selectors (select elements based on an attribute or
attribute value)
CSS Selectors (element Selector)
CSS Selectors (element Selector)
CSS Selectors (class Selector)
CSS Selectors (class Selector)
CSS Selectors (id Selector)
CSS Selectors (id Selector)
CSS Selectors (Universal Selector)
CSS Selectors (Grouping Selector)
CSS Selectors
All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p>
elements
CSS Selectors (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:
1- descendant selector (space)
2- child selector (>)
3- adjacent sibling selector (+)
4- general sibling selector (~)
CSS Selectors (Combinators) cont.
• 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:
CSS Selectors (Combinators) cont.
• Descendant Selector
CSS Selectors (Combinators) cont.
• Descendant Selector
CSS Selectors (Combinators) cont.
• Child Selector (>)
• The child selector selects all elements that are the
children of a specified element.
• The following example selects all <p> elements that are
children of a <div> element:
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
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 the first <p> element that are
placed immediately after <div> elements:
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
General Sibling Selector (~)
• The combiner '~'allows you to select nodes which follow
an element and which have the same parent.
• The following example selects all <p> elements that are
siblings of <div> elements and follow it.
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
CSS Selectors (Combinators) cont.
All CSS Combinator Selectors
Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div>
element
element+element div + p Selects the first <p> element that are placed immediately
after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p>
element
CSS Selectors ( Pseudo-classes)
• Pseudo-classes are used to target elements based on
state information that is not stored in the document tree.
• For example, it can be used to:
1- Style an element when a user mouse over it
2- Style visited and unvisited links differently
3- Style an element when it gets focus
• Syntax
• The syntax of pseudo-classes:
CSS Selectors ( Pseudo-classes)cont.
• Anchor Pseudo-classes
•
CSS Selectors ( Pseudo-classes)cont.
• Pseudo-classes and CSS Classes
• Pseudo-classes can be combined with CSS classes:
• When you hover over the link in the example, it will change color:
CSS Selectors ( Pseudo-classes)cont.
• Simple Tooltip Hover
• Hover over a <div> element to show a <p> element (like a tooltip):
CSS Selectors ( Pseudo-classes)cont.
• CSS - The :first-child Pseudo-class
• The :first-child pseudo-class matches a specified element that is the
first child of another element.
• Match the first <p> element
• In the following example, the selector matches any <p> element that
is the first child of any element:
CSS Selectors ( Pseudo-classes)cont.
• Match the first <i> element in all <p> elements
• In the following example, the selector matches the first <i> element in
all <p> elements:
CSS Selectors ( Pseudo-classes)cont.
• Input (focus)
•
CSS Selectors ( Pseudo-classes)cont.
• All CSS Pseudo Classes
•
CSS Selectors ( Pseudo-classes)cont.
• All CSS Pseudo Classes
•
CSS Selectors ( Pseudo-classes)cont.
• All CSS Pseudo Classes
•
CSS Selectors ( Pseudo-elements).
• CSS Pseudo-elements
• What are 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
CSS Selectors ( Pseudo-elements).
The ::first-line Pseudo-element
• The ::first-line pseudo-element is used to add a special style to the
first line of a text.
• The following example formats the first line of the text in all <p>
elements:
CSS Selectors ( Pseudo-elements).
• Note: The ::first-line pseudo-element can only be applied to block-level
elements.
• The following properties apply to the ::first-line pseudo-element:
• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear
CSS Selectors ( Pseudo-elements).
• The ::first-letter Pseudo-element
• The ::first-letter pseudo-element is used to add a special style to the
first letter of a text.
• The following example formats the first letter of the text in all <p>
elements:
CSS Selectors ( Pseudo-elements).
CSS Selectors ( Pseudo-elements).
• CSS - The ::before Pseudo-element
• The ::before pseudo-element can be used to insert some content
before the content of an element.
• The following example inserts an image before the content of each
<h1> element:
CSS Selectors ( Pseudo-elements).
• CSS - The ::selection Pseudo-element
• The ::selection pseudo-element matches the portion of an element
that is selected by a user.
• The following CSS properties can be applied
to ::selection: color, background, cursor, and outline.
• The following example makes the selected text red on a yellow
background:
CSS Selectors ( Pseudo-elements).
CSS Selectors (Attribute Selectors).
• Style HTML Elements With Specific Attributes
• It is possible to style HTML elements that have specific attributes or
attribute values.
• CSS [attribute] Selector
• The [attribute] selector is used to select elements with a specified
attribute.
• The following example selects all <a> elements with a target attribute:
CSS Selectors (Attribute Selectors).
• :
CSS Selectors (Attribute Selectors).
• CSS [attribute="value"] Selector
• The [attribute="value"] selector is used to select elements with a
specified attribute and value.
• The following example selects all <a> elements with a target="_blank"
attribute:
CSS Selectors (Attribute Selectors).
• CSS [attribute~="value"] Selector
• The [attribute~="value"] selector is used to select elements with an
attribute value containing a specified word.
• The following example selects all elements with a title attribute that
contains a space-separated list of words, one of which is "flower":
CSS Selectors (Attribute Selectors).
• CSS [attribute~="value"] Selector
• The [attribute~="value"] selector is used to select elements with an
attribute value containing a specified word.
• The following example selects all elements with a title attribute that
contains a space-separated list of words, one of which is "flower":
CSS Selectors (Attribute Selectors).
• CSS [attribute|="value"] Selector
• The [attribute|="value"] selector is used to select elements with the
specified attribute starting with the specified value.
• The following example selects all elements with a class attribute value
that begins with "top":
• Note: The value has to be a whole word, either alone, like
class="top", or followed by a hyphen( - ), like class="top-text"!
CSS Selectors (Attribute Selectors).
• CSS [attribute|="value"] Selector
• The [attribute|="value"] selector is used to select elements with the
specified attribute starting with the specified value.
• The following example selects all elements with a class attribute value
that begins with "top":
• Note: The value has to be a whole word, either alone, like
class="top", or followed by a hyphen( - ), like class="top-text"!
CSS Selectors (Attribute Selectors).
CSS Selectors (Attribute Selectors).
• CSS [attribute^="value"] Selector
• The [attribute^="value"] selector is used to select elements whose
attribute value begins with a specified value.
• The following example selects all elements with a class attribute value
that begins with "top":
• Note: The value does not have to be a whole word!
CSS Selectors (Attribute Selectors).
• CSS [attribute^="value"] Selector
CSS Selectors (Attribute Selectors).
• CSS [attribute$="value"] Selector
• The [attribute$="value"] selector is used to select elements whose
attribute value ends with a specified value.
• The following example selects all elements with a class attribute value
that ends with "test":
• Note: The value does not have to be a whole word!
CSS Selectors (Attribute Selectors).
• CSS [attribute$="value"] Selector
• The [attribute$="value"] selector is used to select elements whose
attribute value ends with a specified value.
• The following example selects all elements with a class attribute value
that ends with "test":
• Note: The value does not have to be a whole word!
CSS Selectors (Attribute Selectors).
• CSS [attribute*="value"] Selector
• The [attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
• The following example selects all elements with a class attribute value
that contains "te":
• Note: The value does not have to be a whole word!
CSS Selectors (Attribute Selectors).
• CSS [attribute*="value"] Selector
• The [attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
• The following example selects all elements with a class attribute value
that contains "te":
• Note: The value does not have to be a whole word!
CSS Selectors (Attribute Selectors).
•
How To Add CSS
• There are three ways of inserting a style sheet:
1- External CSS
2- Internal CSS
3- Inline CSS
How To Add CSS(cont.)
• External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
How To Add CSS(cont.)
• Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
How To Add CSS(cont.)
• Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
CSS Comments
CSS Color
• Background Color
CSS Color (cont.)
• Text Color
CSS Color (cont.)
• Border Color
CSS Color (cont.)
• Border Color
CSS background-repeat
• By default, the background-image property repeats an image both
horizontally and vertically.
• Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
CSS background-position
• The background-position property is used to specify the position of
the background image.
CSS background-attachment
The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the
page):
CSS Background Shorthand
• When using the shorthand property the order of the property values
is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
CSS Borders
• CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by
using one of the three pre-defined values: thin, medium, or thick:
CSS Borders
• CSS Border Color
• The border-color property is used to set the color of the four borders.
CSS Borders
• CSS Border - Individual Sides
• From the examples on the previous pages, you have seen that it is
possible to specify a different border for each side.
• In CSS, there are also properties for specifying each of the borders
(top, right, bottom, and left):
CSS Margins
CSS Margins
CSS Margins
CSS Margins
CSS Margins
CSS Padding
CSS Padding
CSS Padding
CSS Padding
CSS Padding
CSS Padding
CSS Padding
CSS Padding
CSS Box Model
• The CSS Box Model
• All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content. The image below illustrates the box model:
CSS Box Model
CSS Box Model
CSS Box Model
CSS Layout - The display Property
The display property is the most important CSS property for controlling
layout.
• The display Property
• The display property specifies if/how an element is displayed.
• Every HTML element has a default display value depending on what
type of element it is. The default display value for most elements
is block or inline.
CSS Layout - The display Property
CSS Layout - The display Property
CSS Layout - The display Property
• Override The Default Display Value
• As mentioned, every element has a default display value. However,
you can override this.
• Changing an inline element to a block element, or vice versa, can be
useful for making the page look a specific way, and still follow the web
standards.
• A common example is making inline <li> elements for horizontal
menus:
CSS Layout - The display Property
CSS Layout - The position Property
• The position property specifies the type of positioning method used
for an element (static, relative, fixed, absolute or sticky).
There are five different position values:
1- static
2- relative
3- fixed
4- absolute
5- sticky
CSS Layout - The position Property
• The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
There are five different position values:
1- static
2- relative
3- fixed
4- absolute
5- sticky
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first. They
also work differently depending on the position value.
CSS Layout - The position Property
• position: static;
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left,
and right properties.
• An element with position: static; is not positioned in any special way; it
is always positioned according to the normal flow of the page:
CSS Layout - The position Property
CSS Layout - The position Property
• position: fixed;
• An element with position: fixed; is positioned relative to the viewport,
which means it always stays in the same place even if the page is
scrolled. The top, right, bottom, and left properties are used to
position the element.
• A fixed element does not leave a gap in the page where it would
normally have been located.
• Notice the fixed element in the lower-right corner of the page. Here is
the CSS that is used:
CSS Layout - The position Property
• position: relative;
• An element with position: relative; is positioned relative to its normal
position.
• Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.
CSS Layout - The position Property
• position: relative;
• An element with position: relative; is positioned relative to its normal
position.
• Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.
CSS Layout - The position Property
CSS Layout - The position Property
CSS Layout - The position Property
• position: absolute;
• An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
• However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
• Note: A "positioned" element is one whose position is anything
except static.
• Here is a simple example:
CSS Layout - The position Property
CSS Layout - The position Property
• Overlapping Elements
• When elements are positioned, they can overlap other elements.
• The z-index property specifies the stack order of an element (which
element should be placed in front of, or behind, the others).
• An element can have a positive or negative stack order:
CSS Layout - Overflow
• The CSS overflow property controls what happens to
content that is too big to fit into an area.
CSS Layout - Overflow
• overflow: visible
CSS Layout - Overflow
• overflow: scroll
CSS Opacity / Transparency
•
CSS Specificity
•
CSS Specificity
•
CSS Specificity
•
CSS Specificity
•
CSS Specificity
•
Self study
1- CSS Outline
https://www.w3schools.com/Css/css_outline.asp
2- CSS Text
https://www.w3schools.com/Css/css_text.asp
3-CSS Align
https://www.w3schools.com/Css/css_align.asp
