Scribd
Upload
4 views

CSS 2

CSS

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS 2

CSS

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
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