CSS what means # or . or nothing?

I’m rewriting my website for my softwares (I’m a hobbits in Xojo and website).
In the exemple of CSS I find, I see sometimes the CSS type name which begin with a . or a # or nothing :

.TxtCentr {
	text-align: center;
}

or

#TxtCentr {
	text-align: center;
}

or

TxtCentr {
	text-align: center;
}

Is there a difference, is it something like in Xojo Global and Local variable?
Does it, if we use many of them, the .MyCSStype will be apply instead of #MyCSStype ?
I didn’t find explanation on the web.

its about class name or id or the tag itself

1 Like

As part of a CSS selector, # means that what follows is the ID of an element on the page to which you want to apply the CSS properties in the block. IDs on the page should be unique per element. Let’s say that I have this HTML button on the page:

<button id="buttonStart">Start</button>

I can use the #buttonStart selector to identify only that element as the target of this CSS:

#buttonStart {
  color: white;
  background-color: red;
}

., on the other hand, signifies a class selector. Classes can be applied to many elements on the page. So, using the following example:

<button id="buttonStart" class="timer-button">Start</button>
<button id="buttonEnd" class="timer-button">End</button>

With this CSS:

#buttonStart {
  font-size: 14px;
}

We can make all elements on the page that implement the class timer-button have a larger text size than other elements on the page.

You can even go further and have classes that apply to different types of elements but are differentiated by their node type:

<button id="buttonStart" class="red-text">Start</button>
<div class="red-text">Some text</div>
button.red-text {
  color: #f00;
}
div.red-text {
  color: #d00
}

Hope that’s helpful.

1 Like

I thought I couldn’t make menu but I found some examples on the web and I reach to make a MenuBar.
Actually I put it only on one page :
Soft-Toroco-Miscellaneous
Here is the CSS page.

My MenuBar CSS code :

/* ### Début CSS MenuBar ### */
.TteLargeur { /* https://fr.w3docs.com/snippets/css/comment-creer-un-menu-de-navigation-deroulant-avec-css.html */
	width: 100%; /* Pour le symbole Dropdown triangle il y a :  &nabla; &or; &#9660 &#9662 &#9663 */
	height: 33px;
	margin: 0;
	z-index: 99;
	position: relative;
	background-color: #FFFFFF; /* Turquoise; #444444; a3a1a1; Couleur d'arrière plan de la MenuBar */
}
.navbar {
	/* height: 36px; */
	padding: 0 80px 0 80px; /* Haut Droite Bas Gauch - Ecart extérieur de la MenuBar */
	margin: 0; /* Marge du haut de la MenuBar */
	position: absolute;
}
.navbar li { /* MenuBar et Menus (vertical qui s'affiche au survol du MenuBar) */
	height: 14px; /* auto; */
	width: 132px; /* 135.8px; */
	float: left;
	text-align: center;
	list-style: none; /* Supprime la puce des éléments */
	font: normal bold 13px/1em Arial, Verdana, Helvetica;
	/* Avant : border-left-right: 1px solid red; */
	border-style: none none none none ; /* Haut Droite Bas Gauche (dotted dashed solid double) */
	border-width: 1px;/* Trait vertical à droite et à gauche des menus */
	border-color: #D2D2D2; /* Même couleur pour  Body  DivDlColABCD  navbar */
	padding: 10px 0 10px 0; /* Haut Droite Bas Gauche - Ecart du texte des MenuBar et Menus */
	margin: 0;
	color: #000000; /* green; Couleur du texte */
	display: block;
	background-color: #F2F2F2; /* Salmon #444444; Couleur de la MenuBar */
}
.navbar a { /* MenuBar avec lien */
	/* padding: 12px 0;
	/* border-left: 10px solid red; ccc9c9; */
	text-decoration: none;
	color: #000000; /* green; Couleur du texte */
	display: block;
}
.navbar li:hover {
	background-color: #E2E2E2; /* ; #444444; Couleur lors du survol */
} /* Avant, ci-dessus et ci-dessous étaient dans le même block : .navbar li:hover, a:hover  mais ça faisait merder les survols d'image partout */
.navbar a:hover {
	background-color: #E2E2E2; /* ; #444444; Couleur lors du survol */
}
.navbar li ul {
	display: none;
	height: auto;
	margin: 0;
	padding: 12px 0; /* Ecart entre la MenuBar et les Menus */
}
.navbar li:hover ul {
	display: block;
}
.navbar li ul li {
	background-color: #F2F2F2; /* #444444; Couleur des Menus */
}
.navbar li ul li a {
	/* Avant : border-left: 1px solid blue;
	border-right: 1px solid blue;
	border-top: 1px solid red;
	border-bottom: 1px solid blue; */
	border-style: none none none none ; /* Haut Droite Bas Gauche (dotted dashed solid double) */
	border-width: 1px; /* Trait vertical à droite et à gauche des menus */
	border-color: #E2E2E2; /* Même couleur pour  Body  DivDlColABCD  navbar */
}
.navbar li ul li a:hover {
	background-color: #E2E2E2; /* yellow; Couleur lors du survol */
}
/* ### Fin CSS MenuBar ### */

It does not work on iPhone, if someone could tell me if I can add an instruction somewhere, I would be very happy. I don’t develop iOS App then it’s not a big problem, but the menu should work on SmartPhone anyway.

I reach to make it works if I leave my finger during 1 or 2 seconds on the menu.

This should be:

.timer-button {
  font-size: 14px;
}
2 Likes

Yes, it should. Good catch.

1 Like

It should also be noted that the different selectors have different precedences (least to most):

  • Tag (without any prefix), like a, div, span
  • Class (with a . Prefix), tags with a matching class attribute, multiple per tag, space separated.
  • ID (with a # prefix), tags with a matching id attribute, one per tag, unique for the whole page.
  • In-line, tags with a style attribute and style info specified right on the element itself
2 Likes

If you open this page and reduce the width of the window less than 1000, all the images will be under the text (1 column) instead of be on the right (2 columns).
I first coded in my CSS :

@media (max-width: 1000px) {
	.DivPgColABC {
	/* grid-template-areas: "a" "d"; */
	grid-template-columns: 1fr;
	}
}

I thought it will be ok on my smartphone but no. Then I search on the web and I have to enter :

@media only screen and (max-width: 1000px) {
	.DivPgColABC {
	/* grid-template-areas: "a" "d"; */
	grid-template-columns: 1fr;
	}
}

But I don’t understand why it works. As far as I understood, "screen" means that it is a computer without keyboard (smartphone or tablet), then it shouldn’t work if I reduce the window on my Mac as there is a keyboard???
I would have coded :

@media only screen OR (max-width: 1000px) {
	.DivPgColABC {
	/* grid-template-areas: "a" "d"; */
	grid-template-columns: 1fr;
	}
}

If (it is a smartphone or a tablet) OR (the width < 1000) Then 1 column.

Screen means that it’s displayed on a digital display, not for print or speech. You can review the table from the @media Rule page of W3Schools:

Media Types

Value		Description
all		    Default. Used for all media type devices
print		Used for printers
screen		Used for computer screens, tablets, smart-phones etc.
speech		Used for screenreaders that "reads" the page out loud

I believe it works after adding screen because your media rule was invalid as the media type must be supplied with the media dimensions. Someone feel free to correct me if I’m wrong.

1 Like