Scribd
Upload
19 views

Introduction To CSS - 060312

This document provides an introduction to CSS including its syntax, selectors, properties and how to write CSS rules. It covers topics like inline, embedded and external CSS, id and class selectors, and CSS properties for background, text and more.

Uploaded by

daniloorestmarijani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

Introduction To CSS - 060312

This document provides an introduction to CSS including its syntax, selectors, properties and how to write CSS rules. It covers topics like inline, embedded and external CSS, id and class selectors, and CSS properties for background, text and more.

Uploaded by

daniloorestmarijani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

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.
© K.S. Mbise CSS Slide 3
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.
© K.S. Mbise CSS Slide 4
Syntax of CSS
selector {
property: value;
}
• selector is a tag which we are defining;
• property is an attribute;

© K.S. Mbise CSS Slide 5


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;
}
© K.S. Mbise CSS Slide 6
Syntax of CSS cont…

© K.S. Mbise CSS Slide 7


Syntax of CSS cont…
• 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
Syntax of CSS cont…
• If there is more than one property,
each property should be separated
with a semi-colon (;)
• E.g. p {
text-align: center;
color: maroon;
}
© K.S. Mbise CSS Slide 9
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:
© K.S. Mbise CSS Slide 10
CSS Comments cont…
p{
color: red;
/* This is a multiple-line
comment */
text-align: center;
}

© K.S. Mbise CSS Slide 11


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}
© K.S. Mbise CSS Slide 12
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}
© K.S. Mbise CSS Slide 13
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
© K.S. Mbise CSS Slide 14
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>

© K.S. Mbise CSS Slide 15


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>

© K.S. Mbise CSS Slide 16


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>

© K.S. Mbise CSS Slide 17


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

© K.S. Mbise CSS Slide 19


Embedded style sheets cont…
<body>
<h1> Hello world!</h1>
<h2> Hi there! </h2>
<h1> This is just a demo</h1>
</body>
</html>

© K.S. Mbise CSS Slide 20


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"/>

© K.S. Mbise CSS Slide 21


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

© K.S. Mbise CSS Slide 22


Importing css codes to HTML
<html>
<head>
<link href="style.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
/* example continues on the next slide */
© K.S. Mbise CSS Slide 23
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>

© K.S. Mbise CSS Slide 24


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":

© K.S. Mbise CSS Slide 25


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

© K.S. Mbise CSS Slide 27


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.
© K.S. Mbise CSS Slide 28
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:

© K.S. Mbise CSS Slide 29


CSS class selector cont...
<html>
<head>
<style type="text/css">
.center {
text-align:center;
}
</style>
</head>

© K.S. Mbise CSS Slide 30


CSS class selector cont...
<body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned
paragraph.</p>
</body>
</html>
© K.S. Mbise CSS Slide 31
CSS class selector cont...
• 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;
}
© K.S. Mbise CSS Slide 32
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
© K.S. Mbise CSS Slide 33
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.
© K.S. Mbise CSS Slide 34
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.

© K.S. Mbise CSS Slide 35


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.

© K.S. Mbise CSS Slide 36


Background image cont…
body {
background-image:url(logo.png);
background-repeat:repeat-x;
background-repeat:no-repeat;
background-position:right top;
background-attachment: scroll;
}
© K.S. Mbise CSS Slide 37
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;}
© K.S. Mbise CSS Slide 38
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;}
© K.S. Mbise CSS Slide 39
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;}

© K.S. Mbise CSS Slide 40


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;}

© K.S. Mbise CSS Slide 41


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")
© K.S. Mbise CSS Slide 42
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;}
© K.S. Mbise CSS Slide 43
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
© K.S. Mbise CSS Slide 44
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%.
© K.S. Mbise CSS Slide 45
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.

© K.S. Mbise CSS Slide 46


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
© K.S. Mbise CSS Slide 47
Styling links cont…
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}

© K.S. Mbise CSS Slide 48


Styling links cont…
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}

© K.S. Mbise CSS Slide 49


Thank you for listening.

© K.S. Mbise CSS Slide 50

You might also like