html chapter 3-css
TRANSCRIPT
-
7/27/2019 HTML Chapter 3-Css
1/89
Chapter 3
Cascading Style Sheets (CSS)
-
7/27/2019 HTML Chapter 3-Css
2/89
Introduction to CSS
CSS stands for Cascading Style Sheet. A CSS allows you to separate web sites HTML content from
its style.
We use HTML file to arrange the content.
All of the presentation/formatting like fonts, colors,background, borders, text formatting, link effects, etc. areaccomplished within a CSS.
CSS is a web page layout method that has been added toHTML to give web developers more control over their design
and content layout. Using CSS allows a designer to create a standard set of
commands that controls the style of all subsequent pages.
These commands are embedded inside the web page or froman external file/page.
-
7/27/2019 HTML Chapter 3-Css
3/89
Introduction to CSS
With CSS you can add style (fonts, colors,spacing, and size) to web documents.
More advanced techniques control the layout ofthe page without the use of tables or othercumbersome HTML.
CSS separates the layout and the styles of a webpage.
Styles such as fonts, font sizes, margins, can bespecified in one place, and then the Web pagesfeed off this one master list, with the stylescascading throughout the page or an entire site.
-
7/27/2019 HTML Chapter 3-Css
4/89
Introduction to CSS
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
This is a heading
This is a paragraph.
The layout of the document was supposed to be taken care of by thebrowser, without using any formatting tags.
When tags like , and color attributes were added to the HTML 3.2specification, it started a nightmare for web developers.
Development of large web sites, where fonts and color information were
added to every single page, became a long and expensive process. To solve this problem, W3C created CSS.
In HTML 4.0, all formatting could be removed from the HTML document,and stored in a separate CSS file.
All browsers support CSS today.
-
7/27/2019 HTML Chapter 3-Css
5/89
Introduction to CSS
CSS is a breakthrough in web design because it allows
developers to control the style and layout of multiple
web pages all at once.
As a web developer you can define a style for each
HTML element and apply it to as many web pages as
you want.
To make a global change, simply change the style, and
all elements in the Web are updated automatically.
Benefits of CSS
The benefits of using style sheets are:
Better type and layout controls - Presentational HTML
never gets close to offering the kind of control over type,
-
7/27/2019 HTML Chapter 3-Css
6/89
Introduction to CSS
Less work - You can change the appearance of an entire site by
editing one style sheet.
Making small tweaks and even entire site redesigns with style
sheets is much easier than when presentation instructions are
mixed in with the markup. Potentially smaller documents and faster downloads - Old
school practices of using redundant font elements and nested
tables make for bloated documents.
Not only that, you can apply a single style sheet document to all the
pages in a site for further byte savings. More accessible sites - When all matters of presentation are
handled by CSS, you can mark up your content meaningfully,
making it more accessible for non-visual or mobile devices.
Reliable browser support - Nearly every browser in current use
supports all of CSS Level 1 and the majority of CSS Level 2.
-
7/27/2019 HTML Chapter 3-Css
7/89
CSS Revisions/Levels
There are three levels/versions of CSS:
CSS1,
CSS2, and
CSS3
CSS 1 The first CSS specification to become an official W3C
Recommendation is CSS level1
It was published in December 1996.
Among its capabilities are support for
Font properties such as typeface and emphasis Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
Unique identification and generic classification of groups of attributes
-
7/27/2019 HTML Chapter 3-Css
8/89
CSS Revisions/Levels
CSS 2
CSS level 2 specification was developed by the W3C and
published as a Recommendation in May 1998.
It is a superset of CSS 1
CSS 2 includes a number of new capabilities like absolute,
relative, and fixed positioning of elements and z-index, the
concept of media types, support for aural style sheets and
bidirectional text, and new font properties such as shadows.
CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS 2
It removes poorly-supported or not fully interoperable
features and adds already-implemented browser extensions
to the specification.
-
7/27/2019 HTML Chapter 3-Css
9/89
CSS Revisions/Levels..
CSS3
CSS Level 3 builds on CSS Level 2 module by module,
using the CSS2.1 specification as its core.
Each module adds functionality and/or replaces part ofthe CSS2.1 specification.
The CSS Working Group intends that the new CSS
modules will not contradict the CSS2.1 specification:
only that they will add functionality and refine definitions.
-
7/27/2019 HTML Chapter 3-Css
10/89
CSS Syntax
A CSS rule has two main parts: a selector, and
one or more declarations.
The selector is normally the HTML element you want
to style. Usually, it is the HTML tags to be styled. E.g.
,
Each declaration consists of: property and
a value.
The property is the style attribute you want to change.
Each property has a value.
-
7/27/2019 HTML Chapter 3-Css
11/89
CSS Syntax
-
7/27/2019 HTML Chapter 3-Css
12/89
CSS Syntax
CSS declarations alway ends with a semicolon.
Declaration groups are surrounded by curlybrackets
p {color:red; text-align:center;}
To make the CSS more readable, you can put onedeclaration on each line, like this:
p {color:red;
text-align:center;
}
-
7/27/2019 HTML Chapter 3-Css
13/89
CSS Comments
Comments are used to explain your code, andmay help you when you edit the source code at alater date.
CSS comments are ignored by browsers.
A CSS comment begins with /* and ends with */
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
font-family:arial;
}
-
7/27/2019 HTML Chapter 3-Css
14/89
Linking CSS to HTML
Linking CSS to HTML
It is possible to link CSS with your html pages in two different ways:
internal style, and
external style.
Internal CSS can be either
inline or
embedded.
I. Creating an Inline Style
You can apply styles to a single element using the styleattribute in
the element itself. Inline styles have the structure:
Example:
Introduction
-
7/27/2019 HTML Chapter 3-Css
15/89
Linking CSS to HTML
II. Creating Embedded Styles
We use the tag for this
tag has a property called type which should be set totext/css for CSS styling.
The format for this is shown in the example below:
Styling with CSS
/*CSS Content Goes Here*/p { color:red; text-align:center; }
-
7/27/2019 HTML Chapter 3-Css
16/89
Linking CSS to HTML
In internal method each HTML file contains the
CSS code needed to style the page.
This means any changes you want to make to
one page, will have to be made to all.
This method can be good if you need to style only one page, or
you want different pages to have varying styles.
-
7/27/2019 HTML Chapter 3-Css
17/89
Linking CSS to HTML
III. Creating an External Style Sheet
An external CSS file can be created with any text orHTML editors such as notepadorDreamweaver.
A CSS file contains no HTML, only CSS.
You have to save the CSS file with the .css fileextension.
You can link to the file externally by placing one of thefollowing links in the head section of every HTML file
you want to style with the CSS file.
@import
url(filename.css)
-
7/27/2019 HTML Chapter 3-Css
18/89
Inheritance
An element that is directly contained within another
element (with no intervening hierarchical levels), is said
to be the child of that element.
Conversely, the containing element is the parent.
For example, the em element is the child of the p
element, and the p element is its parent.
All of the elements higher than a particular element inthe hierarchy are its ancestors.
Two elements with the same parent are siblings.
-
7/27/2019 HTML Chapter 3-Css
19/89
Inheritance
When you write a font-related style rule using the p elementas a selector, the rule applies to all of the paragraphs in thedocument as well as the inline text elements they contain.
Some style sheet properties are inherited and others do not.
In general, properties related to the styling of text font size,
color, style, etc are passed down. Properties such as borders, margins, backgrounds, and so on
that affect the boxed area around the element tend not to bepassed down.
You can use inheritance to your advantage when writing stylesheets.
For example, if you want all text elements to be rendered inthe Verdana font face, you could write separate style rules forevery element in the document and set the font-face toVerdana.
A better way would be to write a style forbody element, and
-
7/27/2019 HTML Chapter 3-Css
20/89
Inheritance
Example: All texts in the following page is displayed as red because ofinheritance
CSS
body { color: red;}
Well Known Novels
Romeo and Juliet
Things Fall Apart
Kingdom of God is Among You
-
7/27/2019 HTML Chapter 3-Css
21/89
Conflicting styles: the
Cascade Ever wonder why they are called cascading style sheets?
CSS allows you to apply several style sheets to the same
document, which means there are bound to be conflicts.
For example, what should the browser do if a documents
imported style sheet says that h1 elements should be red, butits embedded style says h1s should be purple?
The style sheet specification has a hierarchical system that
assigns different weights to the various sources of styleinformation.
The cascade refers to what happens when several sources of
style information vie for control of the elements on a page
Style information is passed down until it is overridden by a
style command with more weight.
-
7/27/2019 HTML Chapter 3-Css
22/89
Conflicting styles: the
Cascade
Generally speaking, the closer the style sheet is to the
content, the more weight it is given.
Embedded style sheets have more weight than external
style sheets.
Inline styles have more weight than embedded style
sheets.
To prevent a specific rule from being overridden, you
can assign it importance with the !important indicator.
If you want a rule not to be overridden by a
subsequent conflicting rule, include the !important
indicator just after the property value and before the
semicolon for that rule.
-
7/27/2019 HTML Chapter 3-Css
23/89
Conflicting styles: the
Cascade
For example, to make paragraph text blue always, use
the following rule:
p {color: blue !important;}
Even if the browser encounters an inline style later in the
document, like this one:
that paragraph will still be blue, because the rule with
the !important indicator cannot be overridden by other
styles in the authors style sheet.
-
7/27/2019 HTML Chapter 3-Css
24/89
Grouped Selectors
If you ever need to apply the same style
property to a number of elements, you can
group the selectors into one rule.
This one rule has the same effect as the fiverules listed separately.
h1, h2, p, div, img { border: 1px solid blue; }
Grouping them makes future edits more efficient
and results in a smaller file size.
-
7/27/2019 HTML Chapter 3-Css
25/89
Rule order
If there are conflicts within style rules of identical
weight, whichever one comes last in the list wins.
Take these three rules, for example:
p { color: red; }
p { color: blue; }
p { color: green; }
In this scenario, paragraph text will be green
because the last rule in the style sheet overrides the
earlier ones.
-
7/27/2019 HTML Chapter 3-Css
26/89
Styling HTML with CSS
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSS Class and ID
-
7/27/2019 HTML Chapter 3-Css
27/89
1. Styling Backgrounds
You can style the background of an element in onedeclaration with the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
Values: background color
image
position
repeat
attachment
Or you can set each property individually
-
7/27/2019 HTML Chapter 3-Css
28/89
Styling Backgrounds
Background Color You can specifically declare a color for the background of an
element.
background-color: value;
Values:
color name (e.g. red, green, blue, etc.) hexadecimal number(e.g. #ff0000, #00ff00, #0000ff, etc)
RGB color code (e.g. rgb(255,0,0), rgb(0, 255, 0), rgb(0,0,255), etc)
Transparent
Example:
h1 { background-color: rgb(255, 255, 0); }
p { background-color: #0000FF; }
Background Image You can set an image for the background of an element .
-
7/27/2019 HTML Chapter 3-Css
29/89
Styling Backgrounds
Background At tachment Are you using an image as a background?
You can set whether the background scrolls with the page oris fixed when the user scrolls down the page
This is done with the background-attachment property
background-attachment: value;
Values: fixed
Scroll
Background Repeat
You can set if an image set as a background of an element isto repeat (across=x and/or down=y) the screen.
background-repeat: repeat | repeat-x | repeat-y;
-
7/27/2019 HTML Chapter 3-Css
30/89
Styling Backgrounds
Example
body { background-image: url("tulips.jpg");
background-position: top right;
background-repeat: repeat;
}
Background Posit ion
You can position an image used for the background ofan element using the background-position property.
background-position: value;
-
7/27/2019 HTML Chapter 3-Css
31/89
Styling Backgrounds
Values: top left
top center
top right
center left
center center center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Example
p { background-image: url("tulips.jpg");
background-position: top right;
}
-
7/27/2019 HTML Chapter 3-Css
32/89
2. Styling Text
Color
You can set the color of text with the following:
color: value;
Possible values are: color nameexample: red, black
hexadecimal number example: #ff0000, #000000
RGB color code example: rgb(255, 0, 0), rgb(0, 0, 0)
Example:
p {color: blue;}
-
7/27/2019 HTML Chapter 3-Css
33/89
2. Styling Text
Letter Spacing You can adjust the space between letters in the
following manner.
Setting the value to 0 prevents the text from
justifying. You can use negative values.
Negative values make the text overlap each other.
letter-spacing: value;
Possible values are normal
Length
-
7/27/2019 HTML Chapter 3-Css
34/89
2. Styling Text
Word Spacing
You can adjust the space between words in the following manner.You can use negative values.
word-spacing: value;
Possible values are
normal length
Line heigh t
You can set the distance between lines in the following way:
line-height: value; Possible values are
normal
number
length
Percentage(%)
-
7/27/2019 HTML Chapter 3-Css
35/89
2. Styling Text
Text A l ign
You can align text with the following:
text-align: value;
Possible values are
left right
center
Justify
Examples:
This text is aligned left.
This text is aligned center.
This text is aligned right.
-
7/27/2019 HTML Chapter 3-Css
36/89
2. Styling Text
Text Decoration
You can decorate text with the following:
text-decoration: value;
Possible values are
none underline
overline
Line-through
Blink
Examples:This text is underlined.
This text has a line through it.
This text is overlined.
-
7/27/2019 HTML Chapter 3-Css
37/89
2. Styling Text
Text Transfo rm You can control the case of letters in an (X)HTML
element with the following:
text-transform: value;
Possible values are none
capitalize
lowercase
Uppercase
e.g. h3 { text-transform: uppercase; }
-
7/27/2019 HTML Chapter 3-Css
38/89
2. Styling Text
Text Indent
You can indent the first line of text in an (X)HTML element with thefollowing:
text-indent: value;
Possible values are length
percentage(%)
Text Directio n
You can sets the text direction
direction: value;
Possible values are
ltr (left to right)
rtl (right to left)
-
7/27/2019 HTML Chapter 3-Css
39/89
2. Styling Text
unicode-b id i Possible value:
normal
embed
bidi-override
The meanings of the values are:
normal :the element does not open an additional level of embeddingwith respect to the bidirectional algorithm. For inline elements, implicitreordering works across element boundaries.
embed:if the element is inline, this value opens an additional level of
embedding with respect to the bidirectional algorithm. Inside theelement, reordering is done implicitly.
bidi-overr ide:for inline elements this creates an override. For blockcontainer elements, this creates an override for inline-level descendantsnot within another block container element. This means that inside theelement, reordering is strictly in sequence according to the directionproperty; the implicit part of the bidirectional algorithm is ignored.
-
7/27/2019 HTML Chapter 3-Css
40/89
2. Styling Text
For the direction property to affect reordering ininline elements, the unicode-bidi propertys valuemust be embed or override.
Example:div {
direction: rtl;
unicode-bidi: bidi-override;
}
Hebrew and Arabic are written from right to left.
This is displayed as:
-
7/27/2019 HTML Chapter 3-Css
41/89
2. Styling Text
White Space
You can control the whitespace in an (X)HTMLelement with the following:
white-space: value;
Possible values are
normal
pre
nowrap
pre-wrap
pre-line
-
7/27/2019 HTML Chapter 3-Css
42/89
2. Styling Text
This property declares how white space(tab, space, etc) andline break(carriage return, line feed, etc.) inside the elementis handled.
Values have the following meanings: normal :This value directs user agents to collapse sequences of
white space, and break lines as necessary to fill line boxes. pre:This value prevents user agents from collapsing sequences
of white space. Lines are only broken at preserved newlinecharacters.
nowrap:This value collapses white space as for normal, butsuppresses line breaks within text.
pre-wrap:This value prevents user agents from collapsingsequences of white space. Lines are broken at preservednewline characters, and as necessary to fill line boxes.
pre-line:This value directs user agents to collapse sequences ofwhite space. Lines are broken at preserved newline characters,and as necessary to fill line boxes.
-
7/27/2019 HTML Chapter 3-Css
43/89
3. Styling Fonts
Font
The font property can set the style, weight, variant, size,
line height and font-type:
font: [ [ font-style || font-variant || font-weight] || font-size [ /line-
height] || font-family ];
Example:
font: italic bold normal small/1.4em Verdana, sans-serif;
The above would set the text of an element to an italic
style a bold weight a normal variant a relative size a line
height of 1.4em and the font to Verdana or another
sans-serif typeface.
-
7/27/2019 HTML Chapter 3-Css
44/89
3. Styling Fonts
Font -Fam ily You can set what font will be displayed in an element
with the font-family property.
There are 2 choices for values:
family-name generic family
If you set a family name it is best to also add thegeneric family at the end as this is a prioritized list.
So if the user does not have the specified font name,it will use the same generic family.
font-family: Verdana, sans-serif;
-
7/27/2019 HTML Chapter 3-Css
45/89
3. Styling Fonts
Fon t Size You can set the size of the text used in an element by using the font-size
property.
font-size: value;
The value can be:
absolute size
relative size
length
percentage(%)
Absolute sizes are:
xx-small
x-small
small
medium
large
x-large
xx-large
-
7/27/2019 HTML Chapter 3-Css
46/89
3. Styling Fonts
The following table provides user agent guidelinesfor the absolute-size mapping to HTML headingand absolute font-sizes
Relative sizes are: larger
smaller
CSS absolute-size values
xx-small x-small small medium large x-large xx-large
HTML font sizes 1 2 3 4 5 6 7
-
7/27/2019 HTML Chapter 3-Css
47/89
3. Styling Fonts
A relative-size is interpreted relative to the table of
font sizes and the font size of the parent element.
For example, if the parent element has a font size of
medium, a value oflargerwill make the font size ofthe current element be large.
If the parent elements size is not close to a table
entry, the user agent is free to interpolate between
table entries or round off to the closest one.
-
7/27/2019 HTML Chapter 3-Css
48/89
3. Styling Fonts
Length Units in CSS There are two types of length units:
relative and
absolute.
Relative length units specify a length relative to another lengthproperty.
Style sheets that use relative units can more easily scale from oneoutput environment to another.
The absolute units consist of the physical units (in, cm, mm, pt, pc)
and the px unit: in: inches 1in is equal to 2.54cm.
cm: centimeters
mm: millimeters
pt: points the points used by CSS are equal to 1/72nd of 1in.
pc: picas 1pc is equal to 12pt.
px: pixel units 1px is equal to 0.75pt.
-
7/27/2019 HTML Chapter 3-Css
49/89
3. Styling Fonts
Example: all the following are possibleh1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
p { font-size: 12px } /* px */
Relative units are: em: the current font-size of the relevant font
ex: the x-height of the relevant font
-
7/27/2019 HTML Chapter 3-Css
50/89
3. Styling Fonts
Relative units are: em: the current font-size of the relevant font
ex: the x-height of the relevant font
The em unit is equal to value of the font-size property of theelement on which it is used.
The exception is when em occurs in the value of the font-sizeproperty itself, in which case it refers to the font size of the parentelement.
Example:
body{
font-size: 12px;
text-indent: 3em; /* i.e. 36px - based on font-size*/
}
-
7/27/2019 HTML Chapter 3-Css
51/89
3. Styling Fonts
The ex means the x-height.
Thex-heightis so called because it is often equal
to the height of the lowercase x.
However, an exis defined even for fonts that donot contain an x.
-
7/27/2019 HTML Chapter 3-Css
52/89
3. Styling Fonts
The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height.
If reliable font metrics are not available, user agents maydetermine the x-height from the height of a lowercase glyph.
In the cases where it is impossible or impractical to determinethe x-height, a value of 0.5em should be used.
Example:
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */
Example:
h1 { line-height: 1.2em }
This means the line height of h1 elements will be 20%greater than the font size of the h1 elements.
-
7/27/2019 HTML Chapter 3-Css
53/89
3. Styling Fonts
On the other hand:
h1 { font-size: 1.2em }
This means that the font-size of h1 elements will
be 20% greater than the font size inherited byh1 elements.
What is the font size of H1?body { font-size: 20pt;}
H1 {font-size: 1.2em;}
/* The font size of H1 is 24 */
-
7/27/2019 HTML Chapter 3-Css
54/89
3. Styling Fonts
Font Style You can set the style of text in a element with the font-style
property:
font-style: value;
Possible values are normal
itailc
Oblique
Font Variant
You can set the variant of text within an element with the font-variant property:
font-variant: value;
Possible values are
normal small-caps
-
7/27/2019 HTML Chapter 3-Css
55/89
3. Styling Fonts
Font Weight You can control the weight of text in an element with the font-weight property:
font-weight: value;
Absolute values are
normal
100 200
300
400
500
600
700
800
900
Bold
Relative Values are:
lighter
bolder
-
7/27/2019 HTML Chapter 3-Css
56/89
3. Styling Fonts
The font-weight property selects the weight of the
font.
The values 100 to 900 form an ordered sequence,
where each number indicates a weight that is atleast as dark as its predecessor.
The keyword normal is synonymous with 400, and
bold is synonymous with 700.
Keywords other than normal and bold have beenshown to be often confused with font names and a
numerical scale was therefore chosen for the 9-
value list.
-
7/27/2019 HTML Chapter 3-Css
57/89
3. Styling Fonts
inherited value Bolder Lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700
Example:
body { font-weight: 600;}
p { font-weight: bolder } /* this is based on 600 and it changes to
-
7/27/2019 HTML Chapter 3-Css
58/89
4. Styling Links
User agents commonly display unvisited links differently frompreviously visited ones.
CSS provides the pseudo-classes a:link and a:visited todistinguish them: The a:l inkpseudo-class applies for links that have not yet been
visited. The a:visitedpseudo-class applies once the link has been
visited by the user.
The a:hoverpseudo-class applies while the user designates anelement with some pointing device, but does not activate it. Forexample, a visual user agent could apply this pseudo-class when
the cursor (mouse pointer) hovers over a box generated by theelement.
The a:activepseudo-class applies while an element is beingactivated by the user. For example, between the times the userpresses the mouse button and releases it.
The a:focuspseudo-class applies while an element has the
focus (accepts keyboard events or other forms of text input).
-
7/27/2019 HTML Chapter 3-Css
59/89
4. Styling Links
Below are the various ways you can use CSS tostyle links.
a:link {
color: #009900;
text-decoration: overline;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}a:active {color: #009900;}
-
7/27/2019 HTML Chapter 3-Css
60/89
4. Styling Links
Remark: You must declare the a:linkand
a:visitedbefore you declare a:hover.
Furthermore, you must declare a:hoverbefore
you can declare a:active.
Using the above code will style all links on
your web page, unless you declare a separate
set of link styles for a certain area of yourwebpage.
Look at pseudo-classes sub-section for more.
-
7/27/2019 HTML Chapter 3-Css
61/89
5. Styling Lists
List Style You can control the appearance of ordered and
unordered lists in one declaration with the list-style property
list-style: value value value;
Values: image
position
type
Or you can control them individually
-
7/27/2019 HTML Chapter 3-Css
62/89
5. Styling Lists
List Sty le Image You can use an image for the bullet of unordered lists with the list-style
property
list-style-image: url(path to image file);
If you use an image, it is a good idea to declare the list-style-type also in
case the user has images turned off.
List Sty le Posit io n
You can control the position of ordered and unordered lists with the list-style-position property
list-style-position: value;
Values
inside
outside
-
7/27/2019 HTML Chapter 3-Css
63/89
5. Styling Lists
Lis t Style Type You can control the type of bullet ordered and unordered lists use with the list-style-
type property
list-style-type: value;
Values
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
armenian
Georgian
S
-
7/27/2019 HTML Chapter 3-Css
64/89
6. Styling Tables
Table Bo rders To specify table borders in CSS, use the border
property.
The example below specifies a black border for table,
th, and td elements:table, th, td{border: 1px solid black;
}
Notice that the table in the example above has doubleborders.
This is because both the table, th, and td elementshave separate borders.
6 S li T bl
-
7/27/2019 HTML Chapter 3-Css
65/89
6. Styling Tables
Col lapse B orders
The border-collapse property sets whether the table
borders are collapsed into a single border or separated:
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;}
6 St li T bl
-
7/27/2019 HTML Chapter 3-Css
66/89
6. Styling Tables
Table Text Alignment The text in a table is aligned with the text-align and vertical-align
properties.
The text-align property sets the horizontal alignment, like left, right,or center:
td{text-align:right;
}
The vertical-align property sets the vertical alignment, like top,bottom, or middle:
td {
height:50px;
vertical-align:bottom;
}
6 St li T bl
-
7/27/2019 HTML Chapter 3-Css
67/89
6. Styling Tables
Table Width and Heigh t
Width and height of a table is defined by the width and
height properties.
The example below sets the width of the table to 100%,
and the height of the th elements to 50px:
table{
width:100%;
}
th{
height:50px;
}
6 St li T bl
-
7/27/2019 HTML Chapter 3-Css
68/89
6. Styling Tables
Table Padd ing To control the space between the border and content in a table, use the
padding property on td and th elements:
td{padding:15px;
}
Table Colo r
The color of the borders, and the text and background color of th elementscan be specified:
table, td, th{
border:1px solid green;}
th{
background-color:green;
color:white;
}
6 CSS C
-
7/27/2019 HTML Chapter 3-Css
69/89
6. CSS Class
Controlling the way all HTML elements look canbe useful, but also limiting.
It's excellent to be able to change every
paragraph, table cell or image with one line ofCSS code
But sometimes you'll want to change only few
paragraphs or images, not all of them.
You can add CSS code through the style attributeof each element, but for more elements that
method gets too complicated.
6 CSS Cl
-
7/27/2019 HTML Chapter 3-Css
70/89
6. CSS Class
For example, paragraph can be defined in CSSfile as follows:
p {
font-size: small;
color: #333333}
However, lets say you want to change the word"sentence"in the paragraph formatted by theabove CSS to green bold text, while leaving therest of the sentence untouched.
This can be done by using class.
6 CSS Cl
-
7/27/2019 HTML Chapter 3-Css
71/89
6. CSS Class
There are two types of classes: generic classes that can be applied to any element, and
classes that can be applied only to a certain type of HTMLelement.
I. Generic Classes Their selector starts with a dot (.), which states that it is a
class.
You can name it anything you like:
.important { background-color: #FFFFDE; }
.emphasis { font-family: Verdana; }
.boooring { color: Gray; }
To apply a class to a certain HTML element, use its classattribute where you state the class name without the dot.
6 CSS Cl
-
7/27/2019 HTML Chapter 3-Css
72/89
6. CSS Class
The big match today This sentence looks boring
II. Specific Classes
You can also use classes which can be applied only to certain
HTML elements. Selectors of these classes start with the HTML element
name, followed with the dot and the class name:
div.big { font-weight: bold; font-size: 16pt; }
These classes can be applied only to a specified HTMLelement, in this case a DIV element.
Big bold text.
Normal text - class notapplied.
6 CSS Cl
-
7/27/2019 HTML Chapter 3-Css
73/89
6. CSS Class
Example: in your paragraph, you put this:
sentence
Then in the CSS file, add this style selector:
.greenboldtext {
font-size: small;
color: #008080;
font-weight: bold;
}
P d Cl
-
7/27/2019 HTML Chapter 3-Css
74/89
Pseudo Classes
Pseudo-classes are classes that define tagstates.
Most commonly, these are used to make link
styles change when the mouse pointer hoversover a hyperlink, hyperlink is clicked, etc.
Pseudo class Link state
a:link Normal link
a:visited Already visited link
a:hover Mouse hovers the link
a:active User is clicking on the link
P d Cl
-
7/27/2019 HTML Chapter 3-Css
75/89
Pseudo Classes
Example:a:link {
text-decoration: underline;
font-weight: normal;
color: #003300;}
a:visited {
text-decoration: underline;
font-weight: normal;color: #999999;
}
CSS ID
-
7/27/2019 HTML Chapter 3-Css
76/89
CSS ID
IDs are similar to classes, except once a specific ID has been declared itcannot be used again within the same (X)HTML file.
The syntax of ID selectors is very similar to classes, but instead of a dotyou must use a hash sign (#).
The HTML content is:
I was asleep, but my heart was awake.
The CSS that formats the HTML content:
#container{
width: 80%;
padding: 20px;margin: auto;
border: 1px solid blue;
background: red;
}
7 CSS Bo Model
-
7/27/2019 HTML Chapter 3-Css
77/89
7. CSS Box Model
In CSS, the term box modelis used whentalking about design and layout.
The CSS box model is essentially a box that
wraps around HTML elements, and it consistsof: margins, borders, padding, and the actual
content.
The box model allows us to place a borderaround elements and space elements in relation
to other elements.
The image below illustrates the box model.
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
78/89
7. CSS Box Model
Explanation of the different parts:
Margin - Clears an area around the border.
The margin does not have a background color, and it is completelytransparent
Border - A border that lies around the padding and content.
The border is affected by the background color of the box
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
79/89
7. CSS Box Model
Padding - Clears an area around the content.
The padding is affected by the background color of the
box
Content - The content of the box, where text and imagesappear
In order to set the width and height of an element
correctly in all browsers, you need to know how the boxmodel works.
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
80/89
7. CSS Box Model
Border You can set the color, style and width of the
borders around an element in one declaration byusing the shorthand border property.
border: 1px solid #333333;
Values: width
style
color
Or you can set each property individually
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
81/89
7. CSS Box Model
Bo rder Color You can set the color of a border
independently with the border-color property.
border-color: value; Values:
color name
hexadecimal numberRGB color code
transparent
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
82/89
7. CSS Box Model
Bord er Style You can set the style of a border independently with the border-style
property.
border-style: value;
Values: dashed
dotted
double
groove
hidden
inset none
outset
ridge
solid
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
83/89
7. CSS Box Model
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
84/89
7. CSS Box Model
Bo rder Width You can set the width of a border independently with
the border-width property.
border-width: value;
Values: Length
Thin
Medium
Thick
Or you can set the elements for each borders sideindividually
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
85/89
7. CSS Box Model
Border Bot tom You can set the color, style and width of the bottom border around an element in one
declaration with the border-bottom property.
border-bottom: 1px solid #333333;
Values:
Width
style
color
Or you can set each value individually
Border Bot tom Color
You can set the color of the bottom border around an element with the border-
bottom-color property.border-bottom-color: value;
You can set the style of the bottom border around an element with the border-bottom-style property:
border-bottom-style: value;
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
86/89
7. CSS Box Model
Border Bot tom Width You can set the width of the bottom border around an element with the
border-bottom-width property.
border-bottom-width: value;
Border L eft
You can set the color, style and width of the left border around an elementwith the border-left property.
border-left: 1px solid #333333;
Values:
style
Width color
Or you can set each value individually
7 CSS Box Model
-
7/27/2019 HTML Chapter 3-Css
87/89
7. CSS Box Model
Border Lef t Color
border-left-color: value;
Bo rder Left Sty le
border-left-style: value;
Border Lef t Width
border-left-width: value;
Border Right
border-right: 1px solid #333333;
Values: color
style
width
Or you can set each value individually
7. CSS Box Model: CSS
-
7/27/2019 HTML Chapter 3-Css
88/89
MarginProperty Description Values
Margin A shorthand property for
setting the margin properties in
one declaration
margin-top
margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an
element
auto
length
%
margin-left Sets the left margin of an
element
auto
length
%
margin-right Sets the right margin of an
element
auto
length
%
margin-top Sets the top margin of an
element
auto
length
%
7. CSS Box Model: CSS
-
7/27/2019 HTML Chapter 3-Css
89/89
Padding
Property Description Values
Padding A shorthand property for setting
all the padding properties in one
declaration
padding-top
padding-right
padding-bottom
padding-left
padding-bottom Sets the bottom padding of an
element
length
%
padding-left Sets the left padding of an
element
length
%
padding-right Sets the right padding of an
element
length
%padding-top Sets the top padding of an
element
length
%