Hi Hannah and welcome to our.

Is there a specific reason why you need to create 2 different CSS files. You could just have one CSS file and then just add the CSS seletors in there for the service page. If it because the services template should have a different layout and skinning then I would not inhert from the master.

Since you are new to Umbraco in think you would get a lot, by watching these videos http://umbraco.tv/videos/umbraco-v7/implementor/, on Umbraco TV. These videos are showing the basic concepts of Umbraco, some of the video are free to watch and, some needs that you subscribe to the Umbraco TV, you can see the plans here: http://umbraco.tv/plans-signup/

Here are specific chapters about CSS http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/stylesheets-and-javascript/using-stylesheets/ and templates and mater template. http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/templating/introduction/. Other good links to learn Umbraco is https://our.umbraco.org/documentation/Using-Umbraco/Creating-Basic-Site/ and this article written by Blake Smith http://24days.in/umbraco/2014/how-to-set-up-an-umbraco-site/

Hope this helps, if you have further questions to this keep asking, we are friendly people try to help each other.

/Dennis

Hi,

I would say that it normal to include all the css files you need within the head section, and I guess you have your head section in your Master Layout, so just go ahead and add all css files you need. For example <link rel="stylesheet" href="/css/MainLayout.css" />

You should also look into @RenderBody() and @RenderSection which are very useful. Watch the videos at Umbraco.tv

Good luck,

OK, That's great. I was planning on using some social share buttons, a slider and a few other things that are not required on the homepage. As the CSS for these things is fairly bloated, I was after a way that I didn't call these stylesheets on the homepage as well, as my styles.css that is used site wide is getting rather long.

The same concept may be needed for scripts you see. No point calling a script in the head of the Master Layout if it's not being used on teh page. This will throw an error. Unless I use a JQuery IF statement to check if an element exists I suppose.

As long as you have all the style sheets you need declared within the head section, you just use the name of the class and id styles where you what to apply them. You don't need to call specific sheet once they are declared. Just remember that if you use the same class name in different style sheet, the order you declare the sheets will matter.

I understand. I may have <section> with 10% padding on the homepage and 30% padding on another page. I would need to target a containing element higher up. Some people add classes to the body tag. body.homepage body.about-page. How is this done in Umbraco?

Hi Hannah and welcome to our :)

How you choose to add classes and render your HTML structure is entirely up to you and not as such Umbraco specific. You are in control of the final rendered webpage.

I have just skimmed the former posts but all you need to do is to decide how you want to do it.

You could consider using another class on the

Thanks. The below works really well in case I have two different rules for the same CSS selector and could use body.homepage (Umbraco Alias) body.services to separate these CSS rules so they don't cause styling wars :)

@Umbraco.Field("nodeTypeAlias")

Hi, Hannah.

It is possible to include a css or js file only in the templates that need them. So you have styles.css in your master template and you want services.css for the services template? This is easy to do with the ClientDependency framework.

In both your master and services templates, add a reference to ClientDependency:

@using ClientDependency.Core.Mvc

In the head of your master template add:

@Html.RenderCssHere()
@Html.RenderJsHere()

Finally, in your services template, add:

@{
  Layout = "MasterLayout";

  Html.RequiresCss("~/css/services.css");
  Html.RequiresJs("~/scripts/services.js");
}

This assumes that your project already includes the ClientDependancy framework.

Of course, if you wanted your services template to simply inherit the structure of your master layout and not the styling, then you'll have to inherit from another template.

is working on a reply...