Web Designing
(KIT-401)
Unit 3
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
Why Use CSS?
CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices
and screen sizes.
CSS Saves a Lot of Work!
• The style definitions are normally saved in
external .css files.
• With an external stylesheet file, you can
change the look of an entire website by
changing just one file!
Advantages of CSS
• CSS saves time - You can write CSS once and
then reuse same sheet in multiple HTML
pages.
• Pages load faster - Just write one CSS rule of a
tag and apply to all the occurrences of that
tag.
• Easy maintenance -simply change the style,
and all elements in all the web pages will be
updated automatically.
• Superior styles to HTML - CSS has a much
wider array of attributes than HTML.
• Multiple Device Compatibility - Style sheets
allow content to be optimized for more than
one type of device.
• Global web standards - Now HTML attributes
are being deprecated and it is being
recommended to use CSS.
Who Creates and Maintains CSS?
• CSS is created and maintained through a
group of people within the W3C called the CSS
Working Group.
NOTE: The World Wide Web Consortium, or
W3C is a group that makes recommendations
about how the Internet works and how it
should evolve
CSS Versions
• Cascading Style Sheets, level 1 (CSS1) was
came out of W3C as a recommendation in
December 1996.
• CSS2 was became a W3C recommendation in
May 1998 and builds on CSS1.
• The earliest CSS 3 drafts were published in
June 1999.
CSS Syntax – Selectors
A CSS comprises of style rules that are interpreted
by the browser and then applied to the
corresponding elements in your document. A
style rule is made of three parts:
• Selector: A selector is an HTML tag at which style
will be applied. This could be any tag like <h1> or
<table> etc.
• Property: A property is a type of attribute of
HTML tag. Put simply, all the HTML attributes are
converted into CSS properties. They could
be color or border etc.
• Value: Values are assigned to properties. For
example color property can have value
either red or #F1F1F1 etc.
selector { property: value }
Example: You can define a table border as
follows:
table{ border :1px}
CSS Comments
Comments are used to explain the code,
and may help when you edit the source
code at a later date.
A CSS comment starts with /* and ends
with */. Comments can also span multiple
lines.
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
CSS Inclusion - Associating Styles
There are four ways to associate styles with your
HTML document. Most commonly used
methods are inline CSS and External CSS.
Embedded CSS
Inline CSS
External CSS
Imported CSS
Embedded CSS
• You can put your CSS rules into an HTML
document using the <style> element. This tag is
placed inside <head>...</head> tags.
Syntax:
<head>
<style type="text/css”>
Style Rules............
</style>
</head>
Inline CSS
• You can use style attribute of any HTML
element to define style rules. These rules will
be applied to that element only.
• <element style="...style rules....">
<h1 style ="color:#36C;"> This is inline CSS</h1>
External CSS
• The <link> element can be used to include an
external stylesheet file in your HTML
document.
• An external style sheet is a separate text file
with .css extension.
<head><link rel=”stylesheet” type="text/css"
href="...“ ></head>
Imported CSS
• @import is used to import an external
stylesheet in a manner similar to the <link>
element.
<head>
<style>
@import url("[Link]");
</style>
</head>
CSS Selectors
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name,
id, class)
• Combinator selectors (select elements based on a
specific relationship between them)
• Pseudo-class selectors (select elements based on
a certain state)
• Pseudo-elements selectors (select and style a
part of an element)
• Attribute selectors (select elements based on an
attribute or attribute value)
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 Class Selectors
• You can define style rules based on the class
attribute of the elements.
.black { color: #000000; }
<h1 class="black">Hello Welcome </h1>
The ID Selectors
• All the elements having that id will be
formatted according to the defined rule.
#black { color: #000000; }
<h1 id="mycolor">Hello Welcome </h1>
The CSS Universal Selector
The universal selector (*) selects all HTML
elements on the page.
Example
The CSS rule below will affect every HTML
element on the page:
*{
text-align: center;
color: blue;
}
CSS Combinators
A combinator is something that explains the
relationship between the selectors.
There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
The Descendant Selectors
• Suppose you want to apply a style rule to a
particular element only when it lies inside a
particular element.
ul em { color: #000000; }
The Child Selectors
body > p { color: #000000; }
• This rule will render all the paragraphs in black
if they are direct child of <body> element.
Adjacent Sibling Selector
The adjacent sibling selector selects all elements
that are the adjacent siblings of a specified
element.
The following example selects all <p> elements
that are placed immediately after <div>
elements:
Example
div + p {
background-color: yellow;
}
General Sibling Selector
The general sibling selector selects all elements
that are siblings of a specified element.
The following example selects all <p> elements
that are siblings of <div> elements:
Example
div ~ p {
background-color: yellow;
}
Pseudo-classes
A pseudo-class is used to define a special
state of an element.
For example, it can be used to:
• Style an element when a user mouse over it
• Style visited and unvisited links differently
• Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Note: a:hover MUST come after a:link and a:visited in
the CSS definition
in order to be effective! a:active MUST come after
a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes and CSS Classes
<head>
<style>
[Link]:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="[Link]">CSS Syntax</a></p>
<p><a href="[Link]">CSS Tutorial</a></p>
</body>
Hover on <div>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
<div>Mouse Over Me</div>
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):
<style>
p{
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
<div>Hover over me to show the p element
<p>Tada! Here I am!</p>
</div>
The :first-child Pseudo-class
The :first-child pseudo-class matches a specified
element that is the first child of another
element.
p:first-child {
color: blue;
}
The selector matches any <p> element that is
the first child of any element:
Example
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and
earlier, a DOCTYPE must be declared.</p>
CSS :checked Selector
Example
Set the height and width for all checked <input>
elements:
input:checked
{
height: 50px;
width: 50px;
}
CSS :focus Selector
Example
Select and style an input field when it gets focus:
input:focus {
background-color: yellow;
}
CSS :invalid Selector
Example
Select and style only if the value of the <input>
element is invalid:
input:invalid
{
border: 2px solid red;
}
Note: The :invalid selector only works for form
elements with limitations, such as input elements
with min and max attributes, email fields without a
legal email, or number fields without a numeric
value, etc.
<style>
[Link]:link {color:#ff0000;}
[Link]:visited {color:#0000ff;}
[Link]:hover {color:#ffcc00;}
[Link]:link {color:#ff0000;}
[Link]:visited {color:#0000ff;}
[Link]:hover {font-size:150%;}
</style>
<a class="one" href="[Link]" >This link
changes color</a>
<a class="two" href="[Link]">This link
changes font-size</a>
CSS Pseudo-elements
A CSS pseudo-element is used to style
specified parts of an element.
For example, it can be used to:
• Style the first letter, or line, of an
element
• Insert content before, or after, the
content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property:value;
}
Note: The ::first-line pseudo-element can
only be applied to block-level elements.
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a
special effect to the first line of a text. Some more text.
And even more, and more, and more, and more, and
more, and more, and more, and more, and more, and
more, and more, and more.</p>
</body>
The following properties apply to
the ::first-line pseudo-element:
•font properties
•color properties
•background properties
•word-spacing
•letter-spacing
•text-decoration
•vertical-align
•text-transform
•line-height
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
<p>You can use the ::first-letter pseudo-element
to add a special effect to the first character of a
text!</p>
Multiple Pseudo-elements
• p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to
insert some content before the content of an
element.
Example
h1::before {
content: url([Link]);
}
The following example inserts an image before
the content of each <h1> element:
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to
insert some content after the content of an
element.
The following example inserts an image after the
content of each <h1> element:
Example
h1::after {
content: url([Link]);
}
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the
portion of an element that is selected by a user.
The following CSS properties can be applied to
::selection: color, background, cursor, and
outline.
<style>
::selection
{
color: red;
background: yellow;
}
</style>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
Multiple Style Rules
• You may need to define multiple style rules for
a single element.
h1 {color: #36C;
font-weight: normal;
letter-spacing: .4px;
margin-bottom: 1px;
text-transform: lowercase;
}
Grouping Selectors
• You can apply a style to many selectors if you
like.
h1, h2, h3 {color: #36C;font-weight:
normal;letter-spacing: .4em;margin-bottom:
1em;text-transform: lowercase;}
CSS - Measurement Units
CSS - Colors
Colors and backgrounds
color
background-color
background-image
background-repeat
background-attachment
background-position
Background
The color property describes the foreground color of
an element.
h1 {
color: #ff0000;
}
Colors and backgrounds
• The background-color property describes the
background color of elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colors and backgrounds
The CSS property background-image is used to insert a
background image.
body {
background-color: #FFCC66;
background-image: url("[Link]");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Repeat background image
background-repeat: repeat-x
The image is repeated horizontally
background-repeat: repeat-y
The image is repeated vertically
background-repeat: repeat
The image is repeated both horizontally and
vertically
background-repeat: no-repeat
The image is not repeated
body {
background-color: #FFCC66;
background-image: url("[Link]");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-attachment
• The property background-attachment specifies
whether a background picture is fixed or scrolls
along with the containing element.
• Background-attachment: scroll
The image scrolls with the page - unlocked
• Background-attachment: fixed
The image is locked
background-attachment
body {
background-color: #FFCC66;
background-image: url("[Link]");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-position
• By default, a background image will be
positioned in the top left corner of the screen.
• The coordinates can be indicated as percentages
of the browser window, fixed units (pixels,
centimetres, etc.) or you can use the words top,
bottom, center, left and right.
body {
background-color: #FFCC66;
background-image: url("[Link]");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fonts
FONT-FAMILY
FONT-STYLE
FONT-WEIGHT
FONT-SIZE
FONT
Font family
• The property font-family is used to set a
prioritized list of fonts to be used to display a
given element or web page. If the first font on
the list is not installed on the computer used to
access the site, the next font on the list will be
tried until a suitable font is found.
An example
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Font style Font weight
• The property font-style defines the chosen font
either in normal, italic or oblique.
h2 {font-family: "Times New Roman", serif; font-
style: italic;}
• The property font-weight describes how bold or
"heavy" a font should be presented. A font can
either be normal or bold. Some browsers even
support the use of numbers between 100-900
(in hundreds) to describe the weight of a font.
td {font-family: arial, verdana, sans-serif; font-
weight: bold;}
Font size
• The size of a font is set by the property font-size.
• There are many different units (e.g. pixels and
percentages) to choose from to describe font
sizes. In this tutorial we will focus on the most
common and appropriate units.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Font
• Using the font short hand property it is possible to cover
all the different font properties in one single property.
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Using the short hand property, the code can be simplified:
p{
font: italic bold 30px arial, sans-serif;
}
Text
CSS gives you to add layout to text.
The following properties will be described:
text-align
text-decoration
letter-spacing
text-transform
Text alignment
• The CSS property text-align corresponds to the
attribute align used in old versions of HTML.
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Text decoration
• The property text-decoration makes it is possible to add
different "decorations" or "effects" to text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Letter space
• The spacing between text characters can be
specified using the property letter-spacing.
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Text transformation
• The text-transform property controls the capitalization of
a [Link] are four possible values for text-transform:
capitalize
• Capitalizes the first letter of each word. For example:
"john doe" will be "John Doe".
uppercase
• Converts all letters to uppercase. For example: "john doe"
will be "JOHN DOE".
lowercase
• Converts all letters to lowercase. For example: "JOHN
DOE" will be "john doe".
none
• No transformations - the text is presented as it appears in
the HTML code.
CSS Width
• The CSS width property is used to set the width of
the content area of an element.
• It does not include padding borders or margins. It
sets width of the area inside the padding, border,
and margin of the element.
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
width: auto;
}
[Link] {
width: 50%;
}
[Link] {
width: 10%;
}
</style>
</head>
<body>
<img class="normal" src="[Link]" width="95" height="84"><br>
<img class="big" src="[Link]" width="95" height="84"><br>
<img class="small" src="[Link]" width="95" height="84">
</body>
</html>
Margin and Padding
• An element has four sides: right, left, top and
bottom. The margin is the distance from each
side to the neighboring element (or the borders
of the document).
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Padding
• Padding can also be understood as "filling". It
only defines the inner distance between the
border and the content of the element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
Borders
border-width
border-color
border-style
Border-width
• The width of borders is defined by the property
border-width, which can obtain the values thin,
medium, and thick, or a numeric value, indicated
in pixels.
border-style
• The property border-color defines which color
the border has.
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p{
border-width: 1px;
border-style: dashed;
border-color: blue;
}
Floating elements
• An element can be floated to the right or to left
by using the property float. That is to say that
the box with its contents either floats to the
right or to the left in a document.
<div id="picture">
<img src="[Link]" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
#picture {
float:left;
width: 100px;
}
