Tuesday, November 24, 2009

CSS Basic Crash Course.

Guess what, i dont know the basics of CSS but because of wizards in many apps & free templates that i use, managed to get around this problem, but when i need precise control, its a time consuming guessing game.

So this is my crash course on CSS Basic (with some text taken from : http://www.w3schools.com/css/css_id_class.asp)

1. id Selector (e.g #style1)
  • specify a style for a single, unique element
  • uses the id attribute of the HTML element, and is defined
    with a "#".
Example:
CSS: #para1{text-align:center;color:red}
HTML: <p id="para1">Hello World!</p>


2. class Selector (e.g .style1)
  • to specify a style for a group of elements. Unlike the id
    selector, class selector is used on several elements.
  • allows you to set a particular style for any HTML elements with the same class.
Example:
CSS: .center{text-align:right;}

HTML:
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>


3. Grouping Selectors
  • there are often elements with the same style, To minimize the code, you can group selectors.
  • Separate each selector with a comma.
Example:
CSS: h1,h2,p {color:green;}


4. Nesting Selectors
  • means apply a style for a selector within a selector
Example:
CSS:
p {color:blue; text-align:center;}
.marked {background-color:blue}
.marked p {color:white;}

HTML:
<p>Text is a blue, center-aligned </p>
<div class="marked"><p>This p element will be white and background will be blue</p></div>


Another Example of Nesting
CSS:
.mydiv {position: absolute;bottom: 10px;right: 10px;}
.mydiv> p, a {color:green}

HTML:
<div class="mydiv"> test <p>some p tag</p>
<a href="#">test link</a>
</div>


5. Fixed Positioning
  • element position is fixed relative to the browser window. and will not move even if the window is scrolled
Example:
CSS: .fixedPos {position: fixed; top: 10px; right: 30px;}
HTML: <div class="fixedPos">Item with Fixed positioning</div>


6. Relative Position
  • its like (off-setting) the position of an element (to its left, right, top, bottom) but a number of px
  • alt explanation: element is positioned relative to its normal position / element can be moved with reference to its current normal position.
Example:
CSS:
h2.pos_left { position:relative;left:-20px;}

h2.pos_right {position:relative;left:20px;}

HTML:
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>


7. Absolute Positioning
  • An absolute position element is positioned relative to the first parent element that has a position other
    than static. If no such element is found, the containing block is <html>:
  • Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
  • Absolutely positioned elements can overlap other elements.

Example:
h2 {position:absolute;left:100px;top:150px;}
HTML: <h2>This is a heading with an absolute position</h2>


7.1. Left and right Alignment.
  • A method to align elements using absolute position
CSS:
.alignBottomright {position:absolute; right:100px; bottom:10px;width:300px;background-color:#b0e0e6;}

HTML:
<div class="alignBottomright">this div will be placed 10px from bottom of the page and 100px from right of page</div>


8.1 Pseudo Class: lang
this modifys the <q> tag, changing it from default " as quote tags to something else, and we can have multiple function for it.

CSS:
q:lang(tilder) {quotes: "~" "~";}
q:lang(carot) {quotes: "^" "^";}

HTML:
<p>Some text <q lang="carot">A quote in a paragraph</q> Some text.</p>
<p><q lang="tilder">Internet Explorer 8 (and higher)</q> supports the :lang pseudo class
if a !DOCTYPE is specified.</p>

8.2 Pseudo Class: focus (must SEE!)
Note: Internet Explorer 8 (and higher) supports the :focus pseudo-class if a !DOCTYPE is specified.
  • when you click on an element and that element is in focus, then apply css to that element
  • The :focus pseudo-class adds special style to an element that has keyboard input focus.
  • unfortunately, only works for 'input' elements ONLY 
Example:
CSS: input:focus {background-color:yellow;}

HTML:
<form>Name: <input type="text" name="lname" /></form>

8.3 Pseudo Class: different style for different links

Example
CSS:
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

HTML:
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>

8.3 Pseudo Class, :firstchild
  • style is applied to first match in the element.
Example:Match the first <i> element in all <p> elements

CSS: p > i:first-child {font-weight:bold }

HTML:
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>


9. Pseudo Element.
  • :after - Adds content after an element
  • :before - Adds content before an element
  • :first-letter - Adds a style to the first character of a text
  • :first-line - Adds a style to the first line of a text
Example:
CSS:
p:first-letter {color:#ff0000;font-size:xx-large;}
p:first-line {color:#0000ff;font-variant:small-caps;}
p:before {content:url(smiley.gif);}
p:after{content:url(smiley.gif);}

10. Attribute Selector
we can define custom attributes for the html elements

Example:
CSS: [redText] {color:blue;}

HTML:
<h1 redText>Hello world</h1>
<div redText>hi there im a div</div>
<a redText href="http://w3schools.com">W3Schools</a>


Example 2: (Attribute and Value Selector)
CSS: [title=W3Schools]{border:5px solid green;}
HTML: <h1 title="W3Schools">Hello world</h1>


Example 3: (wildcard / multiple values) - The example below styles all elements with a title attribute that contains a specified value. This works even if the attribute has space separated values:

CSS: [title~=hello]{color:blue;}
HTML:
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</h1>

Example 4: form styling

<style>
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow;}
input[type="button"] { width:120px; margin-left:35px; display:block;}
</style>
</head> <body>

<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">

11. Example of Transparent Div on an Image.

URL: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

Sample code:
CSS:
div.background {  width: 500px;  height: 250px;  background: url(klematis.jpg) repeat;  border: 2px solid black;}
div.transbox {  width: 400px;  height: 180px;  margin: 30px 50px;  background-color: #ffffff;  border: 1px solid black;  filter:alpha(opacity=60);  opacity:0.6;}
div.transbox p {  margin: 30px 40px;  font-weight: bold;  color: #000000;}

HTML:
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)