Skip to content

CSS Tutorial

December 2, 2007
CSS
  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the tag)
  4. Inline style (inside an HTML element)

An inline style (inside an HTML element) has the highest priority

selector {property: value}
for element p, Class is right => p.right {text-align: right}
<p class=”right”>
This paragraph will be right-aligned.
</p>

This is for all elements => .center {text-align: center}
Apply to elements with given id –>
#myelementID {color: green}

Apply to elements with given attribute filter (those inputs whose type is text)
input[type=”text”] {background-color: blue}

It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

<head>
<style type=”text/css”>
<!–hr {color: sienna} p {margin-left: 20px}body {background-image: url(“images/back40.gif”)}–></style></head>

=====================
External
<head><link rel=”stylesheet” type=”text/css”href=”mystyle.css” /></head>

h1 {letter-spacing: -3px}
p.small {line-height: 90%}
h1 {text-align: center}
h2 {text-decoration: line-through/underline/overline/none}
p {text-indent: 1cm}
p.capitalize {text-transform: capitalize/lowercase/uppercase}
h2 {color: #dda0dd}
p{ word-spacing: 30px }
div.one {direction: rtl}
p{white-space: nowrap}

Difference between div and span tag
It acts as a paragraph end/beginning, and while you can have paragraphs within a

you can’t have a

inside a paragraph.
The primary attributes of the

and span tag are:
* style
* class
* id
<span> doesn’t do any formatting of it’s own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.

TABLES

p{white-space: nowrap}
table.two {table-layout: fixed/automatic}
table.coll {border-collapse: collapse/separate}
table.two{border-spacing: 10px 50px}
caption{caption-side:bottom}

img.normal {height: auto}
p {display: inline}
div {display: none}
img {float:right}

CAS Problem of Ticket:
http://www.mail-archive.com/cas@tp.its.yale.edu/msg01266.html
http://www.nabble.com/INVALID_TICKET-on-browser-refresh-t4801385.html

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: