Scribd
Upload
21 views

CSS (2nd Term Project)

CSS (2nd Term Project) This document provides an overview of CSS (Cascading Style Sheets) in 3 sections: 1. It describes what CSS is and how it is used to control layout and formatting of HTML elements across multiple web pages. 2. It discusses various CSS properties for controlling backgrounds, such as background-color, background-image, and background-repeat. 3. It provides examples of how to style different HTML elements like paragraphs, links, and borders using CSS properties for things like color, font, text decoration, and more.

Uploaded by

04 Jalal Nimer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

CSS (2nd Term Project)

CSS (2nd Term Project) This document provides an overview of CSS (Cascading Style Sheets) in 3 sections: 1. It describes what CSS is and how it is used to control layout and formatting of HTML elements across multiple web pages. 2. It discusses various CSS properties for controlling backgrounds, such as background-color, background-image, and background-repeat. 3. It provides examples of how to style different HTML elements like paragraphs, links, and borders using CSS properties for things like color, font, text decoration, and more.

Uploaded by

04 Jalal Nimer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS (2nd Term Project)

Done by: Jalal Nimer


10“E”
What is 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


CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
CSS background properties:

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

The background-color property specifies the background color of an


element.
CSS Background Image
• The background-image property specifies an image to use as the background
of an element.
• By default, the image is repeated so it covers the entire element.
• Example: Set the background image for a page:
body { background-image: url("paper.gif"); }

CSS Background Image Repeat


• By default, the background-image property repeats an image both
horizontally and vertically.

• Some images should be repeated only horizontally or vertically.


Example:
body { background-image: url("gradient_bg.png");
background-repeat: repeat; }
CSS Styles for <P> tag
• Add a color to Text & Font • Add a Decoration Line to Text

p{ p{

background-color: yellow;
text-decoration: overline underline;

color: blue;
text-decoration: overline;
text-align: left / center / right ;
text-decoration: line-through;
font-family: monospace;
text-decoration: underline;
font-size: 40px;
}
}
• Text Transformation • Text Shadow

p{ p{

text-transform: uppercase; text-shadow: 2px 2px red;

text-transform: lowercase; }

text-transform: capitalize;

}
CSS Borders
• The CSS border properties allow you to specify the
style, width, and color of an element's border.

• The border-style property specifies what kind of


border to display.
Example:
p {border-style: dotted;}
• dotted - Defines a dotted border

• dashed - Defines a dashed border

• solid - Defines a solid border

• double - Defines a double border

• groove - Defines a 3D grooved border. The effect depends


• on the border-color value

• ridge - Defines a 3D ridged border. The effect

• depends on the border-color value

• inset - Defines a 3D inset border. The effect depends on


• the border-color value
• outset - Defines a 3D outset border. The effect depends on
CSS Links
• With CSS, links can be styled in many different ways.
• The border-style property specifies what kind of border to
display.

• Styling Links
• Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).

• Text Decoration
• The text-decoration property is mostly used to remove
underlines from links:
• a { text-decoration: underline; }
• Background Color • Link Buttons

• This example demonstrates a more


advanced example where we combine
• The background-color several
property can be used to • CSS properties to display links as
boxes/buttons:
specify a background color
for links: • a { background-color: #f44336;

• color: white;
• a { background-color:
yellow; } • padding: 14px 25px;

• text-align: center;

• text-decoration: underline; }

You might also like