CSS: quotes

Tutoring web design, there are always new features to discover. The tutor mentions the CSS quotes property.

Let’s imagine you aren’t satisfied, for whatever reason, with regular quotation marks. For example, instead of

“I love pink jeans!”

you want to print

I love pink jeans!

Well, you can set the quotes to the club icon by enclosing the text in a q element, then applying the quotes style:

<q style=”quotes:’\2663′ ‘\2663′”>text in quotes</q>

Then, you can achieve the quotation marks you’ve really wanted all along:

I love pink jeans!

Nifty, eh?

Source:

www.w3schools.com

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

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.