Link style in CSS

Authoring Twine
1

I have this Stylesheet for my Twine (Harlow format) story:

@import url(http://fonts.googleapis.com/css?family=Cormorant+Infant);

tw-story { background-color: #e5e5e5;}

h1 {
font-family:Cormorant Infant;
font-size:80px;
color:#000000
}

p {
font-family:Cormorant Infant;
font-size:36px;
line-height: normal;
color:#000000
}

tw-link {
font-family:Cormorant Infant;
font-size:36px;
line-height: normal;
color:#CC0000;
}

.enchantment-link:hover,
tw-link:hover {
color:#FF1919;
text-decoration: underline;
}

this produces the size of the text I want, as well as for the links used in the various passages.

But: I wish I could create a passage with only one phrase that is a link but larger in size. In the various attempts, I have made I have not succeeded, this is because the instruction in the stylesheet forces the font size to 36px.

Is it possible (and how) to add a statement in the stylesheet that adds a second link style with larger font size so that it can only be used in specific passages?
Thank you!

2

There are a couple of syntax errors in your example CSS:

  1. the color property values of the h1 and p rules are missing a semi-colon at the end of them.
  2. The font name being assigned to your font-family properties should be wrapped in quotes, because there is a space in its name. eg. font-family: "Cormorant Infant";

If you assign a Passage Tag like biglinks to the Passage you want the larger links in and then use your web-browser’s Web Developer Tools to inspect the HTML elements that make up the story area of the web-page, you see a structure something like the following…

<tw-story tags="biglinks">
	<tw-passage tags="biglinks">
		<tw-sidebar>
			<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" alt="Redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		<!-- the HTML elements of the 'current' Passage -->
	</tw-passage>
</tw-story>

…and you will notice that the Passage Tag you assigned to the Passage has been added to the tags attribute of the <tw-story> and <tw-passage> elements.

You can use the above fact and a little knowledge of CSS Selectors to craft a rule that styles links within such tagged Passages.

tw-link {
	font-family:Cormorant Infant;
	font-size:36px;
	line-height: normal;
	color:#CC0000;
}
tw-passage[tags~="biglinks"] tw-link {
	font-size: 50px;
}
3

Thank you very much for helping! It works perfectly, just what I was looking for.

  • Marco.