CSS: Difference between revisions
(→SASS) |
|||
(35 intermediate revisions by the same user not shown) | |||
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> | ||
Line 17: | 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 | ||
< | |||
{| 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; } | ||
</ | </syntaxhighlight> | ||
The html example is | The html example is | ||
< | <syntaxhighlight lang="html"> | ||
<p>Every paragraph will be affected by the style.</p> | <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 === | ||
< | id selector is for one instance. | ||
<syntaxhighlight lang="css"> | |||
#para1 { text-align:center;color:red; } | #para1 { text-align:center;color:red; } | ||
</ | </syntaxhighlight> | ||
The html example is | The html example is | ||
< | <syntaxhighlight lang="html"> | ||
<p id="para1">Hello World!</p> | <p id="para1">Hello World!</p> | ||
</ | </syntaxhighlight> | ||
=== class selector === | === class selector, "element.class" selector === | ||
< | https://www.w3schools.com/cssref/sel_class.asp | ||
<syntaxhighlight lang="css"> | |||
.center { text-align:center;color:red; } | .center { text-align:center;color:red; } | ||
</ | </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. | ||
< | <syntaxhighlight lang="css"> | ||
p.center { text-align:center;color:red; } | p.center { text-align:center;color:red; } | ||
</ | </syntaxhighlight> | ||
The html example is | The html example is | ||
< | <syntaxhighlight lang="html"> | ||
<h1 class="center">Red and center-aligned heading</h1> | <h1 class="center">Red and center-aligned heading</h1> | ||
<p class="center">Red and center-aligned paragraph.</p> | <p class="center">Red and center-aligned paragraph.</p> | ||
</ | </syntaxhighlight> | ||
Real example in Chapter 9 <Style3Column.htm> of Creating a Website. The CSS has | Real example in Chapter 9 <Style3Column.htm> of Creating a Website. The CSS has | ||
< | <syntaxhighlight lang="css"> | ||
.Header { | .Header { | ||
text-align: center; | text-align: center; | ||
Line 85: | Line 113: | ||
margin-right: 161px; | margin-right: 161px; | ||
} | } | ||
</ | </syntaxhighlight> | ||
The Html has | The Html has | ||
< | <syntaxhighlight lang="html"> | ||
<body> | <body> | ||
<div class="Header"> ... </div> | <div class="Header"> ... </div> | ||
Line 93: | Line 122: | ||
<div class="RightPanel"> ... </div> | <div class="RightPanel"> ... </div> | ||
<div class="CenterPanel"> ... </div> | <div class="CenterPanel"> ... </div> | ||
<div class="Class1 Class2"> ... </div> | |||
</body> | </body> | ||
</ | </syntaxhighlight> | ||
=== group selectors === | === group selectors === | ||
Line 109: | Line 139: | ||
== 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 115: | Line 146: | ||
</head> | </head> | ||
</pre> | </pre> | ||
=== Internal style sheet === | === Internal style sheet === | ||
<pre> | <pre> | ||
Line 136: | Line 168: | ||
# Inline style (inside an HTML element) | # Inline style (inside an HTML element) | ||
== | == 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 142: | 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 167: | 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 == | ||
< | 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 */ | ||
</ | </syntaxhighlight> | ||
== Lists == | == Lists == | ||
Line 196: | 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. | ||
== Dimension (Width and height) == | == Dimension (Width and height) == | ||
Line 222: | 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] == | ||
< | 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; | ||
} | } | ||
</ | </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 255: | 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 272: | 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 {}] | |||
= SASS = | |||
<ul> | |||
<li>https://www.w3schools.com/sass/sass_intro.asp | |||
<li>Simpel example from Copilot | |||
<ul> | |||
<li>Shell | |||
<syntaxhighlight lang='sh'> | |||
mkdir project; cd project | |||
npm init # package.json will be generated | |||
npm install sass # node_modules directory and package-lock.json | |||
mkdir scss | |||
nano scss/styles.css | |||
nano package.json | |||
npm run sass # Compiled scss/styles.scss to css/styles.css. | |||
# Sass is watching for changes. Press Ctrl-C to stop. | |||
</syntaxhighlight> | |||
<li>'''scss/styles.scss''' file | |||
<syntaxhighlight lang='css> | |||
$primary-color: #3498db; | |||
$secondary-color: #2ecc71; | |||
body { | |||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |||
color: $primary-color; | |||
} | |||
h1 { | |||
color: $secondary-color; | |||
border-radius: 10px; | |||
} | |||
nav { | |||
ul { | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
li { | |||
display: inline-block; | |||
margin-right: 10px; | |||
a { | |||
text-decoration: none; | |||
color: $primary-color; | |||
&:hover { | |||
color: $secondary-color; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<li>'''package.json''' file. Add "scripts": { "sass": "sass --watch scss:css" } to the file. | |||
<pre> | |||
{ | |||
"name": "myproject", | |||
"version": "1.0.0", | |||
"description": "", | |||
"main": "index.js", | |||
"scripts": { | |||
"sass": "sass --watch scss:css" | |||
}, | |||
"author": "", | |||
"license": "ISC", | |||
"dependencies": { | |||
"sass": "^1.78.0" | |||
} | |||
} | |||
</pre> | |||
<li>'''index.html''' file | |||
<syntaxhighlight lang='html'> | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>My Project</title> | |||
<link rel="stylesheet" href="css/styles.css"> | |||
</head> | |||
<body> | |||
<h1>Hello, World!</h1> | |||
<nav> | |||
<ul> | |||
<li><a href="#">Home</a></li> | |||
<li><a href="#">About</a></li> | |||
<li><a href="#">Contact</a></li> | |||
</ul> | |||
</nav> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
<li>Example directory structure | |||
<pre> | |||
myproject/ | |||
├── css/ | |||
│ └── styles.css | |||
├── node_modules/ | |||
├── scss/ | |||
│ └── styles.scss | |||
├── package.json | |||
└── index.html | |||
</pre> | |||
</ul> | |||
<li>[https://designsystem.cancer.gov/get-started/developers NCI Design System] - Getting Started for Developers | |||
</ul> |
Latest revision as of 13:17, 13 September 2024
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)
- Browser default
- External style sheet
- Internal style sheet (in the head section)
- 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:
- Use percent (%) instead of pixels (px).
- Use margin:auto
.center { margin:auto; width:70%; background-color:#b0e0e6; }
How to Center Images
Vertical Align
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.
Sprite editor
- Pixel art
- Pixelorama 2D Sprite Editor v0.6 Adds Support For Color Palettes, Multiple Themes
- Piskel is a free online editor for animated sprites & pixel art
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
- Shadow. How to Use CSS box-shadow: 13 Tricks and Examples
- Rounded corners
2D transform
Transition
Animation
Multiple columns
Check out the last example
Free framework
9 open source CSS frameworks for frontend web development
simplecss
SASS
- https://www.w3schools.com/sass/sass_intro.asp
- Simpel example from Copilot
- Shell
mkdir project; cd project npm init # package.json will be generated npm install sass # node_modules directory and package-lock.json mkdir scss nano scss/styles.css nano package.json npm run sass # Compiled scss/styles.scss to css/styles.css. # Sass is watching for changes. Press Ctrl-C to stop.
- scss/styles.scss file
$primary-color: #3498db; $secondary-color: #2ecc71; body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: $primary-color; } h1 { color: $secondary-color; border-radius: 10px; } nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin-right: 10px; a { text-decoration: none; color: $primary-color; &:hover { color: $secondary-color; } } } } }
- package.json file. Add "scripts": { "sass": "sass --watch scss:css" } to the file.
{ "name": "myproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "sass": "sass --watch scss:css" }, "author": "", "license": "ISC", "dependencies": { "sass": "^1.78.0" } }
- index.html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Project</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>Hello, World!</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
- Example directory structure
myproject/ ├── css/ │ └── styles.css ├── node_modules/ ├── scss/ │ └── styles.scss ├── package.json └── index.html
- Shell
- NCI Design System - Getting Started for Developers