CSS for basic learner

Oriented by: Vibol YOEUNG
Tell: 077 377 067
Yoeung.vibol@gmail.com

Import style sheet
• In style sheet, we can import other style
sheet by use
• @import “style.css”;

CSS Selectors
Use CSS Selectors to define properties for the
structure and presentation of your site.
This is the key to defining specific properties for
specific parts of your design.
Tag, Class, ID, Compound

CSS Selectors
Tag: properties defined for an HTML tag.
Class: properties defined for an HTML tag
using a class or a <span> tag.
ID: properties defined for an element or div
using an id.
Compound: properties defined using multiple
selector types.

CSS Selectors
Declaration
body {margin: 10px 0;}
Selector Property Value

CSS Selectors
Tag*: properties defined for an HTML tag.
(*Also referred to as Type, Element)

CSS Selectors
Tag
<body>
Everything within the body will start out
with this property.
</body>

CSS Selectors
Class: properties defined for an HTML tag
using a class or a <span> tag.
.red {margin: 15px; color: red;}

CSS Selectors
Class
.red {margin: 15px; color: red;}
<p class=”red”>This is a paragraph of text
in red.</p>
These are <span class=”red”>words in
red.</span>

CSS Selectors
ID: properties defined for an element or div
using an id.
#wrapper {margin :0 auto;}

CSS Selectors
ID
#wrapper {margin :0 auto;}
<div id=”wrapper”></div>

CSS Selectors
Compound: properties defined using multiple
selector types.
#content p {margin :0;}

CSS Selectors
Compound
#content p {margin :0;}
<div id=”content”>
<p>This is a paragraph of text in the
content div.</p>
</div>

CSS Box Model
How do you position content?
You position content in your page by
using a combination of margins, padding
and floats.
But, in order to get your positioning and
layout correct, you must know how the
CSS Box Model works.

CSS Box Model
10 px
40 px
100 px
content
450 px

CSS Box Model
1 px
10 px
50 px
content
??? px
500 px

CSS Box Model
total box width =
content area width +
left padding + right padding +
left border + right border +
left margin + right margin

CSS Box Model
What is the total box width?
#content {width:
200px;border: 1px solid
#900;padding: 10px;margin:
0;background: #fee;}

CSS Box Model
If the total box width is 400px, what is the width
of the content area?
#content {width:
???px;border: 1px solid
#000;padding: 20px;margin:
10;}

Pseudo-Selectors
• •General Purpose Pseudo-Selector:
• –:hover Element with mouse over
• Specific to hyperlinks (and/or buttons)
• –a:active A link or button that is currently
being clicked on.
• –a:link A link that has NOT been visited yet.
• –a:visited A link that HAS been visited.

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)

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; orunderline;
• text-transform:Capitalize;
• Line-height:added vertical space to each
line of text according to size

Text shadows
• h3 {text-shadow: 1px 1px 2px #00}
• x (horizontal) offset casts shadow to the right
of the text. Negative cast to the left.
• y (vertical) offset casts shadow below the
text. Negative value casts above
• Blue radius: blurs the shadow, with higher
values making the shadow wider or lighter.
• Color: make color for shadow text

Attribute selector
- CSS [attribute]: use to select element with specified
attribute
Ex. a[target] {color: red}
- CSS [attribute=value]: use to select element with
specified attribute and value
Ex. Input[type=“submit”] {color: #fff}

Attribute selector(con)
- CSS [attribute~=value]: use to select element with
an attribute with containing a specified word
- Ex. [title~=“shop”] {color: #000}
- CSS [attribute|=value]: select elements with the
specified attribute starting with the specified value.
- Ex. [class|=“top”] {background: blue}

Attribute selector(con)
- CSS [attribute^=value]: used to select elements
whose attribute value begins with a specified
value
Ex. [class^=“top”] {background: blue}
- CSS [attribute$=value]: used to select elements
whose attribute value ends with a specified value.
Ex. [class$=“top”] {background: blue}

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

Position
• Static position: is a default position and
element is always positioned according to
the normal flow of the page.

Position fixed
• An element with fixed position is positioned
relative the browser window. It will not move
even if window is scrolled:

Position fixed(con)
• Ex.
• .box {
position: fixed;
width: 400px;
height: 400px;
}

Position relative
• element is positioned relative to its normal
position.
• Ex. Box2 {
position: relative;
left: -10px;
}

Position absolute
• An absolute position element is positioned
relative to the first parent element that has a
position other than static.
• Ex. Box2 {
position: absolute;
left: 10px;
top: 20px;
}

Z-index
• property specifies the stack order of an
element (which element should be placed in
front of, or behind, the others).
• Ex. .box2 {
z-index: 1;
Position: absolute;
}

CSS for basic learner

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to CSS for basic learner

Similar to CSS for basic learner (20)

Recently uploaded

Recently uploaded (20)

CSS for basic learner

Editor's Notes