2017 Feb 08
#coding
#pm
#tutorials
CSS describes how HTML elements are displayed. Because one piece of CSS code can alter the behavior of all of any single HTML element throughout all the pages of one website (or even multiple websites), writing CSS can save loads of time and effort customizing appearances. CSS can add background images or color, borders, change font attributes such as: style, color, and/or typeface, set margins, adjust website sizes for different devices, create image galleries, all sorts of great stuff.
This is CSS:
selector {
declaration: value;
}
Or from the version of this website dated 2017.2.21:
body {
font-family: 'courier new';
font-size; 12pt;
color: white;
}
Selectors can be used to control entire elements. Just use the element's name as the selector. Or a selector can be individualized by using CLASS and/or ID in an HTML element. This is a class followed by an ID:
<p class="your_class_name"> yoga </p> <p id="your_id_name"> spinach </p>
Then within your CSS, you can identify specific style attributes to the class and/or ID.
.your-class-name {
font-weight: bold;
text-align: center;
}
#your-id-name {
font-weight: bolder;
color: orange;
}
CSS can be added to your website in three ways.
Inline CSS uses the "style="declaration: value"" within an HTML element.
<a style="color: red;" href="URL-goes-here.com"></a>
Internal CSS is added in the body using the "<style>" tag. Usually, this is organized at the top of the body element.
<style>
.class {
background-image: URL("hungry_cats.gif");
background-color: red;
font-family: courier;
}
</style>
External CSS is an external CSS page linked within the head element of your HTML page. This is a good way to have CSS code effect multiple pages.
<head> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head>
That is the basics of CSS. For in-depth attributes, I recommend bestiaschools' CSS Introduction. There you will find everything.
I will post links to resources I have found helpful here.
- CSS Introduction : w3schools.com detailed CSS page with tutorials, code snippets, etc.
- Google Prettify : CSS and JavaScript for displaying code within web browsers
- Google Prettify Themes : Prettify Google Prettify, if you catch my drift.
Share this post...
« Previous post :: Antimony, introduction
Antimony is an open-source, relying on graph composition where nodes represent primatives, 2d shapes, and loads of customizable operations and functions. The graph has an GUI akin to Grasshopper, the infamous Rhinoceros plugin. Antimony's interface includes a 3d viewport which has limited modeling capabilities that automatically log into the graph and a script editor. The script editor enables customization of all the graph nodes and is going to require more time for me to grasp. The advantage here is the algorithmic nature of the modeling. Changes can easily be applied throughout the entire history of the graph and propagate throughout...
Next post :: Design, Materials and Methods »
I would like to build a small moss (dominate) garden which has an electrical outlet of a contrasting color to green sitting on a small pole in the center. The electrical outlet is connected to a battery that is hidden in the base. The moss is organized in power modules which are connected and charging the battery. When something small is connected to the electrical outlet, the battery discharges electricity. The whole garden can be dissambled and reassembled with relative ease. A secondary objective is to make (most likely) independently powered monitoring equipment (lux, temperature, humidity, soil moisture, watt output)...