Web Technologies

CSS Properties
 Summary of Today’s Lecture
• CSS Box Model
– Height and Width
– Padding
– Borders
– Margins
• CSS Box Sizing
• CSS Text
• CSS Fonts
• CSS Colors
• CSS Backgrounds
• CSS Links
• CSS Lists
• CSS Tables
• CSS Display
• CSS Float
• CSS Position
• CSS Opacity
• CSS Icons
 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.
• Content - The content of the box, where text and images appear.
• Padding - Clears an area around the content. The padding is
transparent.
• Border - A border that goes around the padding and content.
• Margin - Clears an area outside the border. The margin is
transparent.
 CSS Box Model
Think of it like an egg:

The yolk is the content

The albumen is the padding

The shell is the border

The margin is how far the egg is

from anything else (another tiny
egg, perhaps)
 CSS Height and Width
• The height and width properties are used to set the height and
width of an element.
• The height and width properties do not include padding, borders,
or margins. It sets the height/width of the area inside the padding,
border, and margin of the element.
• The height and width properties may have the following values:
– auto - This is default. The browser calculates the height and width
– length - Defines the height/width in px, cm etc.
– % - Defines the height/width in percent of the containing block
– initial - Sets the height/width to its default value
– inherit - The height/width will be inherited from its parent value
• Inline elements expand and contract horizontally and vertically to
accommodate their content. The default height of an element is
determined by its content.
• Inline-level elements cannot have a fixed size; thus the width and
height properties are only relevant to non-inline elements.
CSS Height and Width Example
 CSS Padding
• The padding property can be used to specify space between element
content and element border.
• With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and
left).
• CSS has properties for specifying the padding for each side of an element:
– padding-top
– padding-right
– padding-bottom
– padding-left
– div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
• All the padding properties can have the following values:
– length - specifies a padding in px, pt, cm, etc.
– % - specifies a padding in % of the width of the containing element
– inherit - specifies that the padding should be inherited from the parent
element
 CSS Padding
• To shorten the code, it is possible to specify all the padding properties in one
property.
• The padding property is a shorthand property for the following individual
padding properties:
– padding-top
– padding-right
– padding-bottom
– padding-left
• If the padding property has four values:
– padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
 CSS Margins
• The margin property allows us to set the amount of space that surrounds
an element.
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and
left).
– margin-top
– margin-right
– margin-bottom
– margin-left
– p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
• All the margin properties can have the following values:
– auto - the browser calculates the margin
– length - specifies a margin in px, pt, cm, etc.
– % - specifies a margin in % of the width of the containing element
– inherit - specifies that the margin should be inherited from the parent element
 CSS Margins
• To shorten the code, it is possible to specify all the padding properties in one
property.
• The margin property is a shorthand property for the following individual padding
properties:
– margin-top
– margin-right
– margin-bottom
– margin-left
• If the margin property has four values:
– margin: 25px 400px 75px 100px;
• top margin is 25px
• right margin is 400px
• bottom margin is 75px
• left margin is 100px`
 CSS Padding/ Margins for Inline Elements
• Inline-level elements are affected a bit differently than block and
inline-block elements when it comes to margins and padding.
– Margins only work horizontally—left and right—on inline-level elements.
– Padding works on all four sides of inline-level elements; however, the
vertical padding—the top and bottom—may bleed into the lines above and
below an element.
 CSS Borders (Style)
• Borders fall between the padding and margin, providing an outline around
an element.
• The border property requires three values: width, style, and color.
• The border-style property specifies what kind of border to display. The
following values are allowed:
– dotted - Defines a dotted border
– dashed - Defines a dashed border
– solid - Defines a solid border
– double - Defines a double border
– groove - Defines a 3D grooved border. The effect depends on the border-color
value
– ridge - Defines a 3D ridged border. The effect depends on the border-color
value
– inset - Defines a 3D inset border. The effect depends on the border-color value
– outset - Defines a 3D outset border. The effect depends on the border-color
value
– none - Defines no border
– hidden - Defines a hidden border
• The border-style property can have from one to four values (for the
top border, right border, bottom border, and the left border).
 CSS Borders (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.
• The border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border):
 CSS Borders (Color)
• The border-color property is used to set the color of the four
borders.
• The color can be set by:
– name - specify a color name, like "red"
– HEX - specify a HEX value, like "#ff0000"
– RGB - specify a RGB value, like "rgb(255,0,0)"
 CSS Borders (Shorthand)
• To shorten the code, it is also possible to specify all the individual border
properties in one property.
• The border property is a shorthand property for the following individual
border properties:
– border-width
– border-style (required)
– border-color
 Size of a Box
• According to the box model, the total width of an element can be
calculated using the following formula:
– margin-right + border-right + padding-right + width +
padding-left + border-left + margin-left
• the total height of an element can be calculated using the following
formula:
– margin-top + border-top + padding-top + height +
padding-bottom + border-bottom + margin-bottom
• Using the formulas, we can find the total height and width of our example
code.
– Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px
+ 20px
– Height: 192px = 20px + 6px + 20px + 100px + 20px +
6px + 20px
 Box-Sizing
• CSS3 introduced the box-sizing property, which allows us to change
exactly how the box model works and how an element’s size is
calculated. The property accepts two primary values:
– content-box,
– border-box
• Each of these values has a slightly different impact on how the box
size is calculated.
 Content Box
• The content-box value is the default value, leaving the box model as
an additive design. If we don’t use the box-sizing property, this will
be the default value for all elements.
• The size of an element begins with the width and height properties,
and then any padding, border, or margin property values are added.
– div {
• -webkit-box-sizing: content-box;
• -moz-box-sizing: content-box;
• box-sizing: content-box; }
– Mozilla Firefox: -moz-
– Microsoft Internet Explorer: -ms-
– Webkit (Google Chrome and Apple Safari): -webkit-
 Border-Box
• The border-box value alters the box model so that any border or padding
property values are included within the width and height of an element.
• When using the border-box value, if an element has a width of 400 pixels,
a padding of 20 pixels around every side, and a border of 10 pixels around
every side, the actual width will remain 400 pixels.
• If we add a margin, those values will need to be added to calculate the full
box size. No matter which box-sizing property value is used, any margin
values will need to be added to calculate the full size of the element.
 CSS Fonts
• Font Family
– The font family of a text is set with the font-family property. In CSS,
there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial").
– The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it tries
the next font, and so on.
– Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available.
– More than one font family is specified in a comma-separated list.
• Syntax: p { font-family: "Times New Roman", Arial,
serif; }
• Font Style
– The font-style property is mostly used to specify italic text.
• Syntax: [Link] { font-style: italic; }
• Font Weight
– The font-weight property specifies the weight of a font:
• Syntax: [Link] { font-weight: bold;}
 CSS Fonts
• Font Size
– The font-size property sets the size of the text. The font-size value can
be an absolute, or relative size.
– Absolute size (e.g. px etc.):
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
• Absolute size is useful when the physical size of the output is known
– Relative size (e.g. em etc.):
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers
– Syntax: h1 { font-size: 40px; }
• Font Google
– If you do not want to use any of the standard fonts in HTML, you can
use the Google Fonts API to add hundreds of other fonts to your page.
– Just add a stylesheet link and refer to a font family of your choice:
• <head>
<link rel="stylesheet" href="[Link]
/css?family=Sofia">
• </head>
 CSS Fonts
• Font Shorthand
– To shorten the code, it is also possible to specify all the individual font
properties in one property.
– The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
• Syntax: p.a { font: 20px Arial, sans-serif; }
}
 CSS Text
• Text Color
– The color property is used to set the color of the text.
The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)“
– Syntax: p { color: green;}
• Text Alignment
• The text-align property is used to set the horizontal
alignment of a text.
• A text can be left or right aligned, centered, or justified.
– Syntax: p { text-align: center;}
• Text Decoration
• The text-decoration property is used to set or
remove decorations from text. The possible values of this
property are overline, underline etc.
– Syntax: h3 {text-decoration: underline; }
 CSS Text
• Text Transformation
• The text-transform property is used to specify
uppercase and lowercase letters in a text.
• It can be used to turn everything into uppercase or
lowercase letters or capitalize the first letter of each word.
– Syntax: [Link] {text-transform: lowercase;}
• Text Spacing
• Text Indentation
• Letter Spacing
• Line Height
• Word Spacing
• White Space.
• Text Shadow
• The text-shadow property adds shadow to text.
• In its simplest use, you only specify the horizontal shadow
(2px) and the vertical shadow (2px):
– Syntax: h1 {text-shadow: 2px 2px;}
 CSS Backgrounds
• The CSS background properties are used to define the
background effects for elements.
• background-color
• The background-color property specifies the background
color of an element.
– With CSS, a color is most often specified by:
• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
– Syntax: body { background-color: lightblue; }
• background-image
• The background-image property specifies an image to use
as the background of an element.
• By default, the image is repeated so it covers the entire
element.
• Syntax: body { background-image: url("[Link]"); }
 CSS Backgrounds
• 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:
• body { background-image: url("gradient_bg.png");
}
• Showing the background image only once is also specified by
the background-repeat property:
• body { background-image: url("img_tree.png");
background-repeat: no-repeat; }
• background-position
– The background-position property is used to specify the
position of the background image.
• body { background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top; }
 CSS Backgrounds
• 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):
• body { background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; }
• Background Shorthand
– To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
– When using the shorthand property the order of the property values
is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
– body { background: #ffffff url("img_tree.png") no-repeat right
top; }
 CSS Lists
• CSS provides the several properties for styling and formatting the
most commonly used unordered and ordered lists. These CSS list
properties typically allow you to:
• Changing the Marker Type of Lists
– The list-style-type property specifies the type of list item marker.
– The following example shows some of the available list item markers:
 CSS Lists
• Using Images as List Markers
– The list-style-image property specifies an image as the list item marker.
 CSS Lists
• Changing the Position of List Markers
– The list-style-position property specifies the position of the list-
item markers (bullet points).
• "list-style-position: outside;" means that the
bullet points will be outside the list item. The start of each line of a
list item will be aligned vertically. This is default:
• "list-style-position: inside;" means that the bullet
points will be inside the list item. As it is part of the list item, it will
be part of the text and push the text at the start:
 CSS Lists
• List - Shorthand property
– The list-style property is a shorthand property. It is used to set
all the list properties in one declaration:
– When using the shorthand property, the order of the property
values are:
• list-style-type (if a list-style-image is specified, the value of
this property will be displayed if the image for some reason
cannot be displayed)
• list-style-position (specifies whether the list-item markers
should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)
– If one of the property values above are missing, the default value
for the missing property will be inserted, if any.
» ul { list-style: square inside
url("[Link]"); }
 CSS Tables
• CSS provides several properties that allow you to control the layout
and presentation of the table elements.
• Adding Borders to Tables
– The CSS border property is the best way to define the borders for the
tables.
– The following example will set a black border for the <table>, <th>,
and <td> elements.
• table, th, td { border: 1px solid black; }
• By default, browser draws a border around the table, as well as
around all the cells, with some space in-between, which results in
double border. To get rid of this double border problem you can
simply collapse the adjoining table cell borders and create clean
single line borders.
 CSS Tables
• Collapsing Table Borders
– There are two distinct models for setting borders on table cells in CSS:
separate and collapse.
– In the separate border model, which is the default, each table cell has
its own distinct borders, whereas in the collapsed border model,
adjacent table cells share a common border. You can set the border
model for an HTML table by using the CSS border-collapse property.
– The following style rules will collapse the table cell borders and apply
one-pixel black border.
• table { border-collapse: collapse; }
• th, td { border: 1px solid black; }
• Table Width and Height
• Horizontal Alignment of Cell Contents
• Vertical Alignment of Cell Contents
• Table Padding
• Horizontal Dividers
• Hoverable Table
• Striped Tables
• Table Color
 CSS Links
• Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
• The four links states are:
– a:link - a normal, unvisited link
– a:visited - a link the user has visited
– a:hover - a link when the user mouses over it
– a:active - a link the moment it is clicked
• When setting the style for several link states, there are some order rules:
– a:hover MUST come after a:link and a:visited
– a:active MUST come after a:hover
 CSS Display
• The CSS specification defines the default display value for all the
elements, e.g. the <div> element is rendered as block, while the
<span> element is displayed inline.
• Display Block
– The block value of the display property forces an element to
behave like block-level element, like a <div> or <p> element.
The style rules in the following example displays the <span>
and <a> elements as block-level elements:
• span { display: block; } a { display: block; }
 CSS Display
• Display Inline
– The inline value of the display property causes an element
to behave as though it were an inline-level element, like a
<span> or an <a> element. The style rules in the
following example displays the <p> and <li> elements
as inline-level elements:
• p { display: inline; } li { display: inline; }
 CSS Display
• Display Inline-Block
– The inline-block value of the display property causes an element
to generate a block box that will be flowed with surrounding
content i.e. in the same line as adjacent content. The following
style rules displays the <div> element as inline-block:
• div { display: inline-block; }
 CSS Display
• Display None
– The value none simply causes an element to generate no boxes at all.
Child elements do not generate any boxes either, even if their display
property is set to something other than none.
– The document is rendered as though the element did not exist in the
document tree.
• h1 { display: none; } p { display: none; }
– The value none for the display property does not create an invisible
box — it creates no box at all.
 CSS Float
• One way to position elements on a page is with the float property.
• The float property is versatile and can be used in a number of
different ways.
• The float property allows us to take an element, remove it from the
normal flow of a page, and position it to the left or right of its
parent element.
• All other elements on the page will then flow around the floated
element.
• When the float property is used on multiple elements at the same
time, it provides the ability to create a layout by floating elements
directly next to or opposite each other, as seen in multiple-column
layouts.
• The two most popular values are left and right, which allow
elements to be floated to the left or right of their parent element.
– img { float: right; }
 CSS Float
• The float property specifies how an element should float.
• <html>
– <img src="[Link]" alt=“sparrow"
style="width:170px;height:170px;margin-left:15px;">
– <p>In this example… </p>
• </html>
• <style>
– img { float: right; }
• </style>
 CSS Position
• The position property identifies how an element is positioned on a page
and whether or not it will appear within the normal flow of a document.
• It is used in conjunction with the box offset properties—top, right,
bottom, and left—which identify exactly where an element will be
positioned by moving elements in a number of different directions.
• By default every element has a position value of static, which means that
it exists in the normal flow of a document and it doesn’t accept any box
offset properties.
• The static value is most commonly overwritten with a relative or absolute
value.
• There are five different position values:
– static
– relative
– fixed
– absolute
– Sticky
 position: static
• An element with position: static is not positioned in any special way.
• It is always positioned according to the normal flow of the page.
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left,
and right properties.
 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.
 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.
 position: absolute
• An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like
fixed).
• If an absolute positioned element has no positioned ancestors, it uses the
document body, and moves along with page scrolling.
 position: sticky
• An element with position: sticky; is positioned based on the user's scroll
position.
• A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset position is met in
the viewport - then it "sticks" in place (like position:fixed).
 Flexbox
• To start using the Flexbox model, you need to first define a flex container.
• <div class="flex-container">
• Next, define the flex items
– <div>1</div>
– <div>2</div>
– <div>3</div>
• </div>
• Css file
• .flex-container {
display: flex;
}
 Flexbox
• The flex container properties are:
1. flex-direction: column, column-reverse, row, row-reverse,
2. flex-wrap: this specifies whether the flex items should wrap or not.
i.e., wrap, nowrap, wrap-reverse,
3. flex-flow: sets both flex-direction and flex-wrap e.g., row wrap
4. justify-content: aligns the flex items at the center of the container
e.g., center, flex-start, flex-end, space-around, space-between,
5. align-content: aligns the flex items e.g. center, flex-start, flex-end,
stretch, baseline
 CSS Opacity
• The opacity property specifies the opacity/transparency of an
element. it is now a part of the CSS3 specifications, but it was
present for a long time. However, older browsers have different ways
of controlling the opacity or transparency.
– img { opacity: 0.7; }
– The above style rule will make the paragraph element 70% opaque (or
30% transparent).
– The opacity property takes a value a value from 0.0 to 1.0. A setting of
opacity: 1; would make the element completely opaque (i.e. 0%
transparent), whereas opacity: 0; would make the element completely
transparent (i.e. 100% transparent).
 CSS Icons
• The simplest way to add an icon to your HTML page, is with an icon library,
such as Font Awesome.
• Add the name of the specified icon class to any inline HTML element (like <i>
or <span>).
• All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)
• To use the Font Awesome icons, go to [Link], sign in, and get a
code to add in the <head> section of your HTML page:
– <script
src="[Link]
 Summary of Today’s Lecture
• CSS Box Model
– Height and Width
– Padding
– Borders
– Margins
• CSS Box Sizing
• CSS Text
• CSS Fonts
• CSS Colors
• CSS Backgrounds
• CSS Links
• CSS Lists
• CSS Tables
• CSS Display
• CSS Position
• CSS Opacity
• CSS Icons