Introduction To CSS - 060312

Introduction
to CSS
Introduction
• CSS is a style sheet language used to
describe the presentation of a document
written in a mark up language.
• A style sheet is an addition to HTML that
allows you to separate display properties
from structure.
• CSS describes the appearance, layout, and
presentation of information on a web page.
© K.S. Mbise CSS Slide 2

Introduction cont…
• CSS describes how information is
displayed, not what is displayed.
• CSS can be embedded in HTML document
or placed into separate file which all HTML
pages on your entire site can link to.
• Separation of content and style has several
advantages such as speed, uniformity of
web pages, maintainability, accessibility,
etc.
Roles of style sheets in Web
• Style sheets change background color
or images as per particular actions
• With style sheets, links can change
colours, and formats like underlining,
italicizing, etc.
• Style sheets let you place things
exactly where you want them to be on
the web page.
Syntax of CSS
selector {
property: value;
}
• selector is a tag which we are defining;
• property is an attribute;

Syntax of CSS cont…
• value specifies how a selector should
be displayed.
• {
property: value;
} is a definition of the selector.
• E.g. h1 {
font-size: 12px;
}

• The property and value are separated
by a colon (:) and surrounded by curly
braces ({})
• If the value consists of multiple words,
it should be with quotes (single or
double) around it:
• E.g. p {
font-family:"Times New Roman"
© K.S. Mbise
}
CSS Slide 8
• If there is more than one property,
each property should be separated
with a semi-colon (;)
• E.g. p {
text-align: center;
color: maroon;
}
CSS comments
• Comments are used to explain the
code, and may help when you want to
edit the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment starts with /* and
ends with */.
• Comments can also span multiple
lines:
CSS Comments cont…
p{
color: red;
/* This is a multiple-line
comment */
text-align: center;
}

Grouping selectors
• You can apply the same declaration to
a group of selectors by listing all of the
desired selector names separated by
commas.
• Example:
h1, h2, h3, h4, h5, h6 {
color:#ff0000;
font-family:sans-serif}
Grouping selectors cont...
• p, table, li {font-family: verdana;
margin-left: 10pt}
• ul {list-style: disc}
• ol {list-style: decimal}
• p,li,th,td {font-size: 75%}
• body {background-color: #ffffff}
• h1,h2,h3,hr {color:black}
Writing css
• Style definition can be placed in a web
page in three ways:
i. Inline style – uses style attribute
ii. Embedded style – uses <style>
tag
iii. External style – uses separate
CSS file and links the file to HTML
document using <link> tag
Inline style sheets
• Inline style – applied to individual tags
in the body section of the page by
using the style attribute within the tags
themselves.
• e.g. <p style= "font-size:18pt; font-
style: italic;">Text </p>

Inline style sheets cont…
• <p> This text does not have any style
applied to it.</p>
• <p style = "font-size: 20px; color:
#6666ff;"> This text has the font-size
and color styles applied to it, making it
20px and light blue. </p>

Embedded style sheets
• An embedded style sheet – is a set of
styles enclosed by set of style tags.
• The style tag is head element, and it
should be written in the head section
of HTML document.
• E.g. <style type="text/css"> style
sheet properties</style>

Embedded style sheets cont…
<html>
<head>
<title> Embedded CSS </title>
<style type="text/css">
h1 {
font-size: large;
color: red;
}
h2 {
font-size: x-large;
color: blue;
}
</style>
</head>

<body>
<h1> Hello world!</h1>
<h2> Hi there! </h2>
<h1> This is just a demo</h1>
</body>
</html>

External style sheets
• An external style sheet – can enclose a
style list in a separate style sheet file
which is linked to the head section.
• This CSS file is linked to HTML
document using <link> tag.
• E.g., <link href="filename.css"
rel="stylesheet" type="text/css"/>

Creating css file
p.special {
color : green;
border: solid blue;
}
• Let's save these codes in a file with a
name style.css

Importing css codes to HTML
<html>
<head>
<link href="style.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
/* example continues on the next slide */
Importing css cont...
<p class="special"> This paragraph
should have special green text. </p>
<p> This paragraph should have no any
effect. <p>
</body>
</html>

CSS id selector
• CSS also allows you to specify your own
selectors called "id" and "class".
• The id selector is used to specify a style for
a single, unique element.
• The id selector uses the id attribute of the
HTML element, and is defined with a "#".
• The style rule in example on next slide will
be applied to the element with id="para1":

CSS id selector cont...
<html>
<head>
#para1 {
text-align:center;
color:red;
}
</style>
head>
CSS id selector cont...
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>

CSS class selector
• The class selector is used to specify a
style for a group of elements.
• Unlike the id selector, the class selector
is most often used on several
elements.
• This allows you to set a particular style
for many HTML elements with the
same class.
CSS class selector cont...
• The class selector uses the HTML
class attribute, and is defined with
a dot "."
• In next example, all HTML
elements with class="center" will
be center-aligned:

<html>
<head>
.center {
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned
paragraph.</p>
</body>
</html>
• You can also specify that only specific
HTML elements should be affected by
a class.
• In next example, all p elements with
class="center" will be center-aligned:
p.center {
text-align:center;
}
CSS background attribute
• CSS background properties are used to
define the background effects of an
element.
• CSS properties used for background effects
are:
• background-color – specifies the
background color of an element
• background-image – sets the background
image for an element
CSS background cont...
• background-repeat – sets if/how a
background image will be repeated
• background-attachment – sets whether
a background image is fixed or scrolls
with the rest of the page
• background-position – sets the starting
position of a background image i.e.,
left top, center etc.
Background image
• The background-image property
specifies an image to use as the
background of an element.
• E.g element<img
src="/images/stories/flash_new.gif">
• By default, the image is repeated so it
covers the entire element.

Background image cont…
• By default, the background-image
property repeats an image both
horizontally and vertically.
• Some images should be repeated only
horizontally or vertically, or they will
look strange.

Background image cont…
body {
background-image:url(logo.png);
background-repeat:repeat-x;
background-repeat:no-repeat;
background-position:right top;
background-attachment: scroll;
}
Background color
• The background-color property specifies
the background color of an element.
• The background color can be specified
by:
• Name – a color name, like "red";
• RGB – an RGB value, like "rgb(255,0,0)";
• Hex – a hex value, like "#ff0000".
• E.g., body {background-color:#b0c4de;}
CSS text
• Text color – used to set the color of the
text. (name, RGB and Hex)
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
• Text alignment – used to set the
horizontal alignment of a text
E.g., p.main {text-align:justify;}
CSS text cont...
• Text decoration – used to set or
remove decorations from text.
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
h4{text-decoration:blink;}

CSS text cont...
• Text transformation – used to specify
uppercase and lowercase letters in a text.
• E.g.,
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}
• Text indentation – used to specify the
indentation of the first line of a text
• E.g., p {text-indent:50px;}

CSS font
• CSS font properties define the font
family, weight, size, variant and the
style of a text.
• 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")
CSS font cont...
• 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.
• If the name of a font family is more than
one word, it must be in quotation marks, like
font-family: "Times New Roman“
• E.g., p{font-family:"Times New Roman",
Times, serif;}
CSS font cont...
• Font style – specifies the font style for
a text.
p{font-style:normal;}
h1{font-style:italic;}
h1{font-style:bold;}
h2{font-style:oblique;
• Font size – sets the size of the text.
• Set font size with pixels
CSS font cont...
• Setting the text size with pixels, gives
you full control over the text size
• E.g., h1 {font-size:40px;}
• If you do not specify a font size, the
default size for normal text, like
paragraphs, is 16px
• Generally, 1em = 12pt = 16px =
100%.
Styling links
• Links can be styled with any CSS
property (e.g. color, font-family,
background, text-decoration, text-
align, etc.).
• Links can be styled differently
depending on what state the links are
in.

Styling links cont…
• The four link states are:
• a:link – a normal, unvisited link
• a:visited – a link the user has visited
• a:hover – a link when the user
hovers over it
• a:active – a link the moment it is
clicked
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}

a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}

Thank you for listening.

Introduction To CSS - 060312

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To CSS - 060312

Uploaded by

Copyright:

Available Formats

Introduction

© K.S. Mbise CSS Slide 2

© K.S. Mbise CSS Slide 5

© K.S. Mbise CSS Slide 7

© K.S. Mbise CSS Slide 11

© K.S. Mbise CSS Slide 15

© K.S. Mbise CSS Slide 16

© K.S. Mbise CSS Slide 17

© K.S. Mbise CSS Slide 19

© K.S. Mbise CSS Slide 20

© K.S. Mbise CSS Slide 21

© K.S. Mbise CSS Slide 22

© K.S. Mbise CSS Slide 24

© K.S. Mbise CSS Slide 25

© K.S. Mbise CSS Slide 27

© K.S. Mbise CSS Slide 29

© K.S. Mbise CSS Slide 30

© K.S. Mbise CSS Slide 35

© K.S. Mbise CSS Slide 36

© K.S. Mbise CSS Slide 40

© K.S. Mbise CSS Slide 41

© K.S. Mbise CSS Slide 46

© K.S. Mbise CSS Slide 48

© K.S. Mbise CSS Slide 49

© K.S. Mbise CSS Slide 50

You might also like