Scribd
Upload
4 views

CSS 2

CSS

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS 2

CSS

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Cascading Style Sheets.

(CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language like HTML
Inline CSS
Within the tags
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Internal CSS
Within HTML using style tag
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
External CSS
Separated file: e.g. style.css
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
HTML page
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href=“style2020.css">
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
background-attachment
CSS Background Properties

• CSS background properties are used to define the background effects of an


element.

CSS Background Properties

Property Description
background Sets all the background properties in one
declaration
background-attachment Sets whether a background image is fixed or
scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated


CSS Background Properties

background-image: url(images.png);
p{background-image: url(“images/bg.jpg”);}

background-position: (left, right, center, top, bottom,


center);

background-attachment: (fixed, scroll);


fixed: scrolling the browser window will not move the image
scroll: moves the image as the user scrolls the window
(default)
background-repeat: (no-repeat, repeat-x, repeat-y, repeat);
p{background-repeat: no-repeat;}
background-size: (width and height in px or percent, or the word
“cover”);
p{background-size: cover;}
background-position
CSS Background Properties
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an
image both horizontally and vertically.

In the following example image is repeated only


horizontally (repeat-x)

Example
body
{
background-image:url(‘image.png');
background-repeat:repeat-x;
Background-position:center,center;
}
DIV Tag
The <div> tag is also known as the division element. It is a
generic block-level element. These are the elements that start from
a new line. They are widely used to divide the content on the page
into different blocks.

They are used to highlight a section in the content.

It is used to divide or section of other HTML tags in to meaningful


groups.

<div id="navigation">
<ul>
<li><a href="index.html" title="Go Home">Home</a></li>
<li><a href="about.html" title="Learn more about us">About</a></li>
<li><a href="contact.html" title="Contact us">Contact</a></li>
</ul>
</div>
Span Tag

The span tag is an inline HTML element that is used to group a


set of inline elements. Generally you use span to group tags
that you want to style differently.

<h1>Comm 244: <span class="coursename">Design for the WWW</


span></h1>
Background -repeat
One line only

• background-color | background-image | background-repeat |


background-attachment | background-position
• background: #FFCC66 url(butterfly.gif) no-repeat fixed right bottom;
• If not specified will take the default value:
• background-attachment:scroll
• background-position:top left.
Fonts

• Font-family:

• Font-style: normal or italic


con. fonts
• font-variant :small-caps or normal
• Font-weight: bold (100-900)
• font-size:

p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

You might also like