Scribd
Upload
5 views

Week Three - CSS

Uploaded by

ad2227
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Week Three - CSS

Uploaded by

ad2227
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 81

IT202 – WEB APPLICATIONS

MAURA ANN DEEK

WEEK THREE

CASCADING STYLE SHEETS

(CSS)
CASCADING STYLE SHEETS - HISTORY
• Origin of CSS:
• the creation of CSS is largely credited to Norwegian web pioneer named Håkon
Wium Lie
• In 1994 Lie sought to create a universal standardized style sheet for the World
Wide Web.
• Initially tested on the Arena web browser.
• Lie went on to co-create CSS1, CSS2 and RFC 2318 versions with Tim Berners-Lee
and Robert Cailliau.
• Has become an established web standard greatly influencing the look and
accessibility of the world wide web.

• There are several versions of CSS:


• CSS (1996) allows the user to select font style and size and change
the color of the text and background.
• CSS2 (1998) has capabilities to allow the user to design page layout.
• CSS3 (1999) allows the user to create presentations from documents
and to select from a wider range of fonts.
CASCADING STYLE SHEETS
(CSS)
• CSS are the principal mechanism for web programmers to modify the visual
presentation of their web pages to make them aesthetically pleasing.
• CSS is a W3C standard for describing the appearance of HTML elements.
• Previously, we discussed that HTML should not describe the presentation of
documents. Rather in many cases the elements and attributes that can be
used for describing presentation details via HTML have been deprecated (the
process of taking older code and marking it as no longer being useful) in
favor of style sheets.
• CSS allow the programmer to assign font properties, colors, sizes, borders,
background images and even position elements on the page
• NOTE: Keep in mind when dealing with CSS that different browsers have not
always kept up with the W3C.
• Can be added directly to any HTML element via the <style> element, within
the <head> element or in a separate file that contains only CSS and has file
extension of .css. The <link> element will be used to create the link to
the .css file(s) and is placed in the <head> element. Using the <link>
CASCADING STYLE SHEETS
(CSS)
• Benefits of CSS?
• Improved control over formatting – the degree of formatting
control significantly better than that provided by HTML.
• Improved site maintainability - centralization of formatting
into one or a small handful of files.
• Improved accessibility - by keeping presentation out of HTML,
screen readers and other accessibility tools work better.
• Improved page download speed - a site built with centralized
CSS files for all presentation will be quicker to download since
the HTML file will contain less style information and markup
and thus be smaller.
• Improved output flexibility - CSS can be used to adopt a page
for different output media (known as responsive design).
CASCADING STYLE SHEETS - SYNTAX

• A CSS document consists of one or more style rules.


• A style rule will consist of:
• selector - which identifies the HTML element(s) that will be affected by a
series of property:value pairs also known as a declaration.
• The series of declarations is known as a declaration block and is contained
within braces.
• NOTE:
• the browser ignores white spaces (spaces, tabs and returns) between your
CSS rules.
• the property is followed by a colon and the value is followed by a
semicolon which ends the declaration.
• the last semicolon in the block is optional although a good practice is to
add it.
CASCADING STYLE SHEETS - SYNTAX

• Every CSS rule starts with a selector, identifying the element(s)


in the HTML document that will be affected by the declaration in
the rule. (meaning which element, it is applied to).
• Each individual CSS declaration must contain a property whose
name is predefined by the CSS standard.
• CSS3 defines over 100 different property names.
CASCADING STYLE SHEETS - SYNTAX
• A Deeper Dive: An example of styling declaration:
declaration

selector { property : value; property : value;}

declaration block

h1{ color : green; float : right; font-size : 36px }

selector propertyvalue

• CSS for a heading (h1 the selector) that is green, floats to the
right and is 36 pixels in size.
(color : green, float : right, font-size : 36 px the property : value)
CASCADING STYLE SHEETS - PROPERTIES
• A list of the most commonly used properties (* indicates the
properties has sub-properties that are not listed):
Property Type Property
Fonts font
font-family
font-size
font-style
font-weight
@font-face
Text lettering-spacing
line-height
text-align
text-decoration*
text-indent
CASCADING STYLE SHEETS - PROPERTIES
Property Type Property
Color and Background background
background-color
background-image
background-position
background-repeat
background-shadow
color
opacity
Borders border*
border-color
border-width
border-style
border-top, border-left, border-right,…*
border-image*
border-radius*
CASCADING STYLE SHEETS PROPERTIES
Property Type Property
Spacing padding
padding-bottom, padding-left, padding-
right,…
margin
margin-bottom, margin-left, margin-right,
…
Sizing height
max-height
max-width
min-height
min-height
width
Layout bottom, right, left, top
clear
display
CASCADING STYLE SHEETS - PROPERTIES

Property Type Property


Layout (continued) float
overflow
position
visibility
z-index
Lists list-style*
list-style-image
list-style-type
Effects animation*
filter
perspective
transform*
transition*
CASCADING STYLE SHEETS - PROPERTIES

• Each CSS declaration has a value for the property.


• Unit of any of given value is based upon the property.
• Some values are predefined list of keywords.
• Others are values such as length measurements, percentages,
numbers without units, color values, and URLs.
• Others are based on the value of something else, such as the size
of a parent element (relative units).
• Others on real world size (absolute units).
• NOTE: Unless defining a style sheet for printing its recommended to
avoid absolute units.
• The most common units are px (pixel), em (font size) and %
(percentage).
CASCADING STYLE SHEETS - TYPES

• Various types of style sheets:


• Inline - are placed within an HTML element via the style attribute.
• Embedded - are style rules placed within the <style> element
inside the <head> element of an HTML document (also known as
internal style sheets).
• External - are style rules placed within an external file whose
extension is .css.
CASCADING STYLE SHEETS - INLINE
• Inline
• Affects the element it is defined in.
• Overrides any other style definitions for properties used in the
inline style.
• Generally discouraged since they increase bandwidth and
decrease maintainability.
• Can be handy for quickly testing out a style change.
• For example:
<h1>Share Your Food Recipe</h1>
<h2 style="font-size: 24pt">Ingredients</h2>
<h2 style="font-size: 24pt; font-weight:bold;">
Preparation</h2>
CASCADING STYLE SHEETS - EMBEDDED
• Embedded
• Better than using inline styles.
• Still largely discouraged.
• Can be handy for quickly testing out a style change.
• For example:
<head>
<meta charset="utf-8">
<title>Share Your Food Recipe</title>
<style>
h1 {font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;}
</style>
</head>
<body>
CASCADING STYLE SHEETS - EXTERNAL
• External
• The best place to locate your style rules.
• Provides the best maintainability.
• If a change is made to an external style sheet, all HTML
documents that reference the style sheet will
automatically use the updated version.
• The browser is also able to cache the external style
sheet thus improving the performance of the site.
• Rules placed within an external file whose extension
is .css
• To reference an external style sheet:
• Use the <link> element (within the <head> element).
• each external style sheet will need its own <link>
CASCADING STYLE SHEETS - EXTERNAL

• For example:
<head>
<meta charset="utf-8">
<title>Share Your Food Recipes</title>
<link rel="stylesheet" href="styles.css" />
</head>
CASCADING STYLE SHEETS – TYPES OF CSS

• There are three different types of style sheet:


• Author-created – will be learning in this lesson.
• User - allows the user to tell the browser to display
pages using the individual’s own custom style (this
option can usually be found in a browser’s
accessibility options).
• Browser - defines default styles the browser uses for
each HTML element (some browsers such as Firefox,
Chrome and Safari allow viewing of this stylesheet).
CASCADING STYLE SHEETS – HIERARCHY
• As we progress through the lesson, keep in mind the
DOM we had discussed previously.
• Useful when thinking about the elements in your
HTML document in terms of their position within the
hierarchy.
CASCADING STYLE SHEETS – SELECTORS

• CSS rules are defined by selectors.


• Indicates to the browser which elements will be affected by
the property values.
• Allows you to choose/select individual or multiple elements.
• CSS has various selectors.
• The three most common are element, class and id.
CASCADING STYLE SHEETS –
ELEMENT/TYPE SELECTOR
• The element/type selector
• Selects all instances of a given element.
selec
tor

em{color: blue;} In this example we have two


property value
element/type selectors: em and
selector
p.

Therefore, any HTML <em>


element or <p> element in our
p{ document will be affected by
margin: 10px 0 5px 0; the defined CSS element/type
selectors.
font-family: sans-serif, Times New Roman, Arial;
font-weight: bold;
font-size:
propert value12pt;
y
CASCADING STYLE SHEETS – ELEMENT
SELECTOR

• The universal element selector (*) is used to select all HTML elements
for the indicated styling.
•universal
For example:
selector

*{
color: blue; /* the color all the elements is set to blue */
font-weight: bold /* the font-weight of all the elements is set to bold */
}
CASCADING STYLE SHEETS – ELEMENT
SELECTOR - GROUP SELECTOR
• Group selectors – allows for the grouping of elements with identical rules
into a single rule.
• Separate the different element names by commas.
• Reduces the size and complexity of you CSS files.
• For example:
Eleme
nts
p, div{
margin: 10;
padding: 20;
}/* both the p and div elements now have a margin of 10 and
padding of 20*/
• NOTE: elements p and div now share the same styling rules for margin and
padding.
CASCADING STYLE SHEETS – CLASS
SELECTOR

• Class selectors - simultaneously target different HTML


elements regardless of their position in the document
tree by using the same class attribute value.
• Can be used when a series of HTML elements have
been labeled with the same class attribute value.
• Target these elements for styling by using the class
selector.
• Takes the form of period (.) followed by the class
name.
CASCADING STYLE SHEETS – CLASS
SELECTOR
• An example:
CASCADING STYLE SHEETS – ID SELECTOR

• Id selectors allows the targeting of a specific element


by its id attribute regardless of its type or position.
• An HTML element must be labeled with an id attribute
in order for it to be targeted for styling using an id
selector.
• Takes the form of pound/hash (#) followed by the id
name.
CASCADING STYLE SHEETS – ID SELECTOR
An Example:
CASCADING STYLE SHEETS – ATTRIBUTE
SELECTOR

• Attribute selectors - provide a way to select HTML


elements either by the presence of an element
attribute or by the value of an attribute.
• Not currently supported by all browsers.
• Are helpful in styling hyperlinks and images.
CASCADING STYLE SHEETS – ATTRIBUTE
SELECTOR

Any element in the document that has the title


attribute will be affected.
CASCADING STYLE SHEETS – ATTRIBUTE SELECTOR

• The most common ways to construct an attribute selector is


shown below:
Selector
[] Matches a specific attribute.
[=] Matches a specific attribute with
a specific value.
[~=] Matches a specific attribute
whose value matches at least
one of the words in a space
delimited list of words.
[^=] Matches a specific attribute
whose value begins with a
specified value.
[*=] Matches a specific attribute
whose value contains a
substring.
[$=] Matches a specific attribute
whose value ends with a
CASCADING STYLE SHEETS – PSEUDO-
ELEMENT SELECTOR

• Pseudo-element selector - used to style specified parts of an


element.
• Are a means to select something that does not exist explicitly as
an element in the HTML document tree, but which is still a
recognizable, selectable object.
• For example,
• to style for the first line or first letter of any HTML element.
• to insert content before, or after, the content element.
CASCADING STYLE SHEETS –
PSEUDO-ELEMENT SELECTOR
List of the selectors and their
meaning:
Select Description
or
:first- Selects the first letter of an element.
letter Useful for adding drop caps to a
paragraph.
:first- Selects the first line of an element.
line
CASCADING STYLE SHEETS – PSEUDO-
CLASS SELECTORS

• Pseudo-class selector does apply to an HTML element, but


targets either a special state or, in CSS3, a variety of family
relationships.
• For example:
• to style an element on a mouseover.
• to style visited and unvisited links differently.
• to style an element when it gets focused.
CASCADING STYLE SHEETS – PSEUDO-
ELEMENT AND PSEUDO-CLASS SELECTORS

• Most common use for both is for targeting link states.


• NOTE: The order of pseudo-class elements is
important. The :link and :visited should appear before
others.
CASCADING STYLE SHEETS – PSEUDO-
ELEMENT AND PSEUDO-CLASS SELECTORS
An Example:
CASCADING STYLE SHEETS – PSEUDO-CLASS
SELECTORS

• List of the selectors and their meaning


Selector Description
:link Selects links that have not yet been visited. By default, blue underlined
text.
:visited Selects links that have been visited. By default, purple underlined text.
:focus Selects elements (such as text boxes and list boxes) that have the
input focus.
:hover Selects elements that the mouse pointer is currently above.
:active Selects an element that is being activated by the user. Typically, a link
being clicked. By default, red underlined text.
:checked Selects an element that is currently checked. Typically, a radio button
or check box.
:first-child Selects an element that is the first child of its parent. Provides a
different styling for first element in a list.
:last-child Selects an element that is the last child of its parent. Provides a
different styling for last element in a list.
:only-child Selects an element that is the only child of its parent.
CASCADING STYLE SHEETS –
CONTEXTUAL SELECTORS
• Contextual selectors (also known as combinators) - allows elements
to be selected based on their ancestors, descendants, or siblings.
• Meaning, elements are selected based on their context or
relationship in the document tree.
• Simply put the specified style is applied to an element only if the
element is in the specified context (i.e., parent/child relationship or
ancestor/descendant relationship) between different parts of the
documents.
• It is made up of two or more simple selectors (class, any type or ID
selector) separated by a white space.
• One that is most often used is the descendent selector, which
matches all the elements contained within another element.
CASCADING STYLE SHEETS –
CONTEXTUAL SELECTORS
• An
example:
CASCADING STYLE SHEETS –
CONTEXTUAL SELECTORS

Selector Matches Example


Descendan Matches a specified element that is div p – selects a <p> element
t contained somewhere within another that is contained somewhere
specified element. within a <div> element. That is
the <p> element, can be any
descendant, not just a child.
Child Matches a specified element that is a direct div h2 – selects an <h2>
child of the specified element. element that is a child element
of a <div> element.
Adjacent Matches a specified element that is the next h3+p – selects the first <p>
sibling sibling (i.e., comes directly after) of the element after any <h3>
specified element. element.
General Matches a specified element that shares the h3~p – selects all the <p>
sibling same parent as the specified element. elements that share the same
parent as the <h3> element.
CASCADING STYLE SHEETS – CONFLICT
HANDLING
• Author created style sheets allows for multiple rules to be defined for
the same HTML element.
• How are conflicts resolved when they occur?
• The “Cascade” in CSS refers to how these conflicts are handled.
• Visual metaphor for cascading - a mountain stream progressing
downward over rocks.
• Analogous to how a given style rule will continue to take
precedence with child elements.
• CSS uses the following cascade principles to help it deal with
conflicts:
• Inheritance
• Specificity
• Location

.
CASCADING STYLE SHEETS –CONFLICT HANDLING -
INHERITANCE
• Inheritance – some CSS properties by default inherit
values based upon the current element’s parent, but not
every CSS property is inherited by default by child
elements.
• Colors, fonts, lists, and text properties are inheritable.
• Layout, sizing, border, background, and spacing
properties are not.
• Inheritance greatly reduces the time and effort required
to create a webpage/website.
• Inheritance helps to make code less error prone and
less difficult to maintain.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - INHERITANCE
A visual example of inheritance via the <body> element:
CASCADING STYLE SHEETS – CONFLICT HANDLING -
INHERITANCE
• The :inherit property can be used to allow elements to
inherit non-inheritable properties. Using the previous
example, we can illustrate how to do so:
CASCADING STYLE SHEETS – CONFLICT
HANDLING - INHERITANCE
• The figure in the previous slide illustrates visually how the border property
of the <body> and <div> elements is inherited by the <p> element.
• The <body> element properties font-weight (bold), color (blue) and text-
align (center) are inherited by both the <div> and <p> elements.
• While the border and width properties are not inherited by either the <div>
or <p> elements since we know they are not inheritable properties.
• In the code above we define a border property for the <div> element of
limegreen and we can see a border of limegreen is created around each
<div> element defined in our HTML code.
• Note: I gave <div> elements a background color of lightgoldenrodyellow to
make them easily verifiable. The <p> element has a border property whose
value is inherit and therefore it will inherit the border of its parent. As you
can see certain <p> elements’ parent is the <body> element and thus the
border is black (i.e., Homemade Delights) and others are the <div> element
and their border is limegreen (i.e., By Leila 2022-05-07). Note: I gave <p>
elements a background color of plum to make them easily verifiable.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - SPECIFICITY

• Specificity – can be defined as a measurement of relevance based


upon the type and order of CSS selectors.
• When an HTML element is targeted by, multiple CSS selectors,
the “rules of specificity” will enable a browser to determine
which CSS declarations are the most relevant to the HTML
element and therefore should be applied.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - SPECIFICITY
• Specificity Hierarchy: the hierarchy below starts with selector types with
the highest priority and moves downward to the lowest specificity.
• ID selectors are the most specific. They select the element based on its
id attribute and have the syntax #idname.
• Class selectors, attribute selectors and pseudo-class selectors are next
and have equal specificity.
• Class selectors select all in a CSS class and have the
syntax .classname.
• Attribute selectors select all elements with a given attribute and have
the syntax [attribute].
• Pseudo-class selectors select elements only when in a special state
such as hover or visited and have the syntax selector :pseudo-class.
• Type selectors select all HTML elements with a given node name and the
syntax element name.
• Universal selector (*) has no effect at all on specificity.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - SPECIFICITY

• Specificity Rules: before using CSS a developer should familiarize


themselves with the various specificity rules. They are as follows:
1. The selector with higher specificity is applied. This is a
straightforward rule whenever a conflict occurs the browser applies
the rule of the selector with the higher specificity. For example, an
ID selector has priority over a class selector.
2. When selectors have equal specificity then the last rule applies.
For example, if an element has multiple selectors applied to it and
they all are of are equal specificity the browser applies the rule of
the selector that appeared last in the stylesheet.
3. Inline styles have the highest priority. We have learned that CSS
can be implemented in three ways inline, embedded, and external.
Inline styling has the highest priority and is automatically applied.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - SPECIFICITY
• An example:
CASCADING STYLE SHEETS – CONFLICT
HANDLING - SPECIFICITY

• Using the rules, we just discussed and looking at the code above
we can see that the <body> element has color and font-weight
defined thus making them inheritable to its child elements.
• The <div> and <p> elements have the same properties set and
thus will override the <body> element properties as their
selectors are more specific.
• Class selectors take precedence over element selectors, and id
selectors take precedence over class selectors.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - LOCATION
• Location – is used when inheritance and specificity cannot be used to
determine style precedence.
• This principle indicates that if CSS rules have the same specificity, then
the latest are given more weight.
• For example, an inline rule will override one defined in an external
author style sheet or an embedded/document style sheet.
• An embedded/document style sheet will override an equally specific rule
defined in an external author style sheet if it appears after the external
sheet’s <link> element.
• If there are two or more links to external author style sheets the last
link’s styles will override the previous ones.
• When the same style property is defined multiple times within a single
declaration block, the last one will take precedence.
CASCADING STYLE SHEETS – CONFLICT
HANDLING - LOCATION
• An example:
CASCADING STYLE SHEETS – THE BOX
MODEL
• In CSS all HTML elements exist with in an element box known as the Box
Model.
• To become proficient in CSS, you need to become familiar with the Box Model.
• An illustration of the Box Model:

By default, the box for a block element is as wide as the block that contains it
and as tall as it needs to be based upon its content. The height and width
properties allow you to explicitly specify the size of the content area. The
setting of borders, margins and paddings can also be used for the block
element.
CASCADING STYLE SHEETS – THE BOX MODEL
• Let’s exam how to calculate the overall height and width of a box. To do so I am going
to add a few more terms to Box Model figure..

• How to calculate the height of a box: top margin + top border + top padding + height + bottom padding +
bottom border + bottom margin

• How to calculate the width of a box: left margin + left border + left padding + width + right padding + right
border + right margin

• To set the height and width properties of a box element you can use a variety of units (pixels, points, ems
or percents). If you use pixels, then the sizes are fixed and therefore when you change the size of the
CASCADING STYLE SHEETS – THE BOX MODEL –
CONTENT AREA ELEMENT
• Let’s look at each element in this model.
• Content area – is where your text and images appear. Its properties are used
to determine the size of an element and spacing between elements on a
page. The two properties that will be used the most are the height and
width properties. By default, these properties are set to auto meaning it is
automatically adjusted to so that it is as wide as the element that contains it
and tall as the content
Property it contains. The following are the most common
Description
content are properties:
width width of the content area for the block element.
height height of the content area for the block element.
min-width minimum width of the content area for the block
element regardless of its content.
max-width maximum width of the content area for the block
element regardless of its content.
min-height minimum height of the content area for the block
element regardless of its content.
max-height maximum height of the content area for the block
element regardless of its content.
CASCADING STYLE SHEETS – THE BOX MODEL –
BACKGROUND ELEMENT

• Background – the background color or image of an element fills


an element out to its border (if it has one). Displayed behind the
content, padding and border for the box, but not behind the
margin. The following
Property are the most common background
Description
properties:
background combined shorthand property that allows you to set multiple
background values in one property. Can omit properties with the
shorthand property, but it should be noted any omitted property will
be set to its default value.

background- specifies whether the background image scrolls with the document
(default). Possible values are fixed or scrolled.
attachment
background-color sets the background color of an element.

background- specifies the background image (generally a jpeg, gif or png) for the
element. Consists of an absolute or relative URL.
image
background- specifies where on the element the background image will be placed.
Possible values are bottom, center, left and right. Can also
position supply a pixel or percentage numeric position value.

background- determines if the background image will be repeated. Common


technique for creating a tiled background and is the default behavior.
repeat
CASCADING STYLE SHEETS – THE BOX MODEL – BORDER
ELEMENT
• Borders provide a way to visually separate elements.

• Can have borders around one, two, three or four sides of an element.

• The following properties for borders are listed below:


Property Description
border combined shorthand property that allows you to set the style,
width, and color of a border in one property if all four sides of
the border are to be the same. The order is important and is
as follows: border-style, border-width, border color.

border-style specifies the line type of the border. Possible values are solid,
dotted, dashed, double, groove, ridge, inset and outset.
The default value is none. If a single value is assigned, it will
set the style for all 4 sides. If two values are assigned, the first
style is set to the top and bottom sides and the second will be
set to the left & right sides. If three values are assigned, the
first style is set to the top, the second is set to the left and
right, the third is set to the bottom. If four-style values are
assigned, the styles are set to the top, right, bottom, and left,
which follows the clockwise order.

border-width specifies the border width in a unit (cannot be a percentage). A


variety of keywords are also supported (thin, medium, etc.).

border-color specifies the color of the border in a color unit. The default
color is the color of the element.

border-radius specifies the radius of a round corner.


CASCADING STYLE SHEETS – THE BOX
MODEL – MARGINS AND PADDING
• Margins and Padding are essential properties for adding white
space to a web page, which allows for differentiate of one
element from another.
• Margins add spacing around an element’s content.
• Padding adds spacing within an element.
• Borders divide the margin area from the padding area.
• It is important to note that adjoining vertical margins collapse.
When the vertical margins of two elements touch only the largest
margin value of the elements will be displayed while the smaller
margins will be collapsed to zero.
• Horizontal margins will never collapse.
CASCADING STYLE SHEETS – THE BOX
MODEL – MARGINS PROPERTIES

Property Description
margin-top specifies the top margin.
margin-right specifies the top right margin.
margin- specifies the bottom margin.
bottom
margin-left specifies the left margin.
margin specifies the margin for a box. This is the shorthand property.
CASCADING STYLE SHEETS – THE BOX
MODEL – MARGINS AND PADDING
• If the overlapping margins did not collapse, then the margin
between #1 would be 150px (75px for the bottom margin of the
first <div> and 75px for the top margin of the second <div>) and
using the same logic the margin between #2 would be 80px. As
we can see that is not the case.
CASCADING STYLE SHEETS – THE BOX MODEL

• Border properties allow a developer to set the properties for one or more
sides of the element box in a single property or to set them individually
using separate properties.
• For example, setting four border sides to a different color:
CASCADING STYLE SHEETS – THE BOX
MODEL
CASCADING STYLE SHEETS – THE BOX
MODEL
CASCADING STYLE SHEETS – THE BOX MODEL

• When using the multiple value shortcut, it is


important to remember that the values are applied in
clockwise order starting at the top (top, right, bottom
and left). Using the mnemonic TRouBLe (TRBL) may
be helpful in remembering this order.
CASCADING STYLE SHEETS – THE BOX
MODEL – PADDING PROPERTIES
• Padding as stated earlier clears an area around the
content and it has the following properties:

Property Description
padding-top specifies the top padding.
padding-right specifies the right padding.
padding- specifies the bottom padding.
bottom
padding-left specifies the left padding.
padding specifies the padding for a box. This is the
shorthand property.
CASCADING STYLE SHEETS – BOX
DIMENSIONS

• Box dimensions (i.e., width and height) often cause beginner


developers issues and so I will go over this topic again in a bit
mor detail.
• By default, the width and height assigned to an element (in
the Box Model) is applied only to the element’s content box.
• Any border or padding defined by the element, is added to
the given width and height to arrive at the size of the box
that is rendered by the browser.
• Default calculation is:
• width + padding + border = actual width of an element
• height + padding + border = actual; height of an element
CASCADING STYLE SHEETS – BOX
DIMENSIONS
• A visual of this concept:
CASCADING STYLE SHEETS – BOX SIZING
• The box-sizing property resolves the issue.
• Allows the developer to include the padding and border in an
element’s total width and height.
CASCADING STYLE SHEETS – OVERFLOW
PROPERTY
• The overflow property indicates what should happen with the element’s
content if the box’s width and height are not large enough to display the
content due to being too large (overflows).

• Specifies whether to clip content or to add scroll bars to resolve the


issue.
CASCADING STYLE SHEETS – FONT
PROPERTIES
• CSS provides two properties that affect text.
• Font properties affect the text’s font and its appearance.
• Text properties affect text in a similar way regardless of the text
being used.
Property Description
font a combined shorthand property that allows you to set the family,
style, size, variant, and weight in one property. Do not have to
specify each property, but you must specify font-size and font-family.
Ordering of these properties is important (style, weight, variant,
size, font-family).
font- specifies the type face/font to use. Can specify more than one.
family
font-size specifies the size of the font in one of the measurement units.

font-style specifies how the font is slanted: italic, oblique or normal.

font- specifies small caps or none.


variant
font- specifies either normal, bold, bolder, lighter or a value between
100 and 900 in multiples of 100 where larger number
CASCADING STYLE SHEETS – FONT
PROPERTIES
• Problems can arise when specifying a font family as fonts found on a
developer’s computer may not be available on the user’s machine.
• Therefore, it is common to supply a web font stack (a series of
alternate fonts) to use in case the original font choice is unavailable.
• One common approach to create this web font stack is in the
following order: ideal, alternative, common and then generic.

Note: that font names with multiple words need to be enclosed in quotes (Ex: "Times New Roman") .
The final choice should be from a generic font family. The font-family property supports five different
generic families (serif, sans-serif, monospace, cursive and fantasy) and browsers support a typeface
from each family.

NOTE: Keep in mind that the sans-serif fonts are the easiest fonts to read in a browser.
CASCADING STYLE SHEETS – GENERIC
FONTS

Examples of Generic Fonts


CASCADING STYLE SHEETS – COMPARISON OF PX,
PT, EM AND PERCENTS

• Another potential problem with web fonts is font size.


• Absolute units such as points and inches do not translate well to
pixel-based devices.
• Need to know how to use relative units (em units and percentages)
as well.
CASCADING STYLE SHEETS – COMPARISON OF
PX, PT, EM AND PERCENTS
• Pixels have fixed sizes which can be a good and a bad thing.
• Allow developers to make the most accurate pixel perfect rendition of
web pages.
• Since fixed, they do not size up and down.
• Fonts will be rendered smaller on a screen with higher resolution
versus a screen with lower resolution.
• Represents a single dot on a monitor. The number of dots per inch
depends on the monitor’s resolution.
• Are an absolute unit of measurement.
• Points are a unit of measurement used in print.
• Based upon an inch on a ruler (one inch is equivalent to 72 points).
• Used in CSS this unit varies greatly between browsers and screens.
• The only time that using points is recommended is for setting up a
print CSS to overcome a browser issue.
• Are an absolute unit of measurement.
CASCADING STYLE SHEETS – FONT-SIZE
PROPERTY
• To set a font size for a font the font-size property will be used. I suggest
always trying to use relative measurements when possible so that the
user will be able to change the font sizes in their browsers. Relative
measurements mean that the measurement is relative to its parent
element.

•Let’s look at an example to illustrate this concept.

font-size: 12pt; /* in points and an absolute measurement */


font-size: 150%; /* as a percent of the parent element and a relative measurement*/
font-size: 1.5em; /* same as 150% and element a relative measurement */

• In the second example the font-size uses the relative measurement of


percent thus the font will be 150% larger than its parent element so if
the parent’s font size is 16 points this element will have a value of 24
points. Similarly, the third example specifies 1.5 ems making it 150% of
the parent font.
CASCADING STYLE SHEETS – FONT
PROPERTY
• CSS has a shorthand property called font that allows you to apply
up to six font properties. Its syntax is as follows:

•font: [style] [weight] [variant] size[/line-height] family;

• The font-size and font-family values are required. If one of the


other values is missing, their default value are used.

•Let’s look at an example:


CASCADING STYLE SHEETS – TEXT PROPERTIES
• Just as there are properties that affect the font in CSS, there are
also a range of properties that affect text independently of the
font. They are as follows:
Property Description
letter-spacing adjusts the spaces between letters. Can use the value
normal or a length unit.
line-height specifies the space between baselines. The default value
is normal or can be set to any length unit.
line-style- specifies the URL of an image as the marker for an
image unordered list.
line-style-type selects the marker type for an ordered or unordered list.
Often set to none.
text-align aligns the text horizontally in a container element in a
similar way as a word processor. Possible values are
right, left and center and justify Note: with the justify
option text spacing between the words is adjusted so that
the text is aligned on both the right and left sides of the
element which can make it difficult to read. Is inherited.
CASCADING STYLE SHEETS – TEXT
PROPERTIES
Property Description
text-decoration specifies whether the text will have lines below, through or over
it. Possible values are none, underline, overline, line-
through and blink.
text-direction specifies the direction of the text. Left- to right (ltr) or right-to
left (rtl).
text-indent indents the first line of a paragraph by a specific amount. Is
inherited.
text-shadow used to add a drop shadow to a text. Positive values offset the
shadow to right or down. Negative values offset shadow to left
or up. The blur radius determines how much the shadow should
be blurred and finally you need to specify shadow’s color.
text-transform changes the capitalization of a text. Possible values are none,
capitalize, uppercase and lowercase.
vertical-align aligns the text vertically in the container element. Most common
values are top, bottom and middle. There are other options:
baseline, text-bottom, text-top, sub and sup.
CASCADING STYLE SHEETS – COLOR PROPERTY
CSS has three ways to specify colors:

• The simplest way is to specify a color by its name such as red, blue or green.
• For example: color: magenta;

• A second way is to specify a color using a RGB (red, green, blue) value. This can be done in several
ways:
• By indicating the percentage of red, green and blue that make up the color
• For example: rgb(100%, 40%, 20%); which indicates the color will consist of 100% red, 40%
green and 20% blue.
• Or instead of using percentages you can use values from 0 – 255 where 0 would be
equivalent to 0% and 255 equivalent to 100%. For example: rgb(255, 102, 51);

• The final way is to use hexadecimal (hex) values to specify a color. Hexadecimal values allow you
to choose from over 16 million colors. In hex the value of “000000” is equivalent to black and the
value “FFFFFF” is equivalent to white. The simple conversions of percentages to hex are 0% is 00,
20% is 33, 40% is 66, 60% is 99, 80% is CC and 100% is FF. When using hex values, you need to
always place a leading hash tag (#) before the value.
• For example: color: #FF0000; is equivalent to red. Under the Week 0 Module in the Useful
Websites posting, you can find a site that gives you information about colors and also
conversions between the RGB and hexadecimal values.

Note: the color property determines the color of the foreground color (the text). As we learned
previously the background color is set by the background-color property.
CASCADING STYLE SHEETS – COLOR
PROPERTY

An Example:
CASCADING STYLE SHEETS – ADVANCED
COLOR TECHNIQUES
•CSS provides three more ways to code color specification.

• RGBA values which adds a fourth value that provides an opacity


value/transparency of an element. This property can take a value from 0 to 1
where 0 is fully transparent and anything behind it will show through and 1
allows nothing to show through.

• HSL (Hue, Saturation and Lightness) values which allow you to specify the
number of hue degrees for the color. The saturation and lightness allow for
the enhancement of the hues. The value can be a number from 1 through
359 that represents the hue. The saturation can be a number from 0% to
100% with 100% being the full hue. The lightness can be a number 0 % to
100% with 0% being black, 50% being normal and 100% being white.

• HSLA is equivalent to HSL, but it adds a fourth value for opacity that can
have a value from 0 to 1.
CASCADING STYLE SHEETS – ADVANCED
COLOR TECHNIQUES

You might also like