CSS (Cascading Style Sheet)

CSS
(Cascading Style Sheet)

What is CSS?
CSS (Cascading Style Sheets) is used to style HTML elements.
Cascading: Multiple styles can overlap in order to specify a range
of style from a whole web site down to a unique element. Which
style gets applied pertains to the rules of CSS cascading logic.
Style: CSS deals specifically with the presentation domain of

designing a web page (color, font, layout, etc).
Sheet: Normally, CSS is a file separate from the HTML file –

linked to the HTML file through its <head> (exceptions apply).
Why CSS?
Allows for much richer document appearances than HTML.
Reduce workload by centralizing commands for visual

appearance instead of scattered throughout the HTML doc.
Use same style on multiple pages.
Reduce page download size.
Use HTML for content; CSS for Presentation.

Cascading Style Sheets Syntax
Style sheets work by controlling the value(s) of the property(s)
of a selector
css example of syntax
selector {property: value;}
almost any html tag can be used as a selector
example
h1 {color: red;}
the <h1> tag is our selector, the property is color and the
value is red
<h1>This is heading one text with s2t4y-Mlaer-<21/h1> 4

Selectors
Select elements to apply a declared style.
Selector types:
➢Element Selectors: selects all elements of a specific type
(<body>, <h1>, <p>, etc.)
➢Class Selectors: selects all elements that belong to a given

class.
➢ID Selectors: selects a single element that’s been given a

unique id.
5
Applying Style Sheets
Three main methods of applying style sheets to a html
document, these are
1. Embedding style sheets(Internal) :-using the

<style> element in the <head> section
2. Inline style sheets:-using the style attribute in a html tag

3. Linking to an external style sheet:-using an external
CSS file
6
Embedding style sheets(Internal)
It can be used if one single document has a unique style.
Internal styles are defined in the <head> section of an HTML
page, by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color: yellow;}
p {color: blue;}
</style>
</head>
7
Inline style sheets
style properties can easily be included in individual html tags
like this...
<A HREF=“Facebook.com" STYLE="color: red; text-

decoration: underline;">Facebook</A>
<H1 STYLE="color: yellow; font-family: Arial; background-

color: purple;"> This is Heading one text with an inline
stylesheet
</H1>
8
External style sheet
the ability to use an external style sheet adds a tremendous amount
of flexibility to html documents, because any amount of pages can
link to the same .css document a uniform look can be applied to an
entire website.
the benefits of an external style sheet are that file size is reduced
because individual html documents do not require a style sheet to
be embedded as well as the obvious saving in time
an external style sheet can be written with most simple text editors
and should be saved as whatever-you-want.css
but for the sake of argument lets call it style.css

9
Cont …
body {background-color: yellow;}
p {color: blue;}
➢ below is an example of the link that would be used for
style.css and is placed in the HEAD part of a html document
<HEAD>
<LINK REL="STYLESHEET" TYPE="text/css"
HREF="style.css">
</HEAD>
10
Cascading Style Sheets and Class
Finds all elements of a given class –based on the attribute’s class value.
Syntax: .class name(Remember the dot means class selector)
Example:
.purple{
font-weight: bold;
background: pink;
color: purple;
font-size: 12pt;}
Finds all elements whose class = “Purple "and makes their font bold ,their color
purple ,their font size 12 and their backgrounds pink.
<h1 class="purple">This is heading one text with class</h1> other tags can
share a class
<B class="purple">This is bold text with class</B>

11
Cascading Style Sheets and ID
Finds a single element that’s been given a unique id–based on
the attribute’s id value.
Syntax: #idname(Remember the pound-sign means id selector)
⚫ style sheet ID and class are almost the same thing except
where a class is declared by being preceded by a dot (period)
an ID is preceded by a # hash mark
Example:
# goblue{
color: blue;
font-size: 12pt;}
Finds a single element whose id = “goblue”and make their
color Blue and their font size 12.
<H1 ID="goblue">This is heading text with ID</H1>
<B ID="goblue">This is bold text with ID</B>
12
Style Sheets and Span
both div and span have no real meaning as html tags and only
serve any use when a style sheet is applied
<span> is an inline element, which means it can start on the
same line (like the font tag) and the <div> is a block level
element, which means it must start on a new line (like a html
table)
an example of span...
<STYLE>
SPAN {
font-family: comic sans ms, Garamond, Arial;
font-size: 14pt;
font-weight: bold;
color: #0000FF;
}
</STYLE>
<span>this is span</span> 13
Style Sheets and Div
div, short for division, is an excellent way to very quickly add
blocks of color to a html document
div can contain other block level elements, including tables
Creates a “box "with the following attributes:
div seems to work best with a class
an example of div
<STYLE>
DIV {
border-style: ridge;
border-color: #FF0000;
border-width: 5px;
padding-left: 10px;
padding-right: 10px;
background: #009999;
color: #00FF00;}
14
</STYLE>
Font Properties
font-family: times, arial, serif, sans-serif, monospace;
font-style: italic;
font-weight: (bold, bolder, lighter, or 100 –900;)
font-size: size;…or shorthand
font: style weight size family;
15
Text Properties
text-indent: indents first line of a paragraph according to size
text-align: right; or left; or center ; or justify;
text-decoration: none; or underline;
text-transform: Capitalize;
Line-height: added vertical space to each line of text
according to size
16
List Properties <ul>
list-style-type: none, disc, circle, square,(other types

available)
list-style-position: inside oroutside
list-style-image: url(../path/to/image.jpg)…or shorthand
list-style: type position image
17
Border Properties
border-width:(thin, medium, thick, or size)
border-style:(none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, or outset)
border-color : color…or shorthand

border(-top, -right, -left, -bottom):width style color
<STYLE>
P{
border-style: double;
border-color: #FF0000;
border-width: 10px;
}
</STYLE>
18
Background Image Properties
background-image: url(../location/of/image.jpg)
background-repeat: tile image in background

background-position: vertical(top, center, bottom, or size)
horizontal(left, center, right, or size)
background-attachment: (scrollor fixed)
19
Color Properties
color: specifies the text color.
background-color: specifies the background color.
black; or #000000;
red; or #FF0000;
lime; or #00FF00;
blue; or #0000FF;
white; or #000000;
…and more see:

http://www.w3schools.com/css/css_colornames.asp
20
Form and Css
<form>
<fieldset>
<legend>sign in</legend>
<label>Name</label> <input type="text" name="name“ class="field"/><br/>
<label>E-mail</label> <input type="text" name="e-mail“ class="field"/><br/>
<label>password</label><input type="password" name="pass“class="field"/><br/>
<label>Coment</label><textarea name="com" cols="57" rows="7"></textarea><br/>
<b>dropdown menu</b><br/>
<select name ="subject">
<option>Internet Programing</option><br/>
<option>Netwerking</option><br/>
<option>Graphics</option><br/>
<option>Internet</option><br/>
<option>Programing</option><br/>
<option>vb</option><br/>
</select>
<input type="submit" value="login“class="formbutton"/>
</fieldset>
</form>
21
Cont..
<STYLE>
TEXTAREA {
background-color: #009999; color: #00FF00;
font-family: garamond, tahoma, arial; font-weight: bold;
}
.field {
}
.formbutton {
color: #009999;
text-transform: capitalize; cursor: hand;
} SELECT {
}
</STYLE>
23

CSS (Cascading Style Sheet)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS (Cascading Style Sheet)

Uploaded by

Copyright:

Available Formats

CSS

(Cascading Style Sheet)

Style: CSS deals specifically with the presentation domain of

Sheet: Normally, CSS is a file separate from the HTML file –

Allows for much richer document appearances than HTML.

Reduce workload by centralizing commands for visual

Use same style on multiple pages.

Reduce page download size.

Use HTML for content; CSS for Presentation.

selector {property: value;}

almost any html tag can be used as a selector

<h1>This is heading one text with s2t4y-Mlaer-<21/h1> 4

➢Class Selectors: selects all elements that belong to a given

➢ID Selectors: selects a single element that’s been given a

1. Embedding style sheets(Internal) :-using the

2. Inline style sheets:-using the style attribute in a html tag

<A HREF=“Facebook.com" STYLE="color: red; text-

<H1 STYLE="color: yellow; font-family: Arial; background-

but for the sake of argument lets call it style.css

<B class="purple">This is bold text with class</B>

font-weight: (bold, bolder, lighter, or 100 –900;)

font-size: size;…or shorthand

font: style weight size family;

text-align: right; or left; or center ; or justify;

text-decoration: none; or underline;

list-style-type: none, disc, circle, square,(other types

list-style-position: inside oroutside

list-style-image: url(../path/to/image.jpg)…or shorthand

list-style: type position image

border-color : color…or shorthand

background-repeat: tile image in background

background-attachment: (scrollor fixed)

…and more see:

You might also like