CSS Basics (Cascading Style Sheet)

Ajay Khatri
Senior Assistant Professor
Acropolis Institute of Technology & Research
www.ajaykhatri.in

Topics Covered
 Basic introduction to CSS syntax– Lecture 1
 Font and Text properties – Lecture 2
 Margins, borders, and padding – Lecture 3
 Lists, links, and tables – Lecture 4
 Floats, layouts, and positioning elements – Lecture 5
 Working with color – Lecture 6
 Responsive and mobile design – depending on interest
 CSS3 Effects – depending on interest

Introduction
 This is Lecture-1 of a basic introduction to CSS syntax
 This presentation is designed to be a starting point for learning CSS
 All you need to get started is a text editor and a browser

Objectives
With practice, you will be able to:
 Create inline, internal, and external styles
 Recognize and use cascading rules and rules of inheritance
 Use tag, ID, and class selectors to target specific HTML page elements
 Refine target HTML elements with descender and combination selectors
 Add comments to styles
 Use color names to set text formatting
 Add background color and images
 Manage repeat, scroll and position properties
 Use shorthand notation to set background properties

Default Styles
<!DOCTYPE html>
<html>
<head>
 Without CSS, this page renders with the
browser default styles<title> Default Styles </title>
 Text is black on white and uses the</head>
default font<body>
 <h1> is large and bold<h1> Default Styles </h1>
 Headings and paragraphs are separated<p> Without CSS, the default
browser styles are used. </p> with extra whitespace
</body>
</html>

CSS Styles
<!DOCTYPE html>
<html>
<head>
 CSS changes the browser default style
where specific styles are applied<title> CSS Styles </title>
</head>  All other HTML styles are unchanged and
continue to inherit browser styles<body style=“background:blue;” >
<h1> Inline Styles </h1>  Only the background changes from the
default styles – from white to blue
<p> CSS is used to change
browser default styles. </p>  <h1> and <p> tags will not change
</body>
</html>

Styles
 CSS styles can be written as inline, internal, or external styles
 Inline styles are written as quoted attributes within a specific tag element
 Inline styles are specific to the tag
 Internal styles use <style> </style> tags in the <head> section of a page
 Internal styles are specific to the page in which they are declared
 External styles are declared in an external .css stylesheet and uses a <link> tag in the
<head> section to reference the .css file
 External styles can be applied site-wide and are recommended as best practice

Inline Styles
<body
style = “background : blue;”
>
 Inline styles are added as a quoted
attribute within the opening tag of the
selected element<h1> Inline Style </h1>
 Inline styles are difficult to maintain and<p> Inline styles are declared
generally not recommendedas an attribute of any tag. </p>
 They are specific to the tag/page
</body>

Internal Styles
<head>
<style>
body {
 Internal styles are declared using the
<style> tag
 <style> tags are added within the
<head> section of a web pagebackground : blue;
}  Internal styles share a common syntax
with external styles (more later)</style>
</head>  Inline styles override external styles

External Styles
 External styles are declared in a separate,
external .css file
 The .css file is linked to the current web
page using a <link> tag within the
<head> section
<head>
<link href=“styles.css”
rel=“stylesheet” />  The href attribute declares the name (and
path) of the external file
</head>
 The rel=“stylesheet” attribute sets the
relationship between the web page and
the external .css file
 Link tags are self-closing

“Cascading" Style Sheets
 External, Internal, Inline, and default styles establish a hierarchy of styles
 CSS styles declared closest to the tag override previous styles
 Inline styles declared in the tag override all other styles
 Internal styles (declared on a page) override external styles
 All CSS styles override the browser default styles
 This is the “cascade” within the meaning of CSS (Cascading Style Sheets)

“Cascading" Style Sheets
 Multiple CSS files can be linked to a single web page
 The order of the <link> declarations affects which styles are applied fist/last
 If a conflict occurs, the last declared styles will be applied
 If a <link> tag is declared after an internal <style> declaration, then the external stylesheet
becomes closer to the tag and will override the internal style!

Summary 1
 Default browser styles can be changed using CSS
 CSS only changes the elements to which they are applied
 CSS styles can be written as inline, internal, or external styles
 Inline styles are quoted attributes and are specific to a tag
 Inline styles are difficult to maintain and generally not recommended

Summary 1
 Internal styles are declared within <style> tags in the <head> section of a page and are
specific to that page
 External styles are declared in an external stylesheet and the <link> tag links the external
stylesheet to the web page by referencing the location of the .css file
 External styles can be used site-wide
 CSS establish a hierarchy of styles where later style rules override previous ones
 This is the “cascade” in Cascading Style Sheets

Syntax
 Internal and external styles share a
common syntax
p {
 The <head> reference is different but the
background: blue;
color: white;
text-align: center;
declaration syntax is the same
 Learning CSS is all about learning the
structure and syntax of the rules
}
 As well as the property-value pairs that
are available

Syntax
 External styles are declared in a plain text file and saved with a .css filename
 External files include only style declarations – and comments
 Spaces can be used to separate style declarations
 Internal styles are declared on each web page in the head section between <style> tags
 The advantage of using external files is the ease of maintenance
 There is only a single file to make any changes

Syntax
 CSS syntax rules consists of a selector and
a declaration block
p {
 Selectors target the HTML element(s) tobackground: blue;
color: white;
text-align: center;
be styled
 Declaration blocks contain one or more
property value pairs inside curly braces
}
 Each property value pair is separated by
a colon and ends with semicolon

Tag Selectors
 Tag names (without angle brackets) can
be used as selectors to target all
elements of that typep { color: white; }
 A comma separated list can be used to
apply a single CSS rule to more than one
tag name
h1, h2, h3 { color: blue; }

ID Selectors
 id attributes can be used as selectors
#top { color: blue; }
#main { color: blue; }
 A #sign is added to the id name in the
CSS rule (no spaces)
id name
#top, #main { color: blue; }

Class Selectors
 Class names can be used as selectors
.note { color: blue; }
 A period is added to the class name in
the CSS rule (no spaces).special { color: blue; }
class name
.note, .special { color: blue; }

Descendant Selectors
 Tags nested within other tags form a
parent-child relationship
 Use a space separated list to target
nested tags – as “descendants”
div p { color: blue; }
ul li { color: red; }
 div p applies only to paragraphs that are
nested within a div tag
 ul li applies only to list items that are in
unordered lists
 Paragraphs not inside div tags and li tags
in ordered lists are not affected

Combining Selectors
 A tag.class selector targets a specific
subset of tags with the class name
 paragraphs with class .note will be red

p.note { color: red; } span tags with class .note will be blue
other elements with the class .note arespan.note { color: blue; } 
not affected
 Paragraphs and span tags without the
class name are also not affected

Combining Selectors
 Combining descender and tag.class
selectors refines the target even more
 p.note will be red only within a div tag

div p.note { color: red; } span.note will be blue only within a list
other elements with the class .note willli span.note { color: blue; } 
not be affected
 There is a lot more to selectors – but
these will get you started

Comments
/* This is a comment */
/*
 Comments begin with a slash star and
end with its /* opposite */
 Comments add useful information for
stylesheet developersComments can be in a single line
or on multiple lines  They are ignored when processed by the
browser*/

Summary 2
 Internal styles are declared in the head section of a page
 External styles are declared in a plain text file with a .css file extension
 Internal and external styles share a common syntax
 Selectors identify the element to be styled
 Declaration blocks mark the beginning and end of a rule with curly braces
 Property and value pairs assign styles to specific attributes of the selector

Summary 2
 A selector is used to target specific page element(s)
 Common selectors are tag names, class names, and id names
 Selectors can be used individually or in a comma separated list
 They can be made more specific using a space separated list
 This establishes a nested “descender” relationship by including a parent element
 A tag.class combination can also be used to target a more specific element
 Descender and tag.class can also be combined

Summary 2
 Style rules are declared between opening and closing curly braces
 Rules consist of property and value pairs separated by a colon:
 Each property and value pair ends with a semicolon;
 Add /* comments */ for clarity
 Learning CSS is about learning the selectors, properties and values that are available in
CSS – which we start to cover next

Text Color
 When used by itself, color refers to the
text color – the foreground color
 There are over 100 color names that can
be used in CSSp { color: white; }
 There are also HEX, RGB, and HSLh1, h2, h3 { color: blue; }
notations for declaring color values
 This presentation will get you started with
some common color names

Color Names
black, white, silver, gray (grey)
 Here are 20 common color names to get
red, pink, magenta, purple,
green, yellow, lime, olive
blue, navy, teal, aqua
you started
 Light and dark can be used with some
colors written as a single word
 A google search for css color names willyellow, gold, orange, tomato
give you lots of choices
 Names are not case sensitive but it islightGrey, lightGreen, . . .
darkRed, darkBlue, . . .
usual for values to be lowercase

Background Color
 Color names can also be used to set the
background property of a page or page
element
body {
background: darkGray;
}  This example uses shorthand notation to
declare the background property
 There is also a more specific notation
using background-color: darkGray;
 Throughout this presentation, we use
div {
background: lightGray;
}
shorthand notation to get you started

Background Image
body {
background: url(“bkgnd.jpg”);
 Images can be used as backgrounds
 The url(“path”) notation is used to
indicate the file name and location}
 There is also a more specific notation
background-image: url(“path”);div {
 This example uses shorthand notation tobackground: url(“bkgnd.jpg”);
set the background property
}

Background Repeat
 Background images repeat in bothbody {
background:
url(“bkgnd.jpg”) repeat-x ;
directions - horizontally and vertically
 Use repeat-x or repeat-y to specify a
single direction}
 When using shorthand notation the
closing semicolon is used only once at
the end of a space separated listdiv {
background:
url(“bkgnd.jpg”) repeat-y ;
When specific notation is used the
semicolons are used in each case
background-repeat : repeat-x ;}

No Repeat and Position
 A single image can appear in thebody {
background: url(“bkgnd.jpg”)
no-repeat top right ;
background using no-repeat
 When no-repeat is used the image is
placed top-left of its parent container}
 The position property can be used to
place the image in one of 9 positions
div {
 The more specific notation can also be
used for both repeat and position
background-repeat : no-repeat ;
background-position : top right ;
no-repeat top right ;
}

Background Position
left top
left center
left bottom
The background-position is relative to
the parent container
 This may be different than the page
right top
right center
right bottom
except when applied in the body
 Experiment with placing the image at
different positions and elements
center top
center center
center bottom
 A single value can be used when the
second value defaults to “center”

Fixed or Scroll
body {
no-repeat fixed top right ;


Background images will scroll with the
page by default
To change this, add the fixed value to the
background property}
 Notice the placement location of the
fixed value – the order is importantdiv {
 However, the more specific notation can
be used in any order
background-attachment : fixed ;}

Shorthand Sequence
 When using shorthand notation the orderbackground:
lightgrey url(“bkgnd.jpg”) of the values is important
The order must be declared in thenorepeat fixed top right ; 
sequence shown opposite
color image repeat fixed position
background-color: lightgrey ;
background-image: url(“bkgnd.jpg”);
background-repeat: norepeat;
background-attachment: fixed;
background-position: top right;
 Individual values can be omitted but the
sequence cannot be changed
The more specific notation can be used in
any order

Color and Image
 It is common to add a background color
with a background imagebackground:
lightgrey url(“bkgnd.jpg”)
norepeat fixed top right ;
 This allows a complimentary color to
show when a repeat restriction is used
 Also when images may be disabled

Summary 3
 The color property refers to the text color
 There are over 100 color names that can be used in CSS
 Names are not case sensitive but common practice suggests lowercase
 Other notations include HEX, RGB, and HSL
 Color names can also be used with the background property
 A shorthand notation can be used – background: grey;
 Or the more specific notation – background-color: grey;

Summary 3
 Images can be used as backgrounds using the url(“path”) notation
 The path should include the location, file name, and extension
 Background images repeat in both directions by default
 The background-repeat property can be used to repeat in a single direction or to display
as a single image using repeat-x or repeat-y or no-repeat.
 The no-repeat value positions the image at the top-left of the container
 Use the position property to place the image in any of 9 positions
 The background is positioned relative to the parent container
 Add the fixed value to the background property to prevent default scrolling

Summary 3
 Shorthand notation declares a single background property with multiple values
 A single closing semicolon is used at the end of a space-separated list
 The order of the values is important (color image repeat fixed position)
 Individual values can be omitted, but the sequence cannot be changed
 Adding a background color with a background image allows a complimentary color to
show when a repeat restriction is used or images are disabled

Summary 3
background:
lightgrey url(“bkgnd.jpg”)
 Here is a summary of the shorthand and
more specific notationbackground-color: lightgrey ;
background-image: url(“bkgnd.jpg”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;

Inheritance
 Tags that are nested within other tags inherit the style of the parent tag
 All tags are nested within the body tag – so all tags inherit from the body tag
 CSS can target and change specific properties for specific elements
 But, again – only the specified styles are changed – all others continue to inherit from the
parent – whether from inline, internal, external, or default browser styles

Review
How did you do? Are you able to:
 Create inline, internal, and external styles
 Recognize and use cascading rules and rules of inheritance
 Use tag, ID, and class selectors to target specific HTML page elements
 Refine target HTML elements with descender and combination selectors
 Add comments to styles
 Use color names to set text formatting
 Add background color and images
 Manage repeat, scroll and position properties
 Use shorthand notation to set background properties

www.ajaykhatri.in
https://play.google.com/store/apps/details?id=learn.apps.cssprogramming

Introduction
 This presentation covers Lecture -2 of a basic introduction to CSS syntax
 See “HTML Basic Tags” for an introduction to HTML markup
 See Part-1 to get started with CSS
 This presentation is designed to be a next step for learning CSS

Objectives
 Declare font-family and font properties
 Recognize differences in serif and sans-serif fonts
 Identify font names for each major font-family
 Use different units of measurement for font-size
 Set font-weight, font-style, and font-variant values
 Set text properties for alignment, case, and line decoration
 Set line-height and text-indent properties
 Set word and letter spacing
 Create a drop shadow effect

Font
 A font is a particular character set
belonging to a font-family
 A font includes its size, weight, style, andfont-family
font-size
any decoration (next section)
 Fonts can dramatically impact the style
font-weight
font-style
font-variant
and presentation of a web page
 Fonts are declared with the properties
listed opposite
 The next few slides cover the values and
syntax of each property

Font Family
 A font family is a group of related fonts with similar characteristics
 Font families can be categorized as being with/without serifs
 Serifs are lines added at the ends of a character
 Serif fonts tend to be more emphatic – so useful in headings
 Sans-serif (without serif) fonts are easier to read on screen - so useful in body text
 Other font families include Monospace, Cursive, and Fantasy

Font Names
Here are some specific font names for each font-family:
 Serif: Georgia, Times New Roman, Palatino
Arial, Helvetica, Verdana Sans-Serif:
 Monospace: Courier New, Courier, Lucida Console
 Cursive:
 Fantasy
Lucida Calligraphy, Lucida Handwriting, Segoe Script
Chiller, Harrington, Papyrus

Font-Family
 Font-family values are declared in abody {
comma-separated list
font-family:
Verdana, Arial, sans-serif ;
}
 The generic font family name is listed at
the end as a fall back default font
 Fonts should be listed in a preferred
order as the browser will use only the first
font found in the listh1, h2, h3 {
Quotation marks are required if the fontfont-family:
"Times New Roman", Times, serif ;
}

name contains spaces
 "Times New Roman"

Font Size
 Font size can be measured in pixels, percent, and em
 And with word sizes small, medium, large
 Or with relative word sizes smaller, larger
 Historically font size measures the width of a capital “M”
 Thus 1em (no space) references the current font size relative to the size of the “M”
 The default browser font size is 16 pixels – stated as 16px (no space)
 So 1em = 16px (unless the base font size is changed)

Pixels
 Pixels are easy to learn but are fixed and
body { font-size: 16px; }
lack flexibility/accessibility
 Browser default text is 16 pixels
 Headings have larger values
h1
h2
h3
{ font-size: 40px; }
 Headings and text can be inherited from
browser defaults or set in CSS
 Font sizes can be changed to meet the
design requirements of the page.small { font-size: 12px; }
 There is no space between the unit of
measure and its value (16px)

“em”
 em units are more flexible than pixels andbody { font-size: 1em; }
scale relative to the base font
 Here the base font is declared as 1em
(which by default will equal 16px)h1
h2
h3
{ font-size: 2.5em; }
{ font-size: 2em; }
 The other font sizes are measured as
multiples of the base font
 Multiples are relative to the parent
container (not necessarily the body)
.small { font-size: 0.75em; }
 There is no space between the unit of
measure and its value (1em)

Percent
body { font-size: 100%; }
 Percent can also be used in CSS
h1
h2
h3
{ font-size: 200%; }
 Here the base font is 100% (or 16px)
 If the base font is changed – then all
other sizes adjust proportionally
 Relative units are relative to the base font
of the parent container.small { font-size: 90%; }

Combinations
 Units can be mixedbody { font-size: 100%; }
 Here, the base font is set in the body tag
as a percentage
h1
h2
h3
{ font-size: 2em; }
 Other tags are set using ems
 The body/base font can be set at any size
to start with – depending on the page
design requirements
.small { font-size: 0.75em; }  It does not have to be 100% or 16px

Font Weight
 A scale from 100 to 900 (in multiples of 100) can be used to specify font weight
 Normal is 400
 Bold is 700
 In between measures can be used to modify these benchmarks
 Keywords normal and bold correspond to 400 and 700
 Keywords lighter and darker are relative to the current font weight

Font-Weight
 Font weight is simple and easy to set
body { font-weight: normal; }
bold is used most often The keyword
h1, h2, h3 { font-weight: 900; }
Other weights are subtle variations or
relative adjustments
 Here, in these samples:
 Headings are darker than 700
 The note class is made bold
 The light class is made lighter
 The dark class is made darker
.note { font-weight: bold; }
.light { font-weight: lighter; }
.dark { font-weight: darker; }

Font-Style
 Font style can be normal, italic, orbody { font-style: normal; }
oblique
h1, h2, h3 {
font-style: italic;
}
 Oblique is often rendered as italic
 Normal is the default and can be used as
a reset.note { font-style: oblique; }

Font-Variant
 Font variant can be normal or set to
body { font-variant: normal; }
small-caps
h1, h2, h3 {
font-variant: small-caps;
}
 Normal is the default and can be used as
a reset
 Text properties are used to set other case.smcap { font-style: small-caps; }
settings (lower/upper case)

Font Shorthand
body { 

Font values can be listed in a single
declaration using the font propertyfont: 16px
Verdana, Arial, sans-serif ; The list of values is space separated –
except for the font family declaration}
 A single closing semicolon is used
 The order of the values is important: style
h1, h2, h3 {
font: italic small-caps bold
"Times New Roman", Times, serif ;
}
variant weight size family
 Individual values can be omitted but the
sequence must be maintained.smcap { font: small-caps; }

Summary 1
 A font is a named character set belonging to a font-family
 There are five generic font families
 Serif fonts have extenders at the end of characters (serifs)
 Sans-serif (without serif) do not
 Other font families include Monospace, Cursive, and Fantasy
 Font-family values are declared in a comma-separated list with the generic font family
name listed last
 Quotation marks are required if the font name contains spaces
 The browser uses only the first font found in the list

Summary 1
 Font size can be measured in pixels, percent, and em
 And with word sizes small, medium, large and smaller, larger
 Pixels are easy to learn but are fixed and lack flexibility/accessibility
 em units are more flexible and are expressed as multiples of the parent container
 Default size is 16px so 1em = 16px (the size of a capital “M”)
 There is no space between the unit of measure and its value (16px) (1em)
 Percent can also be used in CSS – where the default 100% is 16px
 Units can be mixed
 Font sizes change to meet the design requirements of the page

Summary 1
 Font weight can be expressed as a number - 100 to 900 (in multiples of 100) where
normal is 400 and bold is 700
 Keywords normal and bold correspond to 400 and 700
 Keywords lighter and darker are relative to the current font weight
 The keyword bold is used most often
 Font style can be normal, italic, or oblique
 Font variant can be normal or small-caps
 Normal is the default for style and variant but can be used as a reset
 Text properties are used to set other case settings (lower/upper case)

Summary 1
 The shorthand notation uses a single declaration using the font property
 Values are space separated – except for the font family declaration
 The font family is in a comma separated list
 A single closing semicolon is used
 The order of the values is important: style variant weight size family
 Individual values can be omitted but the sequence must be maintained

Text Properties
text-align
vertical-align 

Here are some basic text properties to
get you started
They do what they indicate with sometext-decoration
text-transform notable exceptions
 See the next slides for more details
 Color is also a related “text” property (seetext-indent
line-height CSS Part-1)
 Fonts are also related to text but deal
more specifically with character styleletter-spacing
word-spacing

Text Align
.search {
text-align: right;
}
 The text-align property aligns text
horizontally within its container.special {
text-align: justify;
 Horizontal alignment values include:}
left, right, center, justify
.footnote {
text-align: center;
}

Vertical Align
td {
vertical-align: top;
}
 The vertical-align property has some
limitations
 It is used to align text vertically within
td.special {
table cells – not in other containers
vertical-align: middle;
 It is also used with inline elements such
}
as images to align them with text flow
 Vertical alignment values for table cells
td.footnote {
include: top, middle, bottom
vertical-align: bottom;
}

Text Decoration
.note {
text-decoration: underline ;
}
 Text decoration refers to enhancing text
with line decoration
.totals {
 Text decoration values include:text-decoration: overline ;
underline, overline, and line-through
}
 Default is none – which can also be used.edit {
as a resettext-decoration: line-through ;
}

Text Transform
.note {
text-transform: uppercase;
}
 The text-transform property sets the
capitalization of text
 Values include:.alpha {
uppercase, lowercase, capitalizetext-transform: lowercase;
}
 Capitalize is used for names or titles
where every first letter is capitalized.title {
text-transform: capitalize;
}

Text Indent and Line Height
p.semi {
text-indent: 50px;
line-height: 1.5;
 The text-indent property indents only
the first line of a paragraph
 Any measurement units can be used to}
set the amount of indent
p.full {
text-indent: 10%;
line-height: 2em;
 The line-height property can be used
with measurement units or declared as a
multiple – such as 1, 1.5, or 2 for single,
one-and-half, or double line-spacing
}

Letter and Word Spacing
p.loose {
letter-spacing: 2px;
word-spacing: 2px;
 Letter an word spacing can be used to
change default line/word spacing
}
 Any of the measurement units can be
used (pixels, percent, em)p.compressed {
letter-spacing: -1px;
word-spacing: -1px;
}
 Units can be positive or negative

Summary 2
 The text-align properties can be used to change the default top-left positioning of text –
relative to its container – or as a reset
 The vertical-align properties only work on text in table cells – but can be used for inline
elements such as images to align with text flow
 text-align
 vertical-align
- left, right, center, justify
- top, middle, bottom

Summary 2
 The text-decoration property can be used to apply different line styles to text
 text-decoration - overline, underline, line-through, none
 The text-transform property can be use to set the capitalization of text
 text-transform - uppercase, lowercase, capitalize, none

Summary 2
 The text-indent property can be used to indent the first line of a paragraph
 It indents only the first line of text
 text-indent - in any measurement unit
 The line-height property can be used to change the default line spacing to a specified
value – or as a multiple for single, double, and 1.5 line heights
 line-height - in any measurement unit – or as a multiple (1, 1.5, 2)

Summary 2
 The letter-spacing and word-spacing properties adjust the spacing between letters and
words depending on style requirements
 Units can be positive or negative in px, percent, or em
 letter-spacing
 word-spacing
- in any measurement unit
- in any measurement unit

Text Shadow
 A text-shadow adds a special effect to
text – suitable for headings
h1 {
text-shadow: 2px, 2px, grey ;
 A comma-separated list of values is used
to be apply the shadow to text
 The order is horizontal-shift, vertical-shift,}
and color
 An optional blur value can be added

Review
 Declare font-family and font properties
 Recognize differences in serif and sans-serif fonts
 Identify font names for each major font-family
 Use different units of measurement for font-size
 Set font-weight, font-style, and font-variant values
 Set text properties for alignment, case, and line decoration
 Set line-height and text-indent properties
 Set word and letter spacing
 Create a drop shadow effect

Introduction
 This presentation covers Lecture-3 of a basic introduction to CSS syntax
 See “HTML Basic Tags” for an introduction to HTML markup
 See Part-1 to get started with CSS
 See Part-2 for Font and Text properties
 This presentation is designed to be a next step for learning CSS
 So, enjoy!

Objectives
 Set an element’s height and width property
 Set border properties in a single declaration or with specific notation
 Set rounded corners using the border-radius property
 Set padding properties in a single declaration or with specific notation
 Set margin properties in a single declaration or with specific notation
 Center an element by setting margins
 Recognize when margin collapse may occur
 Calculate a container’s extended width and height using the box model
 Set outline properties in a single declaration or with specific notation

Template
<!DOCTYPE html>
<html>
<head>
 Create this HTML template for use with<title> Container Text </title>
<style> ... </style> the samples that follow
</head>
<body>  A span tag is added to a paragraph tag
wrapped in a div tag<div> <p>
Add this <span> span tag </span>
to a paragraph within a div tag
</p> </div>
 A style tag is added for internal styles
</body>
</html>

Containers
div {
background: darkGrey;
}  All HTML tags create containers for their
contentp {
background: lightGrey;
}
 Add a background to the template tags
to see the default containersspan {
background: yellow;
}

Containers
div {
}
 Change the paragraph font-size to 2em
to see how the container size changesp {
font-size: 2em;
 Change the span font-size to 16px to see
how the container size follows the font
size
}
span {
background: yellow;
font-size: 16px;
}

Containers
div {
}
 For something interesting change the
span font-size to 2em
p {
 The em units are multiples relative to the
parent’s font-size
font-size: 2em;
}
span {
background: yellow;
font-size: 2em;
 The span font becomes 4x larger than the
original because the paragraph font is
also 2em – and 2 x 2 = 4
}

Containers
div {
 Containers have a height and width
property that wraps to the size of the
container contents
height: 500px; width: 500px;
}
p {
font-size: 2em;
height: 200px; width: 75%;
 The height and width can be set in CSS
independently of the contents
}
span {
background: yellow;
font-size: 16em;
 Add the height and width properties to
the CSS code as shown opposite
}

Containers
div {
background: darkGrey;  The height and width properties have
some limitationsheight: 500px; width: 500px;
}
 Add the height and width properties to
the span tag and note how there is no
change to this inline element
p {
font-size: 2em;
height: 200px; width: 75%;
}
 (The same is true for table rows)span {
background: yellow;
font-size: 16em;
height: 2em; width: 100px;
The height and width properties always
work with block level elements
}

Summary 1
 All HTML tags create containers for their content
 Containers have a height and width property that wraps to the size of the container
contents
 The height and width can be set in CSS independently of the contents
 The height and width properties have some limitations but always work with block level
elements

Borders
 Borders can be added to any element
 Borders are added outside of the container dimensions
 Borders extend the visual size of the element and add to its overall dimensions
 The content (container) width and height remain unchanged and as declared
 The combined dimensions of border and container are the height and width of the
contents plus the width of the border
 The top and bottom border adds to the height
 The left and right border adds to the width

Borders
 Borders can be declare using a singlediv {
border: 2px solid red;
}
border property
 The values are declared in a space
separated list as width, style and color
 This applies the same border style to allimg {
four sides of the elementborder: 5px dashed blue;
}
 The order is significant with shorthand
notation – width style color

Borders
div {
border-width: 2px;
 The three border properties can beborder-style: solid;
border-color: red; declared individually using the more
specific notation}
img {
border-width: 5px;  When specific properties are used, the
order is not importantborder-style: double;
border-color: blue;
}

Borders
div {
}


Width can be any measurement unit or
stated as thin, medium, thick
Border color can be any of the CSS colorsimg {
border-width: 5px;
border-style: double;
border-color: blue;  A list of styles follows
}

Border Style
 A style must be declared for the border
to be displayed
 Any of the styles shown opposite can bedotted, dashed, solid
double, groove, ridge
inset, outset
used
 Some of the 3D effects will vary with the
border color and width
none, hidden A hidden border still takes up space
 An image can also be used for the border
– more later

Borders
 One reason to use the more specific
notation is to vary the values per side
div {
border-width:
 If 4 values are used, they follow the order1px 2px 3px 4px;
of Top, Right, Bottom, and Left
border-style: dotted dashed;
 TRBL spells “trouble”
border-color:
red green blue;
 Here the border width is 1px across the
top, 2px on the right, 3px across the
bottom, and 4px on the left
}

Borders
 If only 2 values are used the top anddiv {
border-width:
bottom are paired with the first value and
the left and right are paired with the last
value1px 2px 3px 4px;
border-color: Here, the border-style is dotted across
the top and bottom and dashed on the
left and right sides

red green blue;
}

Borders
 When 3 values are used the top anddiv {
border-width:
bottom are independent and use the first
and last value and the left and right are
paired with the middle value1px 2px 3px 4px;
border-color: Here, the border-color will be red on top
and blue on the bottom with the green
value used on each side

red green blue;
}

Borders
 The next slide lists all of the individualdiv {
}
border property combinations
 There a lot of them which adds to the
complexity of learning them at firstimg {
border-width: 5px;
border-style: double;
border-color: blue;  Stick with the simpler declarations at first
and add variations when needed}

Border Properties
border-top border-bottom
border-top-width
border-top-color
border-top-style
border-bottom-width
border-bottom-color
border-bottom-style
border
border-width
border-color
border-style
border-right border-left
border-right-color
border-right-style
border-right-width
border-left-width
border-left-color
border-left-style

Summary 2
 Borders are added outside of the container dimensions and extend the visual size of the
element
 The combined dimensions of border and container are the height and width of the
contents plus the width of the border – added for each border
 Borders can be declare using a single border property in a space separated list as width,
style and color – the order is significant
 Or, the borders can be declared in a more specific notation using any of the border
property declarations

Summary 2
 Width can be any measurement unit or stated as thin, medium, thick
 Border color can be any of the CSS colors
 A style must be declared for the border to be displayed
 Values can be declared in a single declaration which applies to all sides
 Values can be declared with 4 individual values for Top, Right, Bottom, and Left
 If 2 values are declared the top and bottom are paired with the first value and the left and
right are paired with the last value
 If 3 values are declared the top and bottom are independent and use the first and last
value and the left and right are paired with the middle value

Border-Radius
 CSS3 provides for rounded corners using the border-radius property
 Browser support for CSS3 is limited to the newest of browsers
 The property can be applied to the background of an element even without a defined
border
 For this presentation we assume it is declared with borders

Border Radius
div {
border-radius: 25px ;
 The border-radius property can be
applied to all corners in a single value


Or they can be applied to individual}
corners using a combination of valuesimg {
border: 1px solid red; When 4 values are used they apply
clockwise from the top-leftborder-radius:
15px 20px 25px 30px ;
 Values can be set to 0 to skip specific}
corners (without a measurement unit)

Border Radius
 If 2 values are used the values are paireddiv {
border-radius: 25px 30px;
to opposite corners

Top-left and bottom-right
}  Top-right and bottom-left
If 3 values are usedimg {
border-radius: 20px 25px 30px;

 the first and last value applies to the
top-left and bottom-right
}
 the middle value is paired with the top-
right and bottom-left

Border-Radius
border-radius
 The border-radius properties can be
declared using shorthand notation
border-top-left-radius
border-top-right-radius  Or using the more specific notation
shown opposite
 Note how the position is interjected
between border and radiusborder-bottom-right-radius
border-bottom-left-radius

Summary 3
 The border-radius property is new to CSS3 and limited to current browsers
 It creates rounded corners for borders
(and backgrounds even without a defined border)
 The border-radius properties can be declared using shorthand notation
 Or using the more specific notation – per corner

Summary 3
 The border-radius property can be declared as a single value to all corners
 Or to individual corners using a combination of values
 When 4 values are used they apply clockwise from the top-left
 2 values are paired to opposite corners
 3 values combine the middle value with the top-right and bottom-left

Padding
 Padding can be added to any element (with some exceptions)
 Padding is added between the content container and the border if any
 Or the content container and margin if no border

Padding
 Padding extends the visual dimensions of the element and adds to its overall size
 The visual dimensions of the element are the height and width of the contents plus the
dimensions of the border and padding – on all four sides
 The top and bottom add to the height
 The left and right add to the width

Padding
 Padding requires only a dimension value
in its declaration
div {
padding: 2em ;
}
 Padding takes on the background color
of the container and does not have any
style attribute
img {
 When declared as a single value it appliespadding: 1px 2px 3px 4px;
to all 4 sides
}
 Four values are applied clockwise from
the top – top, right, bottom, left

Padding
 Two values pair the top-bottom and left-
right
p {
}
padding: 2em 4px;
 Three values apply the first and last value
to the top and bottom with the middle
value combine left-right sides.nav {
padding: 2px 5px 1px;
}
 The dimension can be any unit of
measurement and even mixed units

Padding
p {
}
padding: 1px 2px 3px 4px;
 Padding can be declared as a single
property – or as individual properties
p {
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
}

Summary 4
 Padding is added between the content container and border if any
 Or the content container and margin if no border
 Padding extends the visual dimensions of the element
 The top and bottom dimensions add to the height
 The left and right dimensions add to the width
 Padding requires only a dimension value and takes on the background color of the
container and has no style attribute

Summary 4
 When declared with a single value it applies to all 4 sides
 Four values are applied clockwise from the top – top, right, bottom, left
 Two values pair the top-bottom and left-right
 Three values pair the middle value with the left and right sides
 The dimension can be any unit of measurement and even mixed units
 Padding can be declared as a single property – or as individual properties

Margins
 Margins add visual separation between elements by adding space outside the border and
padding areas
 Margins add to the visual dimension of an element without changing the height and
width properties of the content container
 Margins aggregate when two elements are adjacent

Margins
 Margins require a dimension value in its
declaration
div {
padding: 2em ;
}
 Margins take on the color of the
surrounding background and they do not
have a style attribute
img {
 When declared as a single value it appliespadding: 1px 2px 3px 4px;
margins to all 4 sides
}
 Four values are applied clockwise from
the top – top, right, bottom, left

Margins
 Two values pair the top-bottom and left-
right margins
p {
}
padding: 2em 4px;
 Three values apply the first and last value
to the top and bottom with the middle
value combine left-right sides.nav {
padding: 2px 5px 1px;
}
 The dimension can be any unit of
measurement and even mixed units

Margins
p {
}
margin: 1px 2px 3px 4px;
 Margins can be declared as a single
property – or as individual properties
p {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

Margins
 To center an element horizontally set thediv {
height: 500px; width: 500px;
margin to “auto”
margin: auto; 

Some authors use the shorthand notation
to set left and right margins}
div {
margin-left: auto;
margin-right: auto;
Others specifically set the margin-left and
margin-right properties to assist
documentation}

Margin Collapse
 Top and bottom margins sometimes
combine with too much whitespace
 Browsers will collapse vertical margins
into a single margin and assign the
largest of the two margin values
 It the h1 and h2 headings opposite
followed each other in html code the
browsers would collapse the top and
bottom margins into a single, vertical
margin of 20px
h1 { margin: 10px ; }
h2 { margin: 20px ; }

Summary 5
 Margins add space outside the border and padding areas
 Margins require only a dimension value in its declaration
 When declared with a single value all four margins are applied equally
 Four values apply to the top, right, bottom, and left
 Two values pair the top-bottom and left-right
 Three values pair the middle value with the left and right sides (width)

Summary 5
 The dimension can be any unit of measurement and even mixed units
 Margins can be declared as a single property – or as individual properties
 Elements can be centered within a container by setting the margin to auto
 Margin collapse occurs to reduce the vertical whitespace between elements

The Box Model
 Throughout this presentation we have emphasized that borders, padding, and margins
add to the visual dimensions of an element
 The height and width of the content does not include borders, padding, or margin
 The borders, padding, and margins form an extended box around the content
 This is referred to as the “box model” and is used by web designers to calculate the overall
dimensions for positioning and layout
 This will be covered in more detail in a later presentation on layouts

Example
 The overall dimension of this div tag is
450px by 450px calculated as follows:
div {
height: 300px;
 The height and width of the contents is
set to 300px by 300px
width: 300px;
 Add the padding on all four sides:
padding: 25px;
border: 25px ;
margin: 25px;
25 + 25 = 50px on height and width
 Add the border on all four sides:
}
 Add the margin on all four sides:

Outline
 Unlike borders, an outline does not add to the overall box model dimensions
 It does not push the margin out like the border does
 The outline properties include width, style, and color – and offset
 It is declared similar to borders

div {
outline: 1px solid red;
}  Use the same width and style values as
bordersdiv {
 Use the same declaration options asoutline-width: 1px;
outline-style: solid;
outline-color: red;
borders
}

Summary 6
 The box model is used for positioning and layout
 It aggregates all of the border, padding, and margin values with the content
 The outline property does not change the overall dimensions of the box model
 It uses the same property declarations and values as borders

Review
 Set an element’s height and width property
 Set border properties in a single declaration or with specific notation
 Set rounded corners using the border-radius property
 Set padding properties in a single declaration or with specific notation
 Set margin properties in a single declaration or with specific notation
 Center an element by setting margins
 Recognize when margin collapse may occur
 Calculate a container’s extended width and height using the box model
 Set outline properties in a single declaration or with specific notation

CSS Basics (Cascading Style Sheet)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Basics (Cascading Style Sheet)

Similar to CSS Basics (Cascading Style Sheet) (20)

More from Ajay Khatri

More from Ajay Khatri (9)

Recently uploaded

Recently uploaded (20)

CSS Basics (Cascading Style Sheet)

Editor's Notes