css for basic learner
TRANSCRIPT
Import style sheet•In style sheet, we can import other
style sheet by use
•@import “style.css”;
CSS Selectors
Tag, Class, ID, Compound
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.
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
body {margin: 10px 0;}
Selector Property Value
Declaration
CSS Selectors
body {margin: 10px 0;}
Tag*: properties defined for an HTML tag.
(*Also referred to as Type, Element)
CSS Selectors
body {margin: 10px 0;}
<body>Everything within the body will start out with this property. </body>
Tag
CSS Selectors
.red {margin: 15px; color: red;}
Class: properties defined for an HTML tag using a class or a <span> tag.
CSS Selectors
.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>
Class
CSS Selectors
#wrapper {margin :0 auto;}
ID: properties defined for an element or div using an id.
CSS Selectors
#wrapper {margin :0 auto;}
<div id=”wrapper”></div>
ID
CSS Selectors
#content p {margin :0;}
Compound: properties defined using multiple selector types.
CSS Selectors
#content p {margin :0;}
<div id=”content”><p>This is a paragraph of text in the content div.</p></div>
Compound
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
content
CSS Box Model
40 px
10 px
100 px
450 px
content
CSS Box Model
10 px
1 px
50 px
??? px
500 px
content
CSS Box Model
total box width =
content area width + left padding + right padding + left border + right border + left margin + right margin
CSS Box Model
#content {width: 200px;border: 1px solid #900;padding: 10px;margin: 0;background: #fee;}
What is the total box width?
CSS Box Model
#content {width: ???px;border: 1px solid #000;padding: 20px;margin: 10;}
If the total box width is 400px, what is the width of the content area?
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;
}