Web Programming-css.pptx

Web Programming
Part 2
CSS
Cascading Style Sheet

Introduction
 CSS handles the look and feel part of a web
page.
 Using CSS, you can control the color of the text,
the style of fonts, the spacing between
paragraphs, how columns are sized and laid out,
what background images or colors are used, as
well as a variety of other effects.

Advantages of CSS
 CSS saves time - You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many web
pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So, less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all the
elements in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and cellphones
or for printing.
 Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible with future browsers.

CSS Types
 CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML
elements.
 Internal - by using a <style> element in the <head>
section.
 External - by using a <link> element to link to an
external CSS file.

Inline CSS

• An inline CSS is used to apply a unique style to a single
HTML element.
• An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element
to blue, and the text color of the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
• An internal CSS is used to define a style for a single
HTML page.
• An internal CSS is defined in the <head> section of an
HTML page, within a <style> element.
The following example sets the text color of ALL the <h1>
elements (on that page) to blue, and the text color of ALL
the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:

Internal CSS
 <!DOCTYPE html>
<html>
<head>

<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

External CSS
An external style sheet is used to define the style for many HTML
pages. To use an external style sheet, add a link to it in the <head>
section of each HTML page:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="styles.css"></head>
<body>
</body>
</html>

External CSS
An HTML page styled by an external CSS stylesheet must reference
the .css file in the document head. Once you create the CSS file, it
must be uploaded to your server and linked in the HTML file with
code, for example:
<link href="style.css" rel="stylesheet" type="text/css">

CSS Syntax
 A style rule is made of these parts:
 Selector :This is the HTML element name at the start of the ruleset. It defines the
element(s) to be styled (in this example, <p> elements). To style a different
element, change the selector.

 Declaration: This is a single rule like color: red;. It specifies which of the
element's properties you want to style.

 Properties: These are ways in which you can style an HTML element. (In this
example, color is a property of the <p> elements.) In CSS, you choose which
properties you want to affect in the rule.

 Property value: To the right of the property—after the colon—there is the
property value. This chooses one out of many possible appearances for a given
property. (For example, there are many color values in addition to red.)

Selecting multiple elements
 You can also select multiple elements and apply a single ruleset to
all of them. Separate multiple selectors by commas. For example:
p,
li,
H1 {
color: red;
}

‫د‬
=
Selector name What does it select Example
Element selector (sometimes
called a tag or type selector)
All HTML elements of the specified type.
<p class="center large">This paragraph
refers to two classes.</p>
ID selector
The element on the page with the specified ID. On
a given HTML page, each id value should be
unique.
#para1 {
text-align: center;
color: red;
}
Class selector
The element(s) on the page with the specified
class. Multiple instances of the same class can
appear on a page.
.center {
text-align: center;
color: red;
}
Attribute selector
The element(s) on the page with the specified
attribute.
img[src]
selects <img src="myimage.png"> but
not <img>
Pseudo-class selector
The specified element(s), but only when in the
specified state. (For example, when a cursor hovers
over a link.)
a:hover
selects <a>, but only when the mouse
pointer is hovering over the link.
The universal selector
The universal selector (*) selects all HTML
elements on the page.
* {
text-align: center;
color: blue;

Fonts and Texts
The CSS color property defines the text color to be used, while The
CSS font-family property defines the font to be used. The CSS font-
size property defines the text size to be used
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body></html>

CSS Comments
A CSS comment is placed inside the <style> element, and starts with /*
and ends with */:
/* This is a single-line comment */
p {
color: red;
}

HTML and CSS Comments
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body></html>

padding
 padding, the space around the content.
 The padding-bottom specifies the bottom padding of an element.
 The padding-top specifies the top padding of an element.
 The padding-left specifies the left padding of an element.
 The padding-right specifies the right padding of an element.
 The padding serves as shorthand for the preceding properties.

Padding
<html> <head> </head> <body>
<p style = "padding: 15px; border:1px solid black;"> all four padding will
be 15px </p>
<p style = "padding:10px 2%; border:1px solid black;"> top and bottom
padding will be 10px, left and right padding will be 2% of the total width of
the document. </p>
<p style = "padding: 10px 2% 10px; border:1px solid black;"> top padding
will be 10px, left and right padding will be 2% of the total width of the
document, bottom padding will be 10px </p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;"> top
padding will be 10px, right padding will be 2% of the total width of the
document, bottom padding and top padding will be 10px </p>
</body></html>

Borders
 The solid line that is just outside the padding. The CSS border property
defines a border around an HTML element.
 The border-color specifies the color of a border. The border-color
property allows you to change the color of the border surrounding an
element.
 border-bottom-color changes the color of bottom border.
 border-top-color changes the color of top border.
 border-left-color changes the color of left border.
 border-right-color changes the color of right border.

Borders
<html> <head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style> </head> <body>
<p class = "example1"> This example is showing all borders in different colors. </p>
<p class = "example2"> This example is showing all borders in green color only. </p>
</body></html>

Borders
 The border-style specifies whether a border should be solid, dashed
line, double line, or one of the other possible values.
 none − No border. (Equivalent of border-width:0;)
 solid − Border is a single solid line.
 dotted − Border is a series of dots.
 dashed − Border is a series of short lines.
 double − Border is two solid lines.
 groove − Border looks as though it is carved into the page.
 ridge − Border looks the opposite of groove.
 inset − Border makes the box look like it is embedded in the page.
 outset − Border makes the box look like it is coming out of the canvas.
 hidden − Same as none, except in terms of border-conflict resolution for table
elements.

Borders
 The border-width specifies the width of a border. You can
individually change the width of the bottom, top, left, and right
borders of an element using the following properties :
 border-bottom-width changes the width of bottom border.
 border-top-width changes the width of top border.
 border-left-width changes the width of left border.
 border-right-width changes the width of right border.

Margin
 Margin, the space around the outside of the border.
 CSS has properties for specifying the margin for each side of an
element:
 margin-top
 margin-right
 margin-bottom
 margin-left
p {
border: 2px solid powderblue;
margin: 50px;
}

Margin
 p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
The margin property is a shorthand property for the following individual
margin properties.
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

CSS color
 An Example for using color property for specifying text color
:
 <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
 An Example for using color property for specifying border
color:
 <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS color
 An Example for using color property for specifying
background color of an element:
 <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

CSS Background
 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the
background.
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
body {
background-repeat: repeat;
}

CSS Background
 To set the background image position 100 pixels away from the
left side and 200 pixels down from the top:
 The background-attachment property is used to control the
scrolling of an image in the background.
body {
background-position:100px 200px; }
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed; }

CSS Background
 By default background-repeat property will have repeat value. To repeat the
background image vertically use repeat-y :
background-repeat: repeat-y;
 For repeating horizontally use repeat-x:
background-repeat: repeat-x;
 The background-position property is used to control the position of an image
in the background. The following example demonstrates how to set the
background image position 100 pixels away from the left side.
body {
background-position:100px;
}

CSS Background
 The background-attachment property is used to control the scrolling of an
image in the background.
<style>
body {
background-image: url('/css/images/css.jpg');
background-attachment: fixed; } </style>

CSS Fonts
 Fonts in CSS have several properties that are used to format fonts.
The basic font properties are:
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font normal, italic and oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a
font appears. The font-weight property provides the functionality to specify
how bold a font is. Possible values could be normal, bold, bolder, lighter, 100,
200, 300, 400, 500, 600, 700, 800, 900.
 The font-size property is used to increase or decrease the size of a font. he
font-size property is used to control the size of fonts. Possible values could be
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size
in pixels or in %.

CSS Fonts
 The font property is used as shorthand to specify a number of other font
properties.
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>

CSS Text
 The color property is used to set the color of a text. The color property is used
to set the color of the text.
 <p style = "color:red;">
 The direction property is used to set the text direction. Possible values are ltr
or rtl.
 <p style = "direction:rtl;">
 The letter-spacing property is used to add or subtract space between the letters
that make up a word. Possible values are normal or a number specifying space.
 <p style = "letter-spacing:5px;">
 The word-spacing property is used to add or subtract space between the words
of a sentence. Possible values are normal or a number specifying space.
 <p style = "word-spacing:5px;">

CSS Text
 The text-indent property is used to indent the text of a paragraph. Possible values
are % or a number specifying indent space.
<p style = "text-indent:1cm;“>
 The text-align property is used to align the text of a document. Possible values
are left, right, center, justify .
 < p style = "text-align:right;">
 The text-transform property is used to capitalize text or convert text to uppercase
or lowercase letters.
< p style = "text-transform:capitalize;“> This will be capitalized</p>
 The text-decoration property is used to underline, overline, and strikethrough text.
Possible values are none, underline, overline, line-through, blink.
 <p style = "text-decoration:underline;“> This will be underlined</p>

CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
•a:link - a normal, unvisited link.
•a:visited - a link the user has visited.
•a:hover - a link when the user mouses over it.
•a:active - a link the moment it is clicked.
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

CSS Tables
 The border-collapse specifies whether the browser should control the
appearance of the adjacent borders that touch each other or whether
each cell should maintain its style.
 The border-spacing specifies the width that should appear between
table cells.
 The caption-side captions are presented in the <caption> element. By
default, these are rendered above the table in the document. You use the
caption-side property to control the placement of the table caption.]The
empty-cells specifies whether the border should be shown if a cell is
empty.
 The table-layout allows browsers to speed up layout of a table by using
the first width properties it comes across for the rest of a column rather
than having to load the whole table before rendering it.

CSS Lists
 The list-style-type allows you to control the shape or appearance of the
marker. properties values for unordered lists are: None, Disc(default), circle,
and square.
 ul.a {
list-style-type: circle;
}
 While the specified property values for ordered lists are: Decimal, lower
alpha, upper alpha, lower roman, upper roman, ….etc.
 <ol style = "list-style-type:decimal;">
 The list-style-position specifies whether a long point that wraps to a second
line should align with the first line or start underneath the start of the marker.
The specified values are:None, inside ,and outside.
 < ul style = "list-style-type:circle; list-stlye-position:outside;">

CSS Lists
 The list-style-image specifies an image for the marker rather than a bullet
point or number.
 <li style = "list-style-image: url(/images/bullet.gif);“>
 The list-style serves as shorthand for the preceding properties.
<html> <head></head><body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body></html>

CSS Forms
 HTML forms can be improved greatly with CSS by including specified
attributes.
 Width property: To specify the width of input field.
input {
width: 100%;
}
 Padding: To add space inside the text field.
 Margin: To add more space outside of field text.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

CSS Forms
•Border and border radius: To change the border size and color,
and the border-radius property to add rounded corners.
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
•Color and background-color: To change the text color, and add a
background color to the input:
input[type=text] {
background-color: #3CBC8D;
color: white;
}

CSS Forms
•Background image: To add an icon inside the input, and position it with the
background-position property.
Syntax: input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
padding-left: 40px;
}
•Transition:To animate the width of the search input when it gets focus.
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

CSS Forms
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
input[type=button],
input[type=submit],
input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

 The navigation menu: Contains link to various categories of articles.
 Header Section: The header section is generally placed either at the
top of the Website or just below a top navigation menu. It often
comprises of the name of the Website or the logo of the Website.
 Content Section: The content section is the main body of the website. The
user can divide content section in n-column layout. The most common layouts
are:
 1-Column Layout: It is mostly used for mobile layout.
 2-Column Layout: This website layout is mostly used for tablets or laptops.
 3-Column Layout: This website layout is mostly used for desktops.
 Footer Section: A footer section is placed at the bottom of the webpage
and it generally consists of information like contact info, copyrights,
About us etc.

Web Programming-css.pptx

More Related Content

Similar to Web Programming-css.pptx

More from MarwaAnany1

Recently uploaded

Web Programming-css.pptx