Alter css of article?

[SocketPup]

I set a custom css class in one of my Menu items, in order to style the article attached to said menu item. It works in the sense that I can alter background-color, but I can't seem to change css for images and paragraphs. Do I need to set individual classes for the different markups inside the articles somehow?

[AMurray]

No, you don't set up the CSS inside articles, you use a custom CSS file (normally called "user.css" e.g. for Cassiopeia, but it may be called something else like "custom.css" depending on the template you're using.

I'd suggest a few quick lessons in how CSS works. My favourite resource for learning is https://www.w3schools.com/css/

You apply the class name to the element you want to style such as paragraph:

As a simple example

Code: Select all

<p class="yourCSS">content</p>

The code for the CSS itself sits in "user.css" (or other as relevant):

Code: Select all

.yourCSS { margin:10; padding:10; font-weight:bold;font-family:arial;}

[SocketPup]

No, you don't set up the CSS inside articles, you use a custom CSS file (normally called "user.css" e.g. for Cassiopeia, but it may be called something else like "custom.css" depending on the template you're using.

I'd suggest a few quick lessons in how CSS works. My favourite resource for learning is https://www.w3schools.com/css/

You apply the class name to the element you want to style such as paragraph:

As a simple example

Code: Select all

<p class="yourCSS">content</p>

The code for the CSS itself sits in "user.css" (or other as relevant):

Code: Select all

.yourCSS { margin:10; padding:10; font-weight:bold;font-family:arial;}

I know my css, that's not the problem here. The problem is that while I am able to assign a custom css-class to the article, thereby change the background, I can't seem to change any of the elements inside the article (for example p & img)

So, in essence, the following works great:

.about-us {
background-color: blue;
}

BUT, the following does nothing:

.about-us img {
width:300px;
}

[Per Yngve Berg]

What is the Developer Console of your Browser saying?

Is the entry overwritten by other css?

[Pavel-ww]

.about-us img {
width:300px;
}

Hi. Most likely your selector is not strong enough or not accurate enough. Provide a url