Difference between revisions of "Web-site-notes"
(→About CSS) |
(→About CSS) |
||
| Line 25: | Line 25: | ||
A CSS rule consists of a selector and one or more declarations. Each declaration has a property and a value. In this example, the selector is the HTML element '''h1''', which represents all h1 html tags, and the declarations specify properties '''color''' and '''text-decoration''' with values '''green''' and '''underline'''. | A CSS rule consists of a selector and one or more declarations. Each declaration has a property and a value. In this example, the selector is the HTML element '''h1''', which represents all h1 html tags, and the declarations specify properties '''color''' and '''text-decoration''' with values '''green''' and '''underline'''. | ||
| − | + | <br><br><nowiki>h1 {color:green; text-decoration: underline;}</nowiki> | |
| − | You can also group elements together in the selector like this: | + | <br><br>You can also group elements together in the selector like this: |
| − | + | <br><br><nowiki>h1, h2, p {color:red;}</nowiki> | |
| − | So why is it called a "selector?" The way I understand it, the HTML code is parsed without the CSS stuff first, creating the internal data structure, the Data Object Model (DOM.) The DOM can be manipulated directly using JavaScript code, or another language, say Python. So the DOM is created, and then the style is applied to it. The objects a CSS rule acts on is specified through a '''selector'''. So if the selector is '''p''', the rule will be applied to all of the paragraph ‹p› objects in the DOM. | + | =====So why is it called a "selector?"===== |
| + | The way I understand it, the HTML code is parsed without the CSS stuff first, creating the internal data structure, the Data Object Model (DOM.) The DOM can be manipulated directly using JavaScript code, or another language, say Python. So the DOM is created, and then the style is applied to it. The objects a CSS rule acts on is specified through a '''selector'''. So if the selector is '''p''', the rule will be applied to all of the paragraph ‹p› objects in the DOM. | ||
Selectors can match HTML elements as shown above, or they can use the following matching criteria... | Selectors can match HTML elements as shown above, or they can use the following matching criteria... | ||
Revision as of 20:28, 21 June 2021
This is stuff about my web site, www.edburdick.net
Contents
This Wiki
This wiki is part of my edburdick.net web site. These pages are notes about new learnings and interesting challenges I have run across in building and maintaining the site.
My photo pages
The vast majority of the space used on www.edburdick.net is photos and a few videos. Most of the photo albums are created using jAlbum, a great program (free with small ads on your albums, $39 one-time charge for basic license with no ads) for creating web-based photo albums. jAlbum has a "skinnable" user interface, meaning that a wide variety of different album layouts and capabilities can be designed and implemented by users. Some of the skins require a modest license fee, but most are free. I used a skin called Matrix for a long time because it creates the illusion when you click on a thumbnail that the thumbnail just expands to fill the screen with your photo, and then allows you to easily start a slide show or go to the next or previous photo. But more lately, with all of the small screen devices like smartphones and tablets, I spent some time searching for skins that do well with the "swiping" type user interface. I started using Turtle, maybe the oldest skin, but which has kept up very well. More recently, better responsive skins have shown up. My most recent at this point is PhotoSwipe, which does a good job with swiping on a phone, but also has a good interface for a laptop. For my top level index page, I use JavaScript to directly generate the page from and XML definition file, which makes it easy to add albums to the list.
Before using jAlbum, I wrote my own software to general my albums from text files, but jAlbum with skins makes much nicer albums in much less time. Click here to see my photo site.
Making things responsive with CSS
Things have changed since I started all of this web stuff. Because most web browsing these days is done with phones, my pages are way out of step with screen sizes, so it is time to do something about it. The other big change is the progress made with CSS ("Cascading Style Sheets",) including ways of modifying content to be displayed with different layout on different screen sizes and even on landscape vs portrait orientations.
Learning more about CSS
I have used CSS for style stuff like text fonts and sizes, etc, but I have not used the stuff for making my pages responsive. As I learn stuff, I am recording it here, just to have a place to keep notes for myself. Maybe others can benefit from it.
About CSS
CSS, an acronym for Cascading Style Sheets, is a formal way to set styles, like colors, fonts, and the part I am trying to learn about, page layout. It is not HTML or JAVASCRIPT, but is a separate language, quite a bit different from other web languages, which I find a bit annoying, but so be it. Based on what I know at this point, you define "classes" in CSS, and use them in the other code on the page. Each class defines style stuff, like text size and color, and layout. Then you can write some code in HTML and assign a class to it so that it will be formatted based on that class's style. The CSS code is surrounded by the <style> and </style> tags, and this block is inside of the <head> </head> tags. You can also use one CSS block for multiple pages by putting it in a separate file and linking to it like this...<link rel="stylesheet" href="mystyle.css">, also inside of the <head> </head> block. The CSS file, mystyle.css in this example, is just CSS code without the <style> </style> tags. You can also build up a style by including css files in other css files using something like this: @import "mystyle2.css";
A CSS rule consists of a selector and one or more declarations. Each declaration has a property and a value. In this example, the selector is the HTML element h1, which represents all h1 html tags, and the declarations specify properties color and text-decoration with values green and underline.
h1 {color:green; text-decoration: underline;}
You can also group elements together in the selector like this:
h1, h2, p {color:red;}
So why is it called a "selector?"
The way I understand it, the HTML code is parsed without the CSS stuff first, creating the internal data structure, the Data Object Model (DOM.) The DOM can be manipulated directly using JavaScript code, or another language, say Python. So the DOM is created, and then the style is applied to it. The objects a CSS rule acts on is specified through a selector. So if the selector is p, the rule will be applied to all of the paragraph ‹p› objects in the DOM.
Selectors can match HTML elements as shown above, or they can use the following matching criteria...
- All elements. This is just an asterisk...
* {color:black;} - The element with a specific HTML id...
#address {color:blue}- This would select the tag <p id=#address>
- Elements with a designated class, expressed as .classname
- .redheading {color:red;} would select <h1 class="readheading">
- Elements of a specific type with a designated class, expressed as element.classname
- h2.blueheading {color:blue;} would select <h2 class="blueheading">, but not <h1 class="blueheading">.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Adding this to the <head> section of the page provides a way for code in the page, including CSS code, to find out how wide the screen of the client device is. The initial-scale value of 1.0 just tells the browser to do no zooming when the page is first loaded.
