Kenneth: /* Hide */

2024-02-26T04:36:38Z

Hide

← Older revision		Revision as of 04:36, 26 February 2024
Line 144:		Line 144:
	=== Hide ===		=== Hide ===

	<div style="display: none;">Hide this div</div>		<div style="display: none;">Hide this div</div>

	== Selectors ==		== Selectors ==

Kenneth: /* Visibility */

2024-02-26T04:36:24Z

Visibility

← Older revision		Revision as of 04:36, 26 February 2024
Line 141:		Line 141:
	JS:		JS:
	object.style.visibility="hidden"		object.style.visibility="hidden"

			=== Hide ===

			<div style="display: none;">Hide this div</div>

	== Selectors ==		== Selectors ==

Kenneth: /* Styling Links */

2016-12-15T04:40:23Z

Styling Links

New page

== Cascading Style Sheets ==

Cascading Style Sheets (CSS)

== CSS Sources ==

CSS inherits properties in the order they are loaded. Those that come later in a document take precedence over any earlier properties. Anything that you don't specifically change will '''cascade''' (also called inheritance) from the previous property.

Inline Styles:
<pre>
<p style="color: red;">...</p>
</pre>

Embedded Styles:
<pre>
<style type="text/css">
p {
color: red;
}
</style>
</pre>

External Styles:
<pre>
<link href="style1.css" rel="stylesheet"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</pre>

== Structure ==

;selector: what elements to apply styles to ('p {')

<pre>
p { /* selector */
h1 a { /* contextual selector */
#nav a { /* id contextual selector */
h1, h2, h3 { /* group selector */
.fun { /* class selector */
blockquote.fun { /* targeted class selector */
</pre>

;declaration: property and value ('color: red;')

;property: ('color:')

;value: ('red;')

;rule: combination of selector and declarations

Sources:
* Inline
* Embedded
* External

== Style Units ==

* % (percentage of default font zie)
* px (pixels - a dot on the computer screen)
* pt (points - 1 pt is the same as 1/72 inch)
* em (size of M - see below)

;em: "1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses" [http://w3schools.com/cssref/css_units.asp]

Source: CSS Units - http://w3schools.com/cssref/css_units.asp

== Styling Links ==

Link States (pseudo-classes)
<pre>
a {...}
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
</pre>

Remove underline:
<pre>
a { text-decoration: none; }

<a style="text-decoration: none;" href="http://www.google.com"/>
</pre>

== Comments ==

<pre>
/* this is a comment */
</pre>

== Color ==

<pre>
color: green;
color: #00ff00; /* RGB */
color: rgb(0,255,0);
background-color: cyan;
</pre>

== Font ==

Sans-serif typefaces like Arial are clean and modern-looking; serifed typefaces like Times New Roman have little “feet.”

<pre>
color: red;
background-color: green;
font-family: Verdana;
font-family: Helvetica, Arial, sans-serif;
font-size: x-large; /* 'medium', ... */
font-weight: bold; /* 'bold' or 'normal' */
font-style: normal; /* 'normal' or 'italic' */
text-decoration: none; /* none, underline, overline, line-through */
</pre>

font stack:
font-family: Verdana, Helvetica, Arial, sans-serif;

font sizes:
* xx-small
* x-small
* small
* medium
* large
* x-large
* xx-large
* 140% (percentage)
* 1.2em .8em (em units - 1em is hight of M)
* 20px (pixels)
* 20pt (points)

== Strike through ==

<pre>
<pre style="text-decoration: line-through;">...</pre>
</pre>

== Visibility ==

visibility:hidden;
visibility:visible;

JS:
object.style.visibility="hidden"

== Selectors ==

<pre>
/* element selector */
p {
color: blue;
}

/* unique id selector */
#id_select {
color: green;
}

/* general class selector */
.example_class {
color: red;
}
</pre>

<pre>
<p>Blue</p>

<span id="id_select">green</span>

<span class="example_class another_class">red</span>
</pre>

Note: As IDs are most specific, they can trump classes.

== Division ==

The <div> tag stands for division. These can be nested.

== Borders ==

<pre>
.highlight {
border-width: 5px;
border-style: solid;
border-color: black;
}

.highlight {
border: 5px solid black; /* also border-top, border-bottom, etc. */
}

.top_highlight { /* top, bottom, left, right */
border-top-width: 5px;
border-top-style: solid;
border-top-color: black;
}
</pre>

Border styles:
* solid
* dashed
* dotted
* double
* etc...

No border (cancel previous definition)
border: none;

== Rounded Corners ==

border-radius: 15px;

References:
* Border-radius: create rounded corners with CSS! - CSS3 . Info - http://www.css3.info/preview/rounded-border/

== Box Model ==

=== Margins, Borders and Padding ===

Box Model: Margin (out), Border, Padding (in), width and height

<pre>
line-height: 125%; /* spacing between text lines */
padding: 15px; /* padding between element and border */
padding: 5%;
margin: 30px;
margin-top: 5px; /* margin-top, margin-bottom, margin-left, margin-right */
width: 50%;
height: 200px;
padding: 0; /* no need to specify unit with 0 */
margin: 0;
</pre>

== Positioning ==

=== Center ===

<pre>
<div style="text-align: center;">...</div>
</pre>

style="width:70%; margin:0 auto;"

=== Absolute ===

Based off of distance from top left of viewport. (Except for nested "position" elements)
<pre>
position: absolute;
top: 200px;
left: 200px;
</pre>

Note: if you nest absolute "blocks", within another "position" element, the inner position will be based off of the outer block.

=== Relative ===

Based off of distance from current element position. (Nudge in a direction)

<pre>
position: relative;
top: 10px;
left: 10px;
</pre>

Note: this is the best for text reflow. Use 'em' units for [http://www.alistapart.com/articles/elastic Elastic Desgin].

=== Float ===

Float causes an element to hug an edge, and have other elements wrap around it. This allows you to get multi column affect like newspapers.

<pre>
float: right; /* left, right, none */
width: 300px;
</pre>

Note: To avoid L shape around float object, use 'padding' property on adjacent element that will reflow.
<pre>
.content_constrained {
padding-right: 310px;
}
</pre>

<pre>
clear: both; /* ignore a float on your left, right, none or both */
</pre>

---

<pre>
<div class="container">
<div class="header">Header</div>
<div class="column" id="leftcolumn">left column</div>
<div class="column" id="rightcolumn">right column</div>
</div>
</pre>

<pre>
.main { margin: 0 auto; width: 80%; }
.main:after {
display: block;
clear: both;
content: "";
}
.column { width: 50%; min-height: 500px; margin-bottom: 20px;
float: left;
display: block;
}
#leftcolumn { background-color: blue }
#rightcolumn { background-color: red; }
.header { width: 100%; height: 100px; background-color: yellow;
clear: both;
}
</pre>

=== Center Float ===

CSS Horizontal Align - http://www.w3schools.com/css/css_align.asp

center:
<pre>
margin-left:auto;
margin-right:auto;
width: 660px;
text-align: center;
</pre>

---

CSS examples - Centred Floats - http://pmob.co.uk/pob/centred-float.htm

<pre>
#center-float{
float:right;
position:relative;
left:-50%;
text-align:left;
}
</pre>

center:
<pre>
float:left;
position:relative;
right:-25%;
border: 2px solid black;
width: 50%;
text-align:center;
</pre>

center left:
<pre>
.left {
float:left;
position:relative;
right:-50%;
text-align:center;
}
</pre>

center right:
<pre>
.right {
float:right;
position:relative;
left:-50%;
text-align:center;
}
</pre>

== Styling Lists ==

<pre>
list-style-type: none; /* circle, disc, square, none */
</pre>

== Background Image ==

CSS Background Image: (repeat horizontally and vertically)
<pre>
#home {
background-image: url('home_background.gif');
}
</pre>

To repeat only in x or y:
background-repeat:repeat-x;
background-repeat:repeat-y;

No repeat:
background-repeat:no-repeat;
background-position:right top;

Shorthand:
body {background:#ffffff url('img_tree.png') no-repeat right top;}

Fill background:
background-repeat:no-repeat;
background-size:100% 100%;

background-repeat:no-repeat;
background-size:cover;

<pre>
body {
background-image: url('background.jpg');
background-repeat:no-repeat;
background-size:cover;
}
</pre>
References:
* CSS Background - http://www.w3schools.com/css/css_background.asp

== Styling Images ==

Inline Image:
<img src="circle.jpg" width="200" height="200" alt="circle"/>

CSS Background Image: (repeat horizontally and vertically)
<pre>
#home {
background-image: url('home_background.gif');
}
</pre>

Make sure to put a default color behind:
background-color: #aebbdb;

Repeat horizontally: (gradients)
<pre>
background-repeat:repeat-x;
</pre>

Repeat vertically: (gradients)
<pre>
background-repeat:repeat-y;
</pre>

No repeat:
<pre>
background-repeat:no-repeat;
background-position:right top; /* (left, center, right) (top, center, bottom) default: top left*/
</pre>

Background - Shorthand property:
<pre>
body { background: #ffffff url('img_tree.png'); }
body { background: #ffffff url('img_tree.png') no-repeat right top; }
</pre>

Fixed height/width:
<pre>
.sunset {
border: 1px solid black;
color: white;
font-weight: bold;
font-size: 300%;
background: black url(sunset.jpg);
width: 650px;
height: 125px;
padding-left: 50px;
padding-top: 400px;
}
<div class="sunset">Sunsets are a gift of nature.</div>
</pre>

CSS Background - w3schools - http://www.w3schools.com/css/css_background.asp

Transperency (opacity):
<pre>
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</pre>

Note: This will work with 'block' elements as well.

See: Transparency on css background image, that doesn't affect child elements - http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

=== 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.

CSS Image Sprites - http://www.w3schools.com/css/css_image_sprites.asp

<pre>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</pre>

Hover Effect:
<pre>
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</pre>

Note: Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

== Navigation Bar ==

Button Bar:
<pre>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</pre>

Remove Buttons:
<pre>
ul {
list-style-type:none;
margin:0;
padding:0;
}
</pre>

Vertical:
<pre>
a {
display:block;
width:60px;
}
</pre>

Horizontal:
<pre>
li {
display:inline;
}
</pre>

Equal width with Horizonal Float:
<pre>
li {
float:left;
}
a {
display:block;
width:60px;
}
</pre>

CSS Navigation Bar - w3schools - http://www.w3schools.com/css/css_navbar.asp

== Footer ==

"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done."

HTML:
<pre>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</pre>

CSS:
<pre>
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}

/* And one simple CSS rule for IE 6 and IE 5.5: */
#container {
height:100%;
}
</pre>

Source: Get down! How to keep footers at the bottom of the page - http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

See also: A CSS Sticky Footer - http://ryanfait.com/sticky-footer/ [http://ryanfait.com/resources/footer-stick-to-bottom-of-page/]

== Styling Tables ==

<pre>
table {
border-collapse: collapse;
border: 1px solid black;
}
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}
td {
border: 1px solid black;
padding: 0.2em;
}
</pre>

classifying your tables:

<pre>
table.rates { ... }
table.rates th, table.rates td { ... }

<table class="rates">...
</pre>

== Styling Forms ==

Fixed width labels:
<pre>
form.contact label.fixedwidth {
display: block; /* convert to block element so we can set width */
width: 240px;
float: left; /* to stop newline after block element */
}
</pre>

Convert an inline element into a block-level element:
display: block

== CSS Button Creator ==

Best CSS Button Generator: Create CSS-only Buttons - http://www.bestcssbuttongenerator.com/

== Fancy Sections ==

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

/* general stuff */
body
{
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 11pt;
}

h2.section-head-open
{
font-size: 14pt;
margin-bottom: 0pt;
padding: 4pt;
background-color: #e6edff;
border-bottom: none;
border-top: 1pt solid #888888;
border-left: 1pt solid #888888;
border-right: 1pt solid #888888;
}

.section-body
{
margin-top: 0pt;
border-bottom: 1pt solid #888888;
border-left: 1pt solid #888888;
border-right: 1pt solid #888888;
overflow: auto;
}

.section-content
{
padding: 8pt;
}

</style></head>
<body>
<h1>Test</h1>
<h2 class="section-head-open">
Project Status
</h2>
<div class="section-body">
<div class="section-content" id="status-content">
This is a test.
</div>
</div>

</body>
</html>
</pre>

== Debugging with Inspect Element ==

To investigate further a particular page element, right click on the element and select "Inspect Element".

== CSS Frameworks ==

[[Bootstrap]]

== keywords ==

[[Category:Programming]]
[[Category:Web Development ‎]]

Cascading Style Sheets - Revision history

Kenneth: /* Hide */

Kenneth: /* Visibility */

Kenneth: /* Styling Links */