How to add custom CSS to my c# code? SharePoint 2013

Question

I have created a visual webpart and I need to add custom css on it. Example I want to add the following css:

.google-visualization-orgchart-node {
text-align: center;
vertical-align: middle;
width: 139px !important;
font-family: arial,helvetica;
font-size: 12px !important;
cursor: default;
border: 0px solid #b5d9ea;
border-radius: 0px !important;
color: white;
background-color: #25a0da;
}

to my c# project. Any idea how can I do this?

Answer 1

If you want to apply the CSS to your Google Organization Chart webpart than you can just apply it from the ASPX page like (Usual way) below.

<style type="text\css">
.google-visualization-orgchart-node {
text-align: center;
vertical-align: middle;
width: 139px !important;
font-family: arial,helvetica;
font-size: 12px !important;
cursor: default;
border: 0px solid #b5d9ea;
border-radius: 0px !important;
color: white;
background-color: #25a0da;
}
</style>

Check this fiddle.

http://jsfiddle.net/w8Ytq/2/

Answer 2

When you are working in visual webpart, you can add css & javascript in following ways.

Option 1:

• Open your ascx file in the webpart.
• Add <style type="text/css"> </style> tag
• Add your css properties into this style tag.
• Use the classes in you html block.

Option 2:

• Create a text file. paste entire css code in it.
• Do not add <style> tag in it.
• Save it with .css extension.
• Upload it to any library like Site Assets
• Open your ascx file in the webpart.
• Add reference to your .css file
• Use the classes in you html block.

similar for js code as well. - Use tag - or save it in .js file and use its reference.