Lifestyle, CSS: colours: what is the colour ochre?

Colour discovery means constant self-tutoring. The tutor shares a find about ochre.

I’ve always thought ochre meant red; apparently, I thought wrong. It turns out that ochre is an orange color, leaning brown and yellow rather than red:

ochre background

Source:

www.99colors.net

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: HTML colors: another off-white

Tutoring web design, the tutor has become interested in off-whites. Now: from ivory to a related one.

In my post from a couple of days ago I mention the color ivory – that it’s made of 100% (of possible) red and green, but only 94% blue.

What about 100% red, 94% green, and 100% blue? Here it is as a background:

Low-green version of ivory:)

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS colours: ivory

Tutoring web design, colour is a constant consideration. The tutor shares some thoughts about the CSS colour ivory.

Lately I’ve become fascinated by off-white colours, ivory being one (in my opinion).

Where white is 100% of each of red, green, and blue, ivory is 100% red, 100% green, but 94% blue.

White background.
Ivory background.

Source:

w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: Div border on mobile phone: a possible solution?

Tutoring web design, mobile phones have their own demands. The tutor attempts to please them.

In yesterday’s post I discovered a border that showed up on my desktop but not on mobile.

Border?

 

Apparently the border-width needs to be set for a mobile phone to show it. This one is set to 2px.

Source:

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS border: shows on desktop, but not mobile?

Tutoring web design, there are so many interesting details to learn. The tutor mentions a discovery.

The div below has a red border. I can see it on my desktop, but not on my mobile phone.

Can you see the border? On mobile?

 

I’ll have to find out what to do about this:)

Source:

Meyer, Eric A. CSS Pocket Reference. Sebastopol: O’Reilly Media Inc, 2004.

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS: What is oblique font-style?

Tutoring web design, oblique font-style comes up. The tutor shows it alongside italic.

Oblique is a font-style some people describe as similar to italic.

This is oblique font-style.

This is italic font-style.

Oblique seems to slant more than italic; I like its effect. One can imagine using both font-styles in a situation where text is emphasized for different reasons.

Source:

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS: how to make a two-colored border

Tutoring web front-end, there are so many little gadgets that CSS offers. The tutor looks at the outline property.

In CSS, you can accomplish a dotted border with two different colors using a combination of the border and outline properties.

Look at me!

The div above has border set to solid and yellow, while outline is set to dotted and black. The outline-offset is the negative of the border-width, so it sits atop the border.

Source:

w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS: fine tuning by later reference

Tutoring web design, you deal with nuances. The tutor tells a quick trick for when fine tuning is needed.

If two rules appear like so

element{color:red}
element{color:green}

the element will be green (in my experience, anyway). That is, the later rule will be expressed.

Therefore, when a person has a style sheet with many elements sharing the same rule

e1,e2,e3,e4,e5{color:red}

but only wants to change one of them, they can specify the one to change in a later rule

e3{color:blue}

HTH:)

Source:

css-tricks.com

Meyer, Eric A. CSS Pocket Reference. Sebastopol: O’Reilly Media, Inc., 2004.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS: selectors: by descendant

Tutoring web design, so many fun tricks can present themselves. The tutor brings up one from his reading.

In a CSS stylesheet, you have tremendous fine-tuning potential based on contextual selection. Suppose you want, for instance, to render all list entries in ordered lists red, but in unordered lists, blue. The following code

ol li{color:red}

ul li{color:blue}

does just that. It differentiates the li elements based on their parentage (ol vs ul).

HTH:)

Source:

Meyer, Eric A. CSS Pocket Reference. Sebastopol: O’Reilly Media, Inc., 2004.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

CSS: word-spacing

Tutoring, I just love to bring up neat new topics. The tutor mentions word-spacing.

  1. This sentence has no word-spacing set.

  2. This sentence has word-spacing at 150% (which apparently doesn’t change the rendering).

  3. This sentence has word-spacing at 1em.

  4. This sentence has word-spacing at 6px.

  5. This sentence has word-spacing set to 0.25cm.

Sentence 2, above, seems to suggest that word-spacing cannot be set by percent. On my desktop, sentence 5’s word spacing is 0.4cm, even though it’s set to 0.25cm.

HTH:)

Source:

w3schools.com

Meyer, Eric A. CSS Pocket Reference. Sebastopol: O’Reilly, 2004.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.