Internet programming I
Chapter 3: CSS(Cascading Style Sheet)
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple
web pages all at once
External stylesheets are stored in CSS files
CSS files have .css file extension
2
CSS Syntax
A CSS rule consists of a selector and a declaration block.
Example: CSS HTML
p{ <!DOCTYPE html>
color: red; <html>
<head>
text-align: center;
<title>Page Title</title>
} </head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Example Explained:
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value 3
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want
to style.
The CSS element Selector:
The element selector selects HTML elements based on the element
name.
Example: Here, all <p> elements on the page will be center-aligned, with
a red text color:
p{
text-align: center;
color: red;
}
The CSS id Selector:
The id selector uses the id attribute of an HTML element to select
a specific element.
Example:
#para1 {
text-align:center;
color: red;
} 4
Cont’d
The CSS class Selector:
The class selector selects HTML elements with a specific class attribute.
Example:
.center {
text-align: center;
color: red;
}
The CSS Universal Selector:
The universal selector (*) selects all HTML elements on the page.
Example:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector:
The grouping selector selects all the HTML elements with the same style
definitions.
Example:
h1, h2, p {
text-align: center;
color: red;
}
5
How to add CSS
Three Ways to Insert CSS:
1. External CSS
2. Internal CSS
3. Inline CSS
1. Inline CSS:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
6
</html>
Cont’d
2. Internal CSS:
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example:
<!DOCTYPE html>
<html><head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
7
Cont’d
3. ExternalCSS:
With an external style sheet, you can change the look of an entire
website by changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
Example:
<!DOCTYPE html>
<html>
<head> "[Link]"
<link rel="stylesheet" href="[Link]"> body {
</head>
background-color: lightblue;
<body>
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p> h1 {
color: navy;
</body> margin-left: 20px;
</html> }
8
CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /*
and ends with */.
Example:
/* This is a single-line comment */
p{
color: red;
}
9
CSS Colors
1. CSS Background Color:
– You can set the background color for HTML elements:
– Example:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
2. CSS Text Color:
– You can set the color of text.
– Example:
<h1 style="color:Tomato;">Hello World</h1>
3. CSS Border Color:
– You can set the color of borders
– Example:
<h1 style="border:2px solid Tomato;">Hello World</h1>
NB: We can set color by using three methods(name, hex code and
decimal(RGB))
10
CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)
Example:
div {
background-color: green; Repeat a background-image only vertically:
opacity: 0.3;
}
body {
background-image: url("[Link]");
background-repeat: repeat-y;
background-attachment: fixed;
}
11
CSS Borders
The CSS border properties allow you to specify the style, width, and color
of an element's border.
The border-style property specifies what kind of border to display.
The following values are allowed:
Dotted, dashed, solid, double, groove, ridge, inset, outset, none and
hidden
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
Example:
[Link] {
border-style: dotted dashed solid double;
}
12
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
There are properties for setting the margin for each side of an element
(top, right, bottom, and left).
Example
p{
margin-top: 100px;
margin-bottom: 100px; Shorthand property:
margin-right: 150px; p{
margin-left: 80px; margin: 25px 50px 75px 100px;
} }
13
CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
With CSS, you have full control over the padding.
There are properties for setting the padding for each side of an element
(top, right, bottom, and left).
Example: Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
div {
padding: 25px 50px 75px 100px;
}
14
CSS Height and Width
The CSS height and width properties are used to set the height and
width of an element.
The CSS max-width property is used to set the maximum width of an
element.
CSS height and width Possible values:
•Auto, length, %, initial, inherit
– auto - This is default. The browser calculates the height and width
– length - Defines the height/width in px, cm, etc.
– % - Defines the height/width in percent of the containing block
– initial - Sets the height/width to its default value
– inherit - The height/width will be inherited from its parent value
Example
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
15
The CSS Box Model
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.
16
Cont’d
CSS box model consists of: margins, borders, padding, and
the actual content.
Example
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
17
CSS Outline
An outline is a line drawn outside the element's border to make
the element "stand out".
the element's total width and height is not affected by the width
of the outline.
CSS has the following outline properties:
•outline-style:
Values Dotted, dashed, solid, double,
groove, ridge, inset, outset, none and
hidden
•outline-color:
Name, hex value, RGB
•outline-width:
Values thin (typically 1px), medium (typically 3px)/, thick
(typically 5px) and A specific size (in px, pt, cm, em, etc)
•outline-offset
property adds space between an outline and the edge/border of
an element.
18
Cont’d
Outline Example:
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
•Shorthand property
•outline-width
•outline-style
•outline-color
Example:
P{
outline: thick ridge pink;
}
19
CSS Text
Text Color
– Text Color and Background Color
Text Alignment
– A text can be left or right aligned, centered, or justified
Text Decoration
– The decoration can be Overline, line-through and underline
Text Transformation
– Uppercase, lowercase and capitalize
Text Spacing
– Text Indentation, Letter Spacing, Line Height, Word Spacing
Text Shadow
– horizontal shadow (2px), the vertical shadow (2px) and color
20
Cont’d
Example:
Div {
text-shadow: 2px 2px red;
word-spacing: 10px;
text-transform: capitalize;
text-decoration: overline;
text-align: justify;
background-color: lightgrey;
}
21
CSS Fonts
Choosing the right font has a huge impact on how
the readers experience a website.
The right font can create a strong identity for
your brand.
Using a font that is easy to read is important.
The font adds value to your text. It is also
important to choose the correct color and text
size for the font.
22
Cont’d
Font family:
23
Cont’d
Font Style: This property has three values:
– Normal, italic and oblique
Font Size
– Setting the text size with pixels gives you full control
over the text size:
Example:
Div {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 30px;
}
24
CSS link(Navigation bars)
Styling Links
– Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
Link State
– links can be styled differently depending on what state they are in.
•a:link - a normal, unvisited link
•a:visited - a link the user has visited
•a:hover - a link when the user mouses over it
•a:active - a link the moment it is clicked
Example:
a {
color: hotpink;
}
a:link {
background-color: yellow;
}
a:hover {
text-decoration: underline;
}
25
CSS Lists
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
Different List Item Markers
– list-style-type
• Values: circle, square, upper-roman, lower-alpha
– list-style-image:
• Values: url('[Link]');
– Position The List Item Markers
• Values: outside; inside
List - Shorthand property
– It is used to set all the list properties in one declaration:
26
Cont’d
Example1: color
<style>
ol {
background: #ff9999;
padding: 20px;
}
Example2: Shorthand property
ul { ul {
background: #3399ff; list-style: square inside
padding: 20px;
} url("[Link]");
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
</style> 27
CSS Tables
Table Item Markers
– Table Borders
• To specify table borders in CSS, use the border property.
• Example: table, th, td {
border: 1px solid;}
– CSS Table Size defined by
• the width and height properties
– CSS Table Alignment
• Horizontal Alignment and Vertical Alignment
– CSS Table Style
• Table Padding, Table Color
Example
th, td {
padding: 15px;
text-align: left;
} 28
CSS Overflow
The overflow property specifies whether to clip the content or to add
scrollbars when the content of an element is too big to fit in the
specified area.
The overflow property has the following values
– visible - Default. The overflow is not clipped. The content renders outside
the element's box
– hidden - The overflow is clipped, and the rest of the content will be
invisible
– scroll - The overflow is clipped, and a scrollbar is added to see the rest of
the content
– auto - Similar to scroll, but it adds scrollbars only when necessary
Example
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
29
CSS dropdown menu
30
Cont’d
31
Floating in css
Floating
The float property moves an element as far as possible to the left or
right, allowing the following content to wrap around it.
float
Values: left | right | none | inherit
Default: none
Applies to: all elements
Inherits: no
32
Cont’d
E.g
33
Floating an inline text element
34
Floating block elements
35
Floating multiple elements
36
Clearing floated elements
Applying the clear property to an element prevents it from
appearing next to a floated element, and forces it to start
against the next available “clear” space below the float.
clear
Values: left | right | both | none | inherit
Default: none
Applies to: block-level elements only
Inherits: no
37
Cont’d
eg
38
Page layout with css
Page Layout Strategies
• Three general page layouts
o Liquid pages resize along with the browser window.
o Fixed pages put the content in a page area that stays a specific pixel
width regardless of the browser’s dimensions.
o elastic pages have areas that get larger or smaller when the text is
resized.
39
Liquid page design
the page area and/or columns within the page are allowed to get wider
or narrower to fill the available space in the browser window.
40
How to create liquid layouts
Create a liquid layout by specifying widths in percentage
values.
41
Cont’d
E.g. Liquid layout combining fixed-width and auto sized columns
42
Fixed Layouts
stay put at a specified pixel width as determined by the designer.
o Fixed-width layouts are created by specifying width values in pixel
units
Most fixed-width web pages are designed to fit in an 800x600 pixel
browser window,
Careful - if the user’s browser window is not as wide as the page, the
content on the right edge of the page will not be visible.
43
How to create fixed-width layouts
the entire page is put into a div (often named “content,” “container,”
“wrapper,” or “page”) that can then be set to a specific pixel width.
200 255
44
Elastic Layouts
Elastic layouts expand or contract with the size of the text.
This is an advantage over
o liquid layouts where line lengths can get too long, and
o fixed layouts where very large text may result in awkwardly few
characters per line.
45
How to create elastic layouts
The key to elastic layouts is the em,
In elastic layouts, the dimensions of containing elements are specified
in ems as well.
46
Page Layout Templates
templates and techniques for the following:
o Multicolumn layouts using floats (two- and three-column)
o Multicolumn layouts using positioning (two- and three-column, with
and without footer)
o A centered fixed width page
47
Multicolumn Layouts Using Floats
#header { background: #CCC;
padding: 15px; }
#main { background-color: aqua;
float: left; /* floats the whole main article to the left */
width: 60%;
margin-right: 5%; /* adds space between columns */
margin-left: 5%; }
#footer { clear: left; /* starts the footer below the floated content */
padding: 15px;
background: #ccc; }
#extras { margin-right: 5%} /* space on the right of the side column */
body { font-family: verdana, sans-serif; <body>
margin: 0; /* clears default browser margins */ <div id="header">
Masthead and headline
padding: 0; } </div>
li { list-style: none; <div id="main">
margin: 10px 0; } Main article...
</div>
<div id="extras">
List of links and news
</div>
<div id="footer">
Copyright information
</div>
48
Cont’d
49
Three-column with footer
Method: FLOAT
Layout: FIXED
The Style Sheet Body content
#container { #footer {
width: 750px; clear: both; /* starts the footer
<div id="container">
border: solid 1px; } below the floated content */ <div id="header">
#header { padding: 15px; Masthead and headline
background: #CCC; background: #CCC; } </div>
padding: 15px; } body { <div id="links">
#links { font-family: verdana, sans-serif; List of links
background-color: fuchsia; font-size: small;
float: left;
</div>
margin: 0;
width: 175px; } <div id="main">
padding: 0;}
#main { h2, ul, p { Main article...
background-color: aqua; padding: 0px 8px; } /* adds </div>
float: left; space around content */ <div id="news">
width: 400px; } li { News and
#news { list-style: none; announcements...
background-color: green; margin: 10px 0; } </div>
float: left;
width: 175px; }
<div id="footer">
Copyright information
</div>
</div>
50
Cont’d
51
Layouts Using Absolute Positioning
The advantage is that the order of the source document is not as
critical as it is in the float method, because element boxes can be
positioned anywhere.
The disadvantage is that you run the risk of elements overlapping and
content being obscured. This makes it tricky to implement full-width
elements below columns (such as the footer in the previous example),
because it will get overlapped if a positioned column grows too long.
52
Two-column with narrow footer
Method: POSITIONED
Layout: LIQUID
The Style Sheet
#header {height: 70px;
padding: 15px; /* height of header = 100 (15+70+15) */
background: #CCC;} The Markup
#main {margin-right: 30%; /* makes room for the positioned
sidebar */ <div id="header">
margin-left: 5%; }
#extras {position: absolute; Masthead and headline
top: 100px; /* places the extras div below the header */ </div>
right: 0px; /* places it against right edge of the window */ <div id="main">
width: 25%;
background: green;
Main article...
padding: 10px;} /* adds space within colored box */ </div>
#footer {margin-right: 30%; /* keeps the footer aligned with content A <div id="extras">
*/ List of links and news
margin-left: 5%;
padding: 15px; </div>
background: #666; } <div id="footer">
body {font-family: verdana, sans-serif; Copyright information
font-size: small;
margin: 0;
</div>
padding: 0;}
ul { padding: 0px; }
li {list-style: none;
margin: 10px 0; }
53
Cont’d
54
CSS Forms
Styling Input Fields
– Selectors: input[type=text], input[type=password], input[type=number]…
• Properties: color, width, background-color, padding, border
Example:
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
55
???
56
