NotesCSS
=========
Contents
=========
References
Basic Syntax
Examples
Class Selectors
Inserting Stylesheet
Margins
References
===========
1. http://www.htmlhelp.com/reference/css/structure.html#pseudo
2. http://www.w3schools.com/css/css_syntax.asp
Basic Syntax
=============
General Syntax:
<Selector> { <Property> : <Value> ; [<Property> : <Value>] }
Selector is HTML tag, eg:
body, p, etc......
Property is HTML attribute eg:
color, font-family
Value is value of the HTML attributes
Examples
==========
body {color: black} -> simple example
p {font-family: "sans serif"} -> multiple worded Value
p {text-align:center;color:red} -> multiple Property
p -> alternative layout syntax
{
text-align: center;
color: black;
font-family: arial
}
h1,h2,h3,h4,h5,h6 -> multiple selector with same property
{
color: green
}
p.right {text-align: right} -> <p class="right"> This paragraph will be right-aligned.</p>
p.right {text-align: right} -> <p class="right centre"> This paragraph will be right-aligned.</p>
p.center {text-align: center}
.center {text-align: center} -> applies to ALL selector with class "center"
#green {color: green} -> applies to ALL id="green" selector, eg <p id="green"> .....
p#para1 -> applies to p selector with id="para1", eg <p id="para1"> .....
{
text-align: center;
color: red
}
input[type="text"] {background-color: blue} -> apply to selectors with certain elements, eg input-type
/* this is a comment */ -> comments
Class Selectors
================
<div class="sidenav">
<h2> Site navigation</h2>
</div>
div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
ID Selectors
=============
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }
The major difference is that IDs can only be applied once per page,
while classes can be used as many times on a page as needed.
Classes can be used as many times as needed within a document.
IDs can only be applied once within a document.
So, if you need to use the same specific selector more than once, classes are a better choice.
Inserting Stylesheet
=======================
Cascading Order from least to most important:
- Browser default
- External style sheet
- Internal style sheet (inside the <head> tag)
- Inline style (inside an HTML element)
External style sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Internal style sheet (inside the <head> tag)
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Inline style (inside an HTML element)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Multiple Sytlesheets
- in external CSS:
h3 {color: red;text-align: left;font-size: 8pt}
- in internal CSS:
h3 {text-align: right; font-size: 20pt}
Then the result will be:
color: red; text-align: right; font-size: 20pt
Margins
========
BODY { margin: 5em } /* all margins 5em */
P { margin: 2em 4em } /* top and bottom margins 2em,
left and right margins 4em */
DIV { margin: 1em 2em 3em 4em } /* top margin 1em,
right margin 2em,
bottom margin 3em,
left margin 4em */
Showing posts with label css cascading stylesheet selector background html external attribute div. Show all posts
Showing posts with label css cascading stylesheet selector background html external attribute div. Show all posts
Tuesday, October 30, 2007
Subscribe to:
Posts (Atom)
Posts
