Web Technologies

CSS
 Summary of Today’s Lecture
• CSS Introduction
• CSS Rules
• CSS Selectors
– Simple Selectors
– Pseudo-class Selectors
– Attribute Selectors
– Combinator Selectors
• Inserting Style Sheet
 CSS
• CSS stands for cascading style sheets.
• Cascading: refers to the procedure that determines which style will
apply to a certain section, if you have more than one style rules.
• Style: how you want certain part of your page to look like. You can
set things like color, margins, fonts etc, for things like tables,
paragraphs, headings etc.
• Sheets: are like templates, or a set of rules, for determining how
the webpage will look.
• CSS is a stylesheet language used to describe the presentation of a
document written in HTML.
 CSS History
• CSS was first proposed by Håkon Wium Lie on October 10, 1994. At
the time, Lie was working with Tim Berners-Lee at CERN.
• CSS1 was the first edition introduced in December 1996 an official
W3C Recommendation. Håkon Wium Lie and Bert Bos are credited
as the original developers.
• CSS2 was published by W3C in 1998 and provides enhancement
over CSS1.
• CSS3 is the latest edition. The earliest CSS 3 drafts were published
in June 1999 by W3C.
– Several new functionalities have been provided through CSS3. Functions like
flex box, rounded corners, background decoration, box shadows are
introduced in this version.
• There is no single, integrated CSS4 specification, because the
specification has been split into many separate modules which level
independently.
– So far, five such "best current practices" documents have been published as
Notes, in 2007, 2010, 2015, 2017, and 2018.
CSS Rules
 Selector

• Selector
– A selector designates exactly which element or elements within
our HTML to target and apply styles to.
• p { ... }
 Property and Value
• Property
– A property determines the styles that will be applied to the
element.
– Property names fall after a selector, within the curly brackets, {},
and immediately preceding a colon, :.
– There are numerous properties we can use, such as
background, color, font-size, height, and width,
• p { color: ...; font-size: ...; }
• Value
– Behavior of the property is determined with a value. Values can
be identified as the text between the colon, :, and semicolon, ;.
• p { color: orange; font-size: 16px; }
 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:
• Simple selectors (select elements based on name, id, class)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)
• Combinator selectors (select elements based on a specific relationship
between them)
 The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• The CSS rule below will affect every HTML element on the page:
 CSS element Selector

• The element selector selects • HTML

HTML elements based on the – <div>...</div>
element name. – <p>...</p>
• For example, if we want to target – <div>...</div>
all division elements of
type <div>, we will use element – <p>...</p>
selector of div. • CSS
– div { ... }
 CSS class Selector
• Class selectors allow us to • In the example below, the class selector will
select an element based on select any element containing the class
the element’s class attribute value of awesome, including both
attribute value. div and p elements.
• Class selectors are a little • HTML
more specific than type – <div
selectors, as they select a class="awesome">...</div>
group of elements rather
than all elements of one – <p>...</p>
type. – <div>...</div>
• Within CSS, classes are – <p class="awesome">...</p>
denoted by a leading • CSS
period, ., followed by – .awesome { ... }
the class attribute value.
 CSS id Selector
• ID selectors are even more • In the example below, ID selector will
precise than class selectors, only select the element containing
as they target only one unique the id attribute value of shayhowe and
element at a time. para.
• ID selectors use an • HTML
element’s id attribute value – <div
as a selector. id="shayhowe">...</div>
• ID attribute values can only be – <p>...</p>
used once per page. – <div>...</div>
• Within CSS, ID selectors are – <p id=“para">...</p>
denoted by a leading hash
sign, #, followed by the id • CSS
attribute value. – #shayhowe { ... }
– #para{ ... }
 Inserting a Stylesheet
• When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
• There are three ways of inserting a style sheet:
– Inline style
– Internal style sheet
– External style sheet
 Inline Styles- the style Attribute
• 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.
• An Inline style sheet loses many of the advantages of a style sheet.
This is done by mixing content with presentation.
• Used for one-time overrides and styling a particular element.
• This is bad style and should be avoided when possible.
 Internal Style Sheets
• An internal style sheet may be used if one single HTML page has a
unique style.
• Internal styles are placed in the <head> section of an HTML page.
• Internal styles are inserted inside the <style> tag.
 External Style sheet
• An external style sheet is ideal when the style is applied to many pages.
• With an external style sheet, you can change the look of an entire Web site
by changing just one file.
• Each page must include a link to the style sheet with the <link> tag.
• An external style sheet can be written in any text editor and must
be saved with a .css extension.
• A page can link to multiple style sheet files.
• In case of a conflict (two sheets define a style for the same HTML
element), the later sheet's properties will be used.
 Why CSS is called Cascading?
• Multiple style sheets can be referenced inside the HTML document.
• Which styles will be applicable when there is more than one style
specified?
• All styles cascade into a new virtual style sheet in this order (with
lowest to highest priority in the sequence as described below):
– Browser's default styles
– External style sheet files (in a <link> tag)
– Internal style sheets (inside a <style> tag in the page's
header)
– Inline style (the style attribute of the HTML element)
 Why CSS is called Cascading?
• p {
• In a single stylesheet, all styles
– background: orange;
cascade from the top of a style
– font-size: 24px; }
sheet to the bottom, allowing
• p {
different styles to be added or
– background: green;}
overwritten as the style sheet
progresses. • Because the paragraph selector
that sets the background color to
• For example, we select all green comes after the paragraph
paragraph elements at the top of selector that sets the background
our style sheet and set their color to orange, it will take
precedence in the cascade.
background color to orange and
• All of the paragraphs will appear
their font size to 24 pixels. with a green background.
• Then towards the bottom of our • The font size will remain 24 pixels
style sheet, we select all because the second paragraph
paragraph elements again and set selector didn’t identify a new
font size.
their background color
to green.
 Selector Specificity (Example)
• The higher the specificity weight of a selector, the more superiority
the selector is given when a styling conflict occurs.
• For example, if a paragraph element is selected using a type
selector in one place and an ID selector in another, the ID selector
will take precedence over the type selector regardless of where
the ID selector appears in the cascade.
• HTML
– <p id="food">...</p>
• CSS
– #food { background: green; }
– p { background: orange; }
 Pseudo-class Selectors
• Pseudo-classes are similar to regular classes in HTML however they
are not directly stated within the HTML markup.
• They are a dynamically populated as a result of user's actions or the
document structure.
• They are used to define a special state of an element. For example,
it can be used to:
• Style an element when a user moves mouse over it.
• Style visited and unvisited links differently.
• Style an element when it gets focus.
• Syntax:
– selector:pseudo-class { property: value; }
• Types:
– Link Pseudo-classes
– User Action Pseudo-classes
– User Interface State Pseudo-classes
 Link Pseudo-classes

• The :link and :visited pseudo- • Syntax:

classes define if a link has or hasn’t – a:link {...}
been visited. – a:visited {...}
• To style an anchor which has not
been visited the :link pseudo-
class is used. • Example:
• The :visited pseudo-class styles – /* unvisited link */
links that a user has already visited a:link {
based on their browsing history. color: #FF0000;
}

– /* visited link */
a:visited {
color: #00FF00;
}
 User Action Pseudo-classes
• The :hover pseudo-class is
applied to an element when a • Syntax
user moves their cursor over – a:hover {...}
the element, most commonly – a:active {...}
used with anchor elements. – a:focus {...}
• The :active pseudo-class is
• Example
applied to an element when a
user engages an element, such – /* mouse over link */
as clicking on an element. a:hover {
• Lastly, the :focus pseudo- color: #FF00FF;
}
class is applied to an element
when a user has made an
– /* selected link */
element the focus point of the a:active {
page, often by using the color: #0000FF;
keyboard to tab from one }
element to another.
 User Interface State Pseudo-classes

• These user interface element • Syntax:

state pseudo-classes include – input:enabled {...}
– :enabled, – input:disabled {...}
– :disabled,
– :checked. • Example:
• The :enabled pseudo-class
selects an input that is in the
default state of enabled and – input[type="text"]:enabled
{ background-color:red; }
available for use.
• :disabled pseudo-class – input[type="text"]:disable
selects an input that has the d { background-color:blue;
disabled attribute tied to it. }
• :checked represents the
selected states of radio and – input:checked { border:1px
checkbox elements. solid pink;}
–
 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:
Miscellaneous Pseudo-classes
 Attribute Selectors
• It is possible to style HTML elements that have specific attributes or
attribute values.
• In CSS3, now elements can be selected based on whether an
attribute is present and what its value may contain.
• Following are the list of attribute selectors available in CSS.
– Attribute Present Selector
– Attribute Equals Selector
– Attribute Contains Selector
– Attribute Begins With Selector
– Attribute Ends With Selector
 Attribute Present Selector
• The first attribute selector identifies an element based on whether it
includes an attribute or not, regardless of any actual value.
• To select an element based on if an attribute is present or not simply
include the attribute name in square brackets, [], within a selector.
• The [attribute] selector is used to select elements with a specified
attribute.
• The following example selects all <a> elements with a target attribute:
 Attribute Equals Selector
• To identify an element with a specific, and exact matching, attribute
value the same selector from before may be used, however this
time inside of the square brackets following the attribute name,
include the desired matching value.
• 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:
 Attribute Contains Selector
• When looking to find an element based on part of an attribute
value, but not an exact match, the asterisk character, *, may be
used within the square brackets of a selector.
• The asterisk should fall just after the attribute name, directly before
the equals sign.
• 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":
 Attribute Begins With Selector
• It is also possible to select an element based on what an attribute
value begins with. Using a circumflex accent, ^, within the square
brackets of a selector between the attribute name and equals sign
denotes that the attribute value should begin with the stated value.
• 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":
 Attribute Ends With Selector
• There is also an ends with attribute selector. Instead of using the
circumflex accent, the ends with attribute selector uses the dollar
sign, $, within the square brackets of a selector between the
attribute name and equals sign. Using the dollar sign denotes that
the attribute value needs to end with the stated value.
• 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":
Attribute Selectors Overview
 Combining Selectors
• A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.
• A combinator is something that explains the relationship between
the selectors.
• By combining selectors we can be more specific about which
element or group of elements we’d like to select.
– Child Selectors
– Sibling Selectors
 Child Selectors
• Child selectors provide a way to select elements that fall within one
another, thus making them children of their parent element.
• These selections can be made two different ways,
– Descendant selector
– Direct child selectors.
 Descendant Selector
• The descendant selector matches all elements that are descendants
of a specified element.
• Descendant selectors are created by spacing apart elements within
a selector, creating a new level of hierarchy for each element list.
• The following example selects all <p> elements inside <div>
elements:
 Direct Child Selector
• The child selector selects all elements that are the children of a
specified element.
• The direct child selector may be used by placing a greater than
sign, >, between the parent element and child element within the
selector.
• The following example selects all <p> elements that are children of
a <div> element:
Child Selector Overview
 Sibling Selectors
• Sibling elements are those elements that share a common parent,
may also need to be selected.
• These sibling selections can be made by two ways
– General sibling
– Adjacent sibling selectors.
 General Sibling Selector
• The general sibling selector selects all elements that are siblings of
a specified element.
• They are created by using the tilde character, ~, between two
elements within a selector. The first element identifies what the
second element shall be a sibling with, and both of which must
share the same parent.
• The following example selects all <p> elements that are siblings of
<div> elements:
 Adjacent Sibling Selector
• The adjacent sibling selector selects all elements that are the
adjacent siblings of a specified element.
• Sibling elements must have the same parent element, and
"adjacent" means "immediately following".
• Adjacent sibling selector uses a plus character, +, between the two
elements within a selector.
• The following example selects all <p> elements that are placed
immediately after <div> elements:
Sibling Selectors Overview
 Summary of Today’s Lecture
• CSS Introduction
• CSS Rules
• CSS Selectors
– Simple Selectors
– Pseudo-class Selectors
– Pseudo-element Selectors
– Attribute Selectors
– Combinator Selectors
• Inserting Style Sheet
 Resources
• The complete list of these selectors along with their description can
be found at the following links:
– [Link]
– [Link]
– [Link]
– [Link]