What is CSS?
CSS is a language
that describes the style of an HTML document.
Hakon Wium Lie
published his first draft of Cascading HTML Style Sheets. In 1994
CSS means for Cascading
Style Sheet.
CSS describes how
HTML elements should be displayed.
CSS Example
body {
margin: 0;
padding: 0;
background: #000
url(‘images/backgrounds/star.png’) no-repeat fixed;
font: 12px
sans-serif;
}
Three ways to insert CSS
Internal style
sheet
External style
sheet
Inline style
Internal style sheet
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
External style sheet
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
Inline style sheet
<h1
style="color:blue;margin-left:30px;">This is a heading</h1>
Cascading order
Generally speaking
we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number one has
the highest priority:
Inline style
(inside an HTML element)
External and
internal style sheets (in the head section)
Browser default
CSS Rules
❑ Selector
❑ Declaration
❑ Property
❑ Value
Selectors
In CSS, a selector is the
HTML element or elements to which a CSS rule is applied. Put simply, the
selector tells the browser what to format.
Declarations
Declarations are enclosed
within curly braces to separate them from selectors. A declaration is the
combination of a CSS property and value
A declaration is a complete
instruction for styling a property of an HTML element.
A declaration always ends
with a semi-colon.
Grouping Selectors
Background color
The background-color property specifies the background color
of an element.
With CSS, a color is most often specified by:
1.
A
valid color name - like "red”
2.
a
HEX value - like "#ff0000“
3.
an
RGB value - like "rgb(255,0,0)"
. In the example below, the <h1>, <p>, and
<div> elements have different background colors:
<style>
h1 { background-color: green;}
div { background-color: lightblue; }
p { background-color: yellow; }
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background
color.</p>
We are still in the div element.
</div>
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.
Background image for a page can be set like this:
<style>
body {
background-image:
url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
Background image-Repeat
<style>
body {
background-image:
url("gradient_bg.png");
background-repeat:
repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a backgound image is repeated only
horizontally!</p>
Background image-No-Repeat
<style>
body {
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right:
200px;
background-attachment: fixed;
}
</style>
CSS Border Properties
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Border 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).
<style>
p.one {
border-style:
solid;
border-width: 5px;
}
p.two {
border-style:
solid;
border-width:
medium;
}
p.three {
border-style:
dotted;
border-width: 2px;
}
p.four {
border-style:
dotted;
border-width:
thick;
}
p.five {
border-style:
double;
border-width:
15px;
}
p.six {
border-style:
double;
border-width:
thick;
}
p.seven {
border-style:
solid;
border-width: 2px
10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four
borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The
"border-width" property does not work if it is used alone.
Always specify the "border-style" property to set
the borders first.</p>
Border Color
<style>
p.one {
border-style:
solid;
border-color: red;
}
p.two {
border-style:
solid;
border-color: green;
}
p.three {
border-style:
solid;
border-color: red
green blue yellow;
}
</style>
Border-Individual Sides
<style>
p {
border-top-style:
dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style:
solid;
}
Border-Shorthand Property
As you can see from the examples above, there are many
properties to consider when dealing with borders.
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
Example
<style>
p {
border-top-style:
dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style:
solid;
}
You can also specify all the individual border properties
for just one side:
<style>
p {
border-left: 6px
solid red;
background-color:
lightgrey;
}
</style>
Bottom Border
<style>
p {
border-bottom: 6px
solid red;
background-color:
lightgrey;
}
Rounded Border
<style>
p.normal {
border: 2px solid
red;
}
p.round1 {
border: 2px solid
red;
border-radius:
5px;
}
p.round2 {
border: 2px solid
red;
border-radius:
8px;
}
</style>
<style>
div {
border: 1px solid
black;
background-color:
lightblue;
}
div.ex1 {
padding: 25px 50px
75px 100px;
}
div.ex2 {
padding: 25px 50px
75px;
}
div.ex3 {
padding: 25px
50px;
}
div.ex4 {
padding: 25px;
}
CSS Margins
The CSS margin properties are used to generate space around
elements.
The margin properties set the size of the white space
outside the border.
With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element (top, right,
bottom, and left).
CSS has properties for specifying the margin for each side
of an element:
margin-top
margin-right
margin-bottom
margin-left
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
Tip: Negative values are allowed.
The following example sets different margins for all four
sides of a <p> element:
<style>
div {
border: 1px solid
black;
margin-top: 100px;
margin-bottom:
100px;
margin-right:
150px;
margin-left: 80px;
background-color:
lightblue;}
</style></head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a
right margin of 150px, a bottom margin of 100px, and a left margin of
80px.</div>
Margin-Shorthand Property
To shorten the code, it is possible to specify all the
margiTo shorten the code, it is possible to specify all the margin properties
in one property.
<style>
div {
border: 1px solid
black;
margin: 100px
150px 100px 80px;
background-color:
lightblue;
}
</style>
</head>
<body>
<h2>Using the margin shorthand property</h2>
<div>This div element has a top margin of 100px, a
right margin of 150px, a bottom margin
The auto Value
You can set the margin property to auto to horizontally
center the element within its container.
div {
width:300px;
margin: auto;
border: 1px solid
red;
}
The inherit Value
div.container {
border: 1px solid
red;
margin-left:
100px;
}
p.one {
margin-left:
inherit;
}
<style>
span {
color: blue;
border: 1px solid
black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is
blue, as span elements are set to be.
</div>
<div class="extra"
style="color:green">
Here is <span>a span element</span> which is
green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is
blue, as span elements are set to be.
</div>
Margin Collapse
h1 {
margin: 0 0 50px
0;
}
h2 {
margin: 20px 0 0
0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin
of 50px and the h2 element has a top margin of 20px. Then, the vertical margin
between h1 and h2 should have been 70px (50px + 20px). However, due to margin
collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
So, here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
If the margin property has two values:
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
If the margin property has one value:
margin: 25px;
all four margins are 25px
Practical
In the example above, the <h1> element has a bottom
margin of 50px. The <h2> element has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin
between the <h1> and the <h2> would be a total of 70px (50px +
20px).
CSS Padding
The CSS padding properties are used to generate space around
content.
The padding clears an area around the content (inside the
border) of an element.
With CSS, you have full control over the padding. There are
CSS properties for setting the padding for each side of an element (top, right,
bottom, and left).
Padding-Individual Sides
CSS has properties for specifying the padding for each side
of an element:
padding-top
padding-right
padding-bottom
padding-left
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
The following example sets different padding for all four
sides of a <p> element:
Example
div {
border: 1px solid
black;
background-color:
lightblue;
padding-top: 50px;
padding-right:
30px;
padding-bottom:
50px;
padding-left:
80px;
}
Padding-Shorthand Property
To shorten the code, it is possible to specify all the
padding properties in one property.
div {
border: 1px solid
black;
background-color:
lightblue;
padding: 50px 30px
50px 80px;
}
So, here is how it works:
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
If the padding property has three values:
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
div {
border: 1px solid
black;
background-color:
lightblue;
}
div.ex1 {
padding: 25px 50px
75px 100px;
}
div.ex2 {
padding: 25px 50px
75px;
}
div.ex3 {
padding: 25px
50px;
}
div.ex4 {
padding: 25px;
}
<body>
<h2>Using the padding shorthand property</h2>
<div class="ex1">This div element has a top
padding of 25px, a right padding of 50px, a bottom padding of 75px and a left
padding of 100px.</div><br>
<div class="ex2">This div element has a top
padding of 25px, a left and right padding of 50px, and a bottom padding of
75px.</div><br>
<div class="ex3">This div element has a top
and bottom padding of 25px, and a left and right padding of
50px.</div><br>
<div class="ex4">This div element has a top,
right, bottom and left paddding of 25px.</div>
</body>
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. The image below illustrates the box model:
xplanation of the different parts:
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
The Box Model
<style>
div {
background-color:
lightgrey;
width: 300px;
border: 25px solid
green;
padding: 25px;
margin: 25px;
}
</style>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that
wraps around every HTML element. It consists of: borders, padding, margins, and
the actual content.</p>
<div>This text is the actual content of the box. We have added a
25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
Calculate the total width:
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid
gray;
margin: 0; }
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg"
width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width
of this element is also 350px.</div>
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Practical
CSS Text
Text Formatting
This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transform, and color properties. The
paragraph is indented, aligned, and the space between characters is specified.
The underline is removed from this colored link.
Text Color
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this
text is blue. The default text color for a page is defined in the body
selector.</p>
<style>
h1 {
text-align:
center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left
and right.</p>
When the text-align property is set to "justify",
each line is stretched so that every line has equal width, and the left and
right margins are straight (like in magazines and newspapers):
<style>
div {
border: 1px solid
black;
padding: 10px;
width: 200px;
height: 200px;
text-align:
justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines
so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me
some advice that I've been turning over in my mind ever since. 'Whenever you
feel like criticizing anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages that you've had.'
</div>
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
<style>
a {
text-decoration:
none;
}
</style>
</head>
<body>
<p>A link with no underline: <a
href="https://www.w3schools.com">W3Schools.com</a></p>
The other text-decoration values are used to decorate text:
<style>
h1 {
text-decoration:
overline;
}
h2 {
text-decoration:
line-through;
}
h3 {
text-decoration:
underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
<style>
p.uppercase {
text-transform:
uppercase;
}
p.lowercase {
text-transform:
lowercase;
}
p.capitalize {
text-transform:
capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some
text.</p>
<p class="lowercase">This is some
text.</p>
<p class="capitalize">This is some
text.</p>
Text Indentation
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>The text-indent CSS property
specifies the amount of indentation (empty space) that is put before lines
of text in a block. By default, this controls the indentation of
only the first formatted line of the block,.'</p>
Letter Spacing
<style>
h1 {
letter-spacing:
3px;
}
h2 {
letter-spacing:
-3px;
}
</style>
</head>
<body>
<h1>The letter-spacing property is used to specify the
space between the characters in a text.</h1>
<h2>This is heading 2</h2>
Line Height
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to
120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
Word Spacing
<style>
h1 {
word-spacing:
10px;
}
h2 {
word-spacing:
-5px;
}
</style>
</head>
<body>
<h1>The word-spacing property is used to specify the
space between the words in a text.</h1>
<h2>This is heading 2</h2>
Text Shadow
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):
<style>
h1 {
text-shadow: 3px
2px red;
}
</style>
</head>
<body>
<h1>The text-shadow property adds shadow to
text.</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier
do not support the text-shadow property.</p>
CSS
Text
Text Formatting
This text is styled with some of the text formatting
properties. The heading uses the text-align, text-transform, and color
properties. The paragraph is indented, aligned, and the space between
characters is specified. The underline is removed from this colored link.
Text
Color
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this
text is blue. The default text color for a page is defined in the body
selector.</p>
<style>
h1 {
text-align:
center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left
and right.</p>
When the text-align property is set to "justify",
each line is stretched so that every line has equal width, and the left and
right margins are straight (like in magazines and newspapers):
<style>
div {
border: 1px solid
black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines
so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me
some advice that I've been turning over in my mind ever since. 'Whenever you
feel like criticizing anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages that you've had.'
</div>
Text
Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
<style>
a {
text-decoration:
none;
}
</style>
</head>
<body>
<p>A link with no underline: <a href="https://www.w3schools.com">W3Schools.com</a></p>
The other text-decoration values are used to decorate text:
<style>
h1 {
text-decoration:
overline;
}
h2 {
text-decoration:
line-through;
}
h3 {
text-decoration:
underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Text
Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
<style>
p.uppercase {
text-transform:
uppercase;
}
p.lowercase {
text-transform:
lowercase;
}
p.capitalize {
text-transform:
capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some
text.</p>
<p class="lowercase">This is some
text.</p>
<p class="capitalize">This is some
text.</p>
Text
Indentation
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>The text-indent CSS property
specifies the amount of indentation (empty space) that is put before
lines of text in a block. By default, this controls the indentation
of only the first formatted line of the block,.'</p>
Letter Spacing
<style>
h1 {
letter-spacing:
3px;
}
h2 {
letter-spacing:
-3px;
}
</style>
</head>
<body>
<h1>The letter-spacing property is used to specify the
space between the characters in a text.</h1>
<h2>This is heading 2</h2>
Line Height
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to
120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
Word Spacing
<style>
h1 {
word-spacing:
10px;
}
h2 {
word-spacing:
-5px;
}
</style>
</head>
<body>
<h1>The word-spacing property is used to specify the
space between the words in a text.</h1>
<h2>This is heading 2</h2>
Text
Shadow
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):
<style>
h1 {
text-shadow: 3px
2px red;
}
</style>
</head>
<body>
<h1>The text-shadow property adds shadow to
text.</h1>
<p><b>Note:</b> Internet Explorer 9 and
earlier do not support the text-shadow property.</p>
Practical
Text Formatting
This text is styled with some of the text formatting
properties. The heading uses the text-align, text-transform, and color
properties. The paragraph is indented, aligned, and the space between
characters is specified. The underline is removed from this colored link.
CSS Fonts
The CSS font properties define the font family, boldness,
size, and the style of a text.
CSS Font Families
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")
Generic family Font family Description Serif Times New Roman
Georgia Serif fonts have small lines at the ends on some
characters Sans-serif Arial
Verdana "Sans" means without - these fonts do not
have the lines at the ends of characters Monospace Courier New
Lucida Console All monospace characters have the same width
Lucida Console All monospace characters have the same width
Font Family
The font family of a text is set with the font-family
property.
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.
Note:
If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".
Font Family
<style>
p.serif {
font-family:
"Times New Roman", Times, serif;
}
p.sansserif {
font-family:
Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown
in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph,
shown in the Arial font.</p>
Font Style
The font-style property is mostly used to specify italic
text.
This property has three values:
1. normal
- The text is shown normally
2. italic
- The text is shown in italics
3. oblique
- The text is "leaning" (oblique is very similar to italic, but less
supported)
Font Style Example
<style>
p.normal {
font-style:
normal;
}
p.italic {
font-style:
italic;
}
p.oblique {
font-style:
oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in
normal style.</p>
<p class="italic">This is a paragraph in
italic style.</p>
<p class="oblique">This is a paragraph in
oblique style.</p>
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web
design. However, you should not use font size adjustments to make paragraphs
look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6>
for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
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:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Note:
If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
Example
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Set Font Size With Em
To allow users to resize the text
(in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by
the W3C.
1em is equal to the current font
size. The default text size in browsers is 16px. So, the default size of 1em is
16px.
The size can be calculated from
pixels to em using this formula: pixels/16=em
Example
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This is heading
1</h1>
<h2>This is heading
2</h2>
<p>This is a
paragraph.</p>
<p>Specifying the font-size
in em allows all major browsers to resize the text.
Unfortunately, there is still a
problem with older versions of IE. When resizing the text, it becomes
larger/smaller than it should.</p>
Use a Combination of Percent and Em
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading
1</h1>
<h2>This is heading
2</h2>
<p>This is a
paragraph.</p>
<p>Specifying the font-size
in percent and em displays the same size in all major browsers, and allows all
browsers to resize the text!</p>
Font Weight
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;}
</style>
</head>
<body>
<p
class="normal">This is a paragraph.</p>
<p
class="light">This is a paragraph.</p>
<p
class="thick">This is a paragraph.</p>
<p
class="thicker">This is a paragraph.</p>
Font Variant
The font-variant property
specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all
lowercase letters are converted to uppercase letters. However, the converted
uppercase letters appears in a smaller font size than the original uppercase
letters in the text.
Example
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My
name is Hege Refsnes.</p>
<p
class="small">My name is Hege Refsnes.</p>
CSS Links
With CSS, links can be styled in
different ways.
Text Link Text Link Link Button
Link Button
Link / Path
Link / Path 2 Types:
Absolute Path/Link
Absolute Path : D:/BASIS/BITM/banner.jpg
Absolute Link : http://bitm.org.bd/uploads/1416831456.jpg
Related Path/Link
Related Path : ../bitm/banner.jpg
Related Link : ../1416831456.jpg
HTML Links - The target Attribute
The target attribute specifies
where to open the linked document.
The target attribute can have one
of the following values:
_blank - Opens the linked document
in a new window or tab
_self - Opens the linked document
in the same window/tab as it was clicked (this is default)
_parent - Opens the linked
document in the parent frame
_top - Opens the linked document
in the full body of the window
framename - Opens the linked
document in a named frame
This example will open the linked
document in a new browser window/tab:
Example
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a
href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
Background Color
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Text Decoration
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Advanced - Link Buttons
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block; }
a:hover, a:active {
background-color: blue;}
</style>
</head>
<body>
<a href="default.asp"
target="_blank">This is a link</a>
CSS Lists
HTML Lists and CSS List Properties
In
HTML, there are two main types of lists:
unordered
lists (<ul>) - the list items are marked with bullets
ordered
lists (<ol>) - the list items are marked with numbers or letters
The
CSS list properties allow you to:
Set
different list item markers for ordered lists
Set
different list item markers for unordered lists
Set
an image as the list item marker
Add
background colors to lists and list items
The(
list-style-type) property specifies the type of list item marker.
<style>
ul.a
{
list-style-type: circle;
}
ul.b
{
list-style-type: square;
}
ol.c
{
list-style-type: upper-roman;
}
ol.d
{
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example
of unordered lists:</p>
<ul
class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul
class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example
of ordered lists:</p>
<ol
class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol
class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
CSS Tables
The
look of an HTML table can be greatly improved with CSS
<style>
table
{
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5
}
</style>
</head>
<body>
<h2>Hoverable
Table</h2>
<p>Move
the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
For
zebra-striped tables, use the nth-child() selector and add a background-color
to all even (or odd) table rows
<style>
table
{
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color:
#f2f2f2}
th
{
background-color: #4CAF50;
color: white;
}
</style>
</div>
<div class="column content">
<h1>The City</h1>
<p>Chania is the capital of the
Chania region on the island of Crete. The city can be divided in two parts, the
old town and the modern city.</p>
<p>You will learn more about web
layout and responsive web pages in a later chapter.</p>
</div>
</div>
<div
class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
CSS Display
The
display property is the most important CSS property for controlling layout.
The
display Property
The
display property specifies if/how an element is displayed.
Every
HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or inline.
Block-level
Elements
A
block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The
<div> element is a block-level element.
Examples
of block-level elements:
<div>
<h1>
- <h6>
<p>
<form>
<header>
<footer>
<section>
Example
<style>
span
{
display: block;
}
</style>
</head>
<body>
<span>A
display property with a value of "block" results in</span>
<span>a line break between the two elements.</span>
Inline Elements
An
inline element does not start on a new line and only takes up as much width as
necessary.
This
is an inline <span> element inside a paragraph.
Examples
of inline elements:
<span>
<a>
<img>
A common example is making inline <li>
elements for horizontal menus:
<style>
li
{
display: inline;
}
</style>
</head>
<body>
<p>Display
a list of links as a horizontal menu:</p>
<ul>
<li><a
href="/html/default.asp"
target="_blank">HTML</a></li>
<li><a href="/css/default.asp"
target="_blank">CSS</a></li>
<li><a
href="/js/default.asp"
target="_blank">JavaScript</a></li>
</ul>
Display:
none;
display:
none; is commonly used with JavaScript to
hide and show elements without deleting and recreating them. Take a look at our
last example on this page if you want to know how this can be achieved.
The
<script> element uses display: none; as default.
Hide
an Element - display:none or visibility:hidden?
<style>
h1.hidden
{
display: none;
}
</style>
</head>
<body>
a
<h1>This
is a visible heading</h1>
<h1
class="hidden">This is a hidden heading</h1>
<p>Notice
that the h1 element with display: none; does not take up any space.</p>
Visibility: hidden;
<style>
h1.hidden
{
visibility: hidden;
}
</style>
</head>
<body>
<h1>This
is a visible heading</h1>
<h1
class="hidden">This is a hidden heading</h1>
<p>Notice
that the hidden heading still takes up space.</p>
CSS Layout - width
and max-width
The
max-width CSS property is used to set the maximum width of
an element.
<style>
div.ex1
{
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2
{
max-width:500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div
class="ex1">This div element has width: 500px;</div>
<br>
<div
class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong>
Drag the browser window to smaller than 500px wide, to see the difference
between
the
two divs!</p>
CSS position
CSS Layout - The position Property
The
position Property
The
position property specifies the type of positioning method used for an element
(static, relative, fixed or absolute).
The
position property specifies the type of positioning method used for an element.
There
are four different position values:
static
relative
fixed
absolute
Elements
are then positioned using the top, bottom, left, and right properties. However,
these properties will not work unless the position property is set first. They
also work differently depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the
top, bottom, left, and right properties.
An element with position: static; is not positioned
in any special way; it is always positioned according to the normal flow of the
page:
This <div> element has position: static;
<style>
div.static {
position:
static;
border:
3px solid #73AD21;
ba
}
</style>
</head>
<body>
<div class="static">
This div element has position: static;
</div>
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.
Here
is the CSS that is used:
<style>
div.relative {
position:
relative;
left:
30px;
border:
3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is
positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
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.
A fixed element does not leave a gap in the page
where it would normally have been located.
The
fixed element in the lower-right corner of the page. Here is the CSS that is
used:
<style>
div.fixed {
position:
fixed;
bottom: 0;
right: 0;
width:
300px;
border:
3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>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:</p>
<div class="fixed">
This div element has position: fixed;
</div>
Position: Absolute;
An element with position: absolute; is positioned relative
to the nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and moves along with page
scrolling.
Note: A "positioned" element is one whose
position is anything except static.
<style>
div.relative {
position:
relative;
width:
400px;
height:
200px;
border:
3px solid #73AD21;}
div.absolute {
position:
absolute;
top: 80px;
right: 0;
width:
200px;
height:
100px;
border:
3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is
positioned relative to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed):</p>
<div class="relative">This div
element has position: relative;
<div
class="absolute">This div element has position:
absolute;</div>
</div>
Overlapping Elements
When elements are positioned, they can overlap other
elements.
The z-index property specifies the stack order of an
element (which element should be placed in front of, or behind, the others).
Example
<style>
img {
position:
absolute;
left: 0px;
top: 0px;
z-index:
-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif"
width="100" height="140">
<p>Because the image has a z-index of -1, it
will be placed behind the text.</p>
CSS Icons
The
simplest way to add an icon to your HTML page, is with an icon library, such as
Font Awesome.
How To Add
Icons
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.)
Font Awesome Icons
To use the Font Awesome icons, add the following
line inside the <head> section of your HTML page:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Note:
No downloading or installation is required!
Font Awesome Icons
To use the Font Awesome icons, add the following
line inside the <head> section of your HTML page:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Note: No downloading or installation is required!
Example
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
<p>Styled Font Awesome icons (size and
color):</p>
<i class="fa fa-cloud"
style="font-size:24px;"></i>
<i class="fa fa-cloud"
style="font-size:36px;"></i>
<i class="fa fa-cloud"
style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud"
style="font-size:60px;color:lightblue;"></i>
Google Icons
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<i
class="material-icons">cloud</i>
<i
class="material-icons">favorite</i>
<i
class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i
class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and
color):</p>
<i class="material-icons"
style="font-size:24px;">cloud</i>
<i class="material-icons"
style="font-size:36px;">cloud</i>
<i class="material-icons"
style="font-size:48px;color:red;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:lightblue;">cloud</i>
CSS Extra
Float
<style>
*
{
box-sizing: border-box;
}
.header,
.footer {
background-color: grey;
color: white;
padding: 15px;
}
.column
{
float: left;
padding: 15px;
}
.clearfix::after
{
content: "";
clear: both;
display: table;
}
.menu
{
width: 25%;
}
.content
{
width: 75%;
}
.menu
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu
li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu
li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div
class="header">
<h1>Chania</h1>
</div>
<div
class="clearfix">
<div class="column menu">
Post a Comment
Post a Comment