CSS: Difference between revisions

From 太極
Jump to navigation Jump to search
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
The information is obtained from [http://www.w3schools.com/css/css_intro.asp w3schools.com].
The information is obtained from [http://www.w3schools.com/css/css_intro.asp w3schools.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>
Line 16: Line 19:


== [http://www.w3schools.com/css/css_selectors.asp Selectors] ==
== [http://www.w3schools.com/css/css_selectors.asp Selectors] ==
=== element selector ===
https://www.w3schools.com/cssref/css_selectors.asp
<pre>
 
{| class="wikitable" style="text-align:right;"
|-
! selector
! style="text-align:left;" | HTML
! style="text-align:center;" | css
|- style="text-align:left;"
| '''tag'''/type/element selector
| <nowiki><p>Every paragraph will be affected by the style.</p> </nowiki>
| p {  text-align:center;color:red; }
|-
| id selector
| style="text-align:left;" | <nowiki><p id="para1">Hello World!</p> </nowiki>
| style="text-align:center;" | #para1  { text-align:center;color:red; }
|-
| class selector
| style="text-align:left;" | <nowiki><p class="center">Red and center-aligned paragraph.</p> </nowiki>
| style="text-align:center;" | .center { text-align:center;color:red; }<br />p.center { text-align:center;color:red; }
|}
 
=== "element" selector ===
<syntaxhighlight lang="css">
p {  text-align:center;color:red; }
p {  text-align:center;color:red; }
</pre>
</syntaxhighlight>
 
The html example is
<syntaxhighlight lang="html">
<p>Every paragraph will be affected by the style.</p>
</syntaxhighlight>
 
[https://www.w3schools.com/cssref/css_default_values.asp Default CSS Values for HTML Elements]


=== id selector ===
=== id selector ===
<pre>
id selector is for one instance.
 
<syntaxhighlight lang="css">
#para1  { text-align:center;color:red; }
#para1  { text-align:center;color:red; }
</pre>
</syntaxhighlight>


The html example is
The html example is
<pre>
<syntaxhighlight lang="html">
<h1 class="center">Red and center-aligned heading</h1>
<p id="para1">Hello World!</p>
<p class="center">Red and center-aligned paragraph.</p>  
</syntaxhighlight>
</pre>


=== class selector ===
=== class selector, "element.class" selector ===
<pre>
https://www.w3schools.com/cssref/sel_class.asp
<syntaxhighlight lang="css">
.center { text-align:center;color:red; }
.center { text-align:center;color:red; }
</pre>
</syntaxhighlight>
You can also specify that only specific HTML elements should be affected by a class.
You can also specify that only specific HTML elements should be affected by a class.
<pre>
<syntaxhighlight lang="css">
p.center { text-align:center;color:red; }
p.center { text-align:center;color:red; }
</pre>
</syntaxhighlight>
 
The html example is
<syntaxhighlight lang="html">
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</syntaxhighlight>
 
Real example in Chapter 9 <Style3Column.htm> of Creating a Website. The CSS has
<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>
 
The Html has
<syntaxhighlight lang="html">
<body>
<div class="Header"> ... </div>
<div class="LeftPanel"> ... </div>
<div class="RightPanel"> ... </div>
<div class="CenterPanel"> ... </div>
<div class="Class1 Class2"> ... </div>
</body>
</syntaxhighlight>


=== group selectors ===
=== group selectors ===
<pre>
<pre>
h1,h2,p { text-align:center;color:red; }
h1,h2,p { text-align:center;color:red; }
</pre>
The html example is
<pre>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</pre>
</pre>


== Three ways to insert CSS ==
== Three ways to insert CSS ==
* External style sheet
=== External style sheet: link tag ===
[https://www.w3schools.com/Tags/tag_link.asp HTML: link tag], [https://www.sitepoint.com/css-printer-friendly-pages/ How to Create Printer-friendly Pages with CSS].
<pre>
<pre>
<head>
<head>
Line 53: Line 146:
</head>
</head>
</pre>
</pre>
* Internal style sheet
 
=== Internal style sheet ===
<pre>
<pre>
<head>
<head>
Line 63: Line 157:
</head>
</head>
</pre>
</pre>
* Inline style sheet
=== Inline style sheet ===
<pre>
<pre>
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
</pre>
</pre>


Cascading order (last one has the highest priority)
=== Cascading order (last one has the highest priority) ===
# Browser default
# Browser default
# External style sheet
# External style sheet
Line 74: Line 168:
# Inline style (inside an HTML element)
# Inline style (inside an HTML element)


== Background color/image ==
== Box Model ==
* https://www.w3schools.com/Css/css_boxmodel.asp
* https://youtu.be/yfoY53QXEnI?t=25m18s
 
=== Border ===
We can create border for a [http://www.w3schools.com/css/css_border.asp paragraph] or an [http://www.w3schools.com/css/css_attribute_selectors.asp image] (CSS [attribute~=value] Selector).
 
=== Padding ===
Space between texts and border box.
<syntaxhighlight lang="css">
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
</syntaxhighlight>
 
== Color ==
* [https://www.makeuseof.com/css-background-color/ How to Change the Background Color With CSS]
* [https://www.makeuseof.com/css-font-color/ How to Use CSS to Change Font Color]
 
<pre>
<pre>
body {background-color:#b0c4de;}
body {background-color:#b0c4de;}
Line 80: Line 193:
body {background:#ffffff url("img_tree.png") no-repeat right top;}
body {background:#ffffff url("img_tree.png") no-repeat right top;}
</pre>
</pre>
A simple example is [http://www.electrictoolbox.com/examples/wide-background-image.html this page].


== Text ==
== Text ==
Line 105: Line 219:
p.oblique {font-style:oblique;}
p.oblique {font-style:oblique;}
</pre>
</pre>
=== Text shadow ===
[https://www.makeuseof.com/css-text-shadow-tricks-examples/ How to Use CSS text-shadow: 11 Tricks and Examples]
== CSS font size ==
* https://www.w3.org/Style/Examples/007/units.en.html
* [https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ em vs. px vs. pt vs. percent]


== Links ==
== Links ==
<pre>
https://www.w3schools.com/Css/css_link.asp
<syntaxhighlight lang="css">
a:link {color:#FF0000;}    /* unvisited link */
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:hover {color:#FF00FF;}  /* mouse over link */
</pre>
</syntaxhighlight>


== Lists ==
== Lists ==
Line 134: Line 256:
</pre>
</pre>
See [http://www.w3schools.com/css/css_table.asp here] for a link to create a fancy table.
See [http://www.w3schools.com/css/css_table.asp here] for a link to create a fancy table.
== Border ==
We can create border for a [http://www.w3schools.com/css/css_border.asp paragraph] or an [http://www.w3schools.com/css/css_attribute_selectors.asp image] (CSS [attribute~=value] Selector).
== Padding ==
<pre>
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
</pre>


== Dimension (Width and height) ==
== Dimension (Width and height) ==
Line 160: Line 271:
* the example of creating a horizontal menu
* the example of creating a horizontal menu
* the example of creating a homepage without tables (partition of a webpage)
* the example of creating a homepage without tables (partition of a webpage)
== F and Z-pattern ==
[https://www.makeuseof.com/build-f-z-patterns-using-html-and-css/ How To Build F and Z-Patterns Using HTML and CSS]


== [http://www.w3schools.com/css/css_align.asp Horizontal Align] ==
== [http://www.w3schools.com/css/css_align.asp Horizontal Align] ==
<pre>
Tips:
# Use percent (%) instead of pixels (px).
# Use margin:auto
<syntaxhighlight lang="css">
.center
.center
{
{
margin:auto;
  margin:auto;
width:70%;
  width:70%;
background-color:#b0e0e6;
  background-color:#b0e0e6;
}
}
</pre>
</syntaxhighlight>
 
== How to Center Images ==
[https://www.makeuseof.com/css-center-images/ How to Center Images With CSS]
 
== Vertical Align ==
* [https://www.w3schools.blog/css-vertical-align CSS Vertical Align]
* [https://www.makeuseof.com/css-vertical-align-position-web-elements/ How to Position Web Elements With CSS Vertical Align]


== Pseudo-elements ==
== Pseudo-elements ==
Line 193: Line 317:


Using image sprites will reduce the number of server requests and save bandwidth.
Using image sprites will reduce the number of server requests and save bandwidth.
== Sprite editor ==
* [https://en.m.wikipedia.org/wiki/Pixel_art Pixel art]
* [https://www.linuxuprising.com/2020/01/pixelorama-2d-sprite-editor-v06-adds.html?m=1 Pixelorama 2D Sprite Editor v0.6 Adds Support For Color Palettes, Multiple Themes]
* [https://www.piskelapp.com Piskel] is a free online editor for animated sprites & pixel art


== All Examples ==
== All Examples ==
http://www.w3schools.com/css/css_examples.asp
http://www.w3schools.com/css/css_examples.asp
== [https://github.com/30-seconds/30-seconds-of-css 30 Seconds of CSS] ==
mentioned in [https://lifehacker.com/learn-some-css-30-seconds-at-a-time-1823961025 this article]
== Printing ==
[https://www.makeuseof.com/format-web-page-for-printer/ Using CSS to Format Documents for Printing]
== Grid for Magazine-Style Layouts ==
[https://www.makeuseof.com/css-grid-layouts-magazine-style/ Using CSS Grid for Magazine-Style Layouts]


= CSS3 =
= CSS3 =
== [http://www.w3schools.com/css/css3_borders.asp Box] ==
== [http://www.w3schools.com/css/css3_borders.asp Box] ==
* Shadow  
* Shadow. [https://www.makeuseof.com/css-box-shadow-tricks-examples/ How to Use CSS box-shadow: 13 Tricks and Examples]
* Rounded corners
* Rounded corners


Line 210: Line 348:
== [http://www.w3schools.com/css/css3_multiple_columns.asp Multiple columns] ==
== [http://www.w3schools.com/css/css3_multiple_columns.asp Multiple columns] ==
Check out the last example
Check out the last example
= Free framework =
[https://opensource.com/article/20/4/open-source-css-frameworks 9 open source CSS frameworks for frontend web development]
== simplecss ==
[https://simplecss.org/ Simple.css {}]

Latest revision as of 13:19, 17 October 2023

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

https://www.w3schools.com/cssref/css_selectors.asp

selector HTML css
tag/type/element selector <p>Every paragraph will be affected by the style.</p> p { text-align:center;color:red; }
id selector <p id="para1">Hello World!</p> #para1 { text-align:center;color:red; }
class selector <p class="center">Red and center-aligned paragraph.</p> .center { text-align:center;color:red; }
p.center { text-align:center;color:red; }

"element" selector

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

The html example is 

<p>Every paragraph will be affected by the style.</p>

Default CSS Values for HTML Elements

id selector

id selector is for one instance. 

#para1  { text-align:center;color:red; }

The html example is 

<p id="para1">Hello World!</p>

class selector, "element.class" selector

https://www.w3schools.com/cssref/sel_class.asp 

.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>
<div class="Class1 Class2"> ... </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: link tag

HTML: link tag, How to Create Printer-friendly Pages with CSS. 

<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)

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

Box Model

Border

We can create border for a paragraph or an image (CSS [attribute~=value] Selector).

Padding

Space between texts and border box. 

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Color

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;}

Text shadow

How to Use CSS text-shadow: 11 Tricks and Examples

CSS font size

Links

https://www.w3schools.com/Css/css_link.asp 

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.

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)

F and Z-pattern

How To Build F and Z-Patterns Using HTML and CSS

Horizontal Align

Tips:

  1. Use percent (%) instead of pixels (px).
  2. Use margin:auto
.center
{
  margin:auto;
  width:70%;
  background-color:#b0e0e6;
}

How to Center Images

How to Center Images With CSS

Vertical Align

Pseudo-elements

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Navigation Bar

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.

Sprite editor

All Examples

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

30 Seconds of CSS

mentioned in this article

Printing

Using CSS to Format Documents for Printing

Grid for Magazine-Style Layouts

Using CSS Grid for Magazine-Style Layouts

CSS3

Box

2D transform

Transition

Animation

Multiple columns

Check out the last example

Free framework

9 open source CSS frameworks for frontend web development

simplecss

Simple.css {}

Retrieved from "https://wiki.taichimd.us/index.php?title=CSS&oldid=37919"