Scribd
Upload
12 views

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheets) is used to style HTML elements. CSS deals with presentation aspects like color, font, layout, etc. CSS can be applied to HTML through internal, inline, and external stylesheets. Common CSS properties control font, text, lists, borders, background, and color. CSS selectors target elements by type, class, ID, and other attributes to style them.

Uploaded by

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

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheets) is used to style HTML elements. CSS deals with presentation aspects like color, font, layout, etc. CSS can be applied to HTML through internal, inline, and external stylesheets. Common CSS properties control font, text, lists, borders, background, and color. CSS selectors target elements by type, class, ID, and other attributes to style them.

Uploaded by

mekideszekarias
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

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 {
background-color: #009999; color: #00FF00;
font-family: garamond, tahoma, arial; font-weight: bold;
}
.formbutton {
color: #009999;
text-transform: capitalize; cursor: hand;
} SELECT {
background-color: #009999; color: #00FF00;
font-family: garamond, tahoma, arial; font-weight: bold;
}
</STYLE>

23

You might also like