CSS: Difference between revisions
(→CSS) |
|||
| Line 3: | Line 3: | ||
To quickly test CSS code, go to online html editor website to try eg [http://htmledit.squarefree.com/ squarefree.com]. | To quickly test CSS code, go to online html editor website to try eg [http://htmledit.squarefree.com/ squarefree.com]. | ||
= CSS = | = CSS = | ||
* [http://www.makeuseof.com/tag/simple-css-code-examples/ PROGRAMMING 10 Simple CSS Code Examples You Can Learn in 10 Minutes] | |||
== Syntax == | == Syntax == | ||
<pre> | <pre> | ||
Revision as of 18:32, 13 June 2017
The information is obtained from w3schools.com.
To quickly test CSS code, go to online html editor website to try eg squarefree.com.
CSS
Syntax
p
{
color:red;
text-align:center;
}
where p is called selector and anything inside {} is declarations with a format of property:value.
Comments
A CSS comment starts with /* and ends with */. Comments can also span multiple lines
Selectors
element selector
p { text-align:center;color:red; }
The html example is
<p>Every paragraph will be affected by the style.</p>
id selector
#para1 { text-align:center;color:red; }
The html example is
<p id="para1">Hello World!</p>
class selector
.center { text-align:center;color:red; }
You can also specify that only specific HTML elements should be affected by a class.
p.center { text-align:center;color:red; }
The html example is
<h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p>
Real example in Chapter 9 <Style3Column.htm> of Creating a Website. The CSS has
.Header {
text-align: center;
background-color: rgb(210,210,210);
color: white;
}
.LeftPanel {
position: absolute;
top: 75px;
left: 10px;
width: 150px;
background-color:#eee;
border-width: 1px;
border-style: solid;
border-color: black;
padding-bottom: 8px;
}
.RightPanel {
position: absolute;
top: 75px;
right: 10px;
width: 150px;
background-color:#eee;
border-width: 1px;
border-style: solid;
border-color: black;
padding-bottom: 8px;
}
.CenterPanel {
margin-left: 161px;
margin-right: 161px;
}
The Html has
<body> <div class="Header"> ... </div> <div class="LeftPanel"> ... </div> <div class="RightPanel"> ... </div> <div class="CenterPanel"> ... </div> </body>
group selectors
h1,h2,p { text-align:center;color:red; }
The html example is
<h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p>
Three ways to insert CSS
External style sheet
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal style sheet
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>
Inline style sheet
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
Cascading order (last one has the highest priority)
- Browser default
- External style sheet
- Internal style sheet (in the head section)
- Inline style (inside an HTML element)
Background color/image
body {background-color:#b0c4de;}
body {background-image:url("paper.gif");}
body {background:#ffffff url("img_tree.png") no-repeat right top;}
A simple example is this page.
Text
Color, alignment, decoration and indentation, fonts, styles
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
a {text-decoration:none;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
p {text-indent:50px;}
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Links
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
Lists
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
Tables
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
See here for a link to create a fancy table.
Border
We can create border for a paragraph or an image (CSS [attribute~=value] Selector).
Padding
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
Dimension (Width and height)
img.normal { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }
Positioning
http://www.w3schools.com/css/css_positioning.asp How to show overflow in an element using scroll]
Float
- An image with a caption that floats to the right
- the example of creating a horizontal menu
- the example of creating a homepage without tables (partition of a webpage)
Horizontal Align
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
Pseudo-elements
The ::first-line pseudo-element is used to add a special style to the first line of a text.
li { float:left; }
a { display:block; width:60px; }
Image gallery
Image Opacity/Transparency
- Creating transparent images - Hover effect
- Creating a transparent box with text on a background image
- Text in Transparent Box
Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
All Examples
http://www.w3schools.com/css/css_examples.asp
CSS3
Box
- Shadow
- Rounded corners
2D transform
Transition
Animation
Multiple columns
Check out the last example