css

css

CSS - Cascading Style Sheets is a styles which defines how to display HTML elements. Styles CSS be saved in external .css files which saves a lot of work! External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.

CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:

p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line.

p
{
color:red;
text-align:center;
}

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p{
font-family:"Times New Roman", Times, serif;
font-size: 16px;
text-align:left;
color:black;
}
This is a paragraphe.

Fonts

Common fonts to different OS versions
Font- family example
Font Size With Pixels example
Font Size With Em
text-align Property example

Internal Style Sheets

<head>
<style type="text/css">
h1{
font-family:"Times New Roman", Times, serif;
font-size: 32px;
font-weight:bold;
color: #00000;
text-align:left;
}
</style>
</head>

This is a header h1.

font-weight example
Color Values
colors example
colors scheme designer

Background-color Property

body{
background-color:yellow;
}
h1{
background-color:#00ff00;
}
p{
background-color:rgb(255,0,255);
}

THIS IS A HEADER

this is paragraphe

background-color example

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

<p style="color:sienna;margin-left:150px">This is a paragraph.</p>
This is a paragraph.

External Style Sheet
An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<link rel="stylesheet" type="text/css" href="style.css" />
style.css

Background-image

body{
{ background-image:url('images/fond/street.jpg');
}

background-image example

Link pseudo-class - specify the color of links:

a:link {
color: blue;
text-decoration:underline;}
/* unvisited link */

a:visited {
color: red;
text-decoration: underline;}
/* visited link */

a:hover {
color: green;
text-decoration:blink;}
/* mouse over link */

a:active {
color: yellow;
text-decoration: none;}
/* selected link */

CSS :link pseudo-class

Cybercultures

GNU/Linux

data visualisation

link pseudo-class example
text-decoration example

The div tag defines a division or a section in an HTML document.
It is often used to group block-elements to format them with styles.

First we will create div "textblock" which will be displayed in white block 50px from the left of the page and 150px from the top of the page.
With absolute positioning, an element can be placed anywhere on a page.

/* copy to your .css */
#textblock {
background-color:white;
border: 1px dotted;
position: absolute;
top:150px;
left: 50px;
width:500px;
height:450px;
}


<div id="textblock">
Replace this text by all of your headers and paragraphs
</div>

Border examples

position absolute examples

The div "banner" will be placed in block 50px from the left of the page and 30px from the top of the page. We will insert inside an image.

/* copy to your .css */
#banner {
top:30px;
left: 50px;
position: absolute;
}


<div id="banner">
<img src="images/banner.png" width="750" alt="banner"/>
</div>

Create a div #menu in your .css file and specify:
a) background-color:white;
b) top:150px;
c) left: 600px;
d) width: 150px;
e) height:450px;
f) The position should be absolute.

In your html page, inside of div "menu", place links:
a) to your "page1.html " which is open in the same window
b) to the external website which is open in the new window

In your css file, inside of div "menu", create a border:
a) dotted and 1px thick

Change a property of your paragraphe and header in your css file
For the header specify margin:
a) for left side: 10px
b) for the top:10px
c) and padding for the left side: 30px

For the paragraphe specify padding:
a) for the left side: 30px.
The Box examples
Padding examples
Margin examples

Add any image into your html page
a) place it on the left side of the text.
Float example

Work with background:
a) Change a color
b) replace color by image
- background-images are placed in folder: images/fond

Change a property of links in your css file

references

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_span

http://www.w3schools.com/css/css_examples.asp

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/css/pr_pseudo_hover.asp

http://www.w3schools.com/CSS/css_font.asp

http://ampsoft.net/webdesign-l/WindowsMacFonts.html

http://www.w3schools.com/Css/css_boxmodel.asp

http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/css/pr_margin.asp

http://www.w3schools.com/css/pr_class_float.asp

http://www.w3schools.com/css/css_background.asp

css

THIS IS A HEADER

references