[SalesForce] way to overwrite the CSS of apex components in salesforce

I'm using a pageBlock component, it's obviously very handy for storing my returned object/s but I really don't like how it looks. As I'm quite new to apex/salesforce, I'm wondering is there a way to overwrite the styles attached to the pageBlock?

Is there a convention for it? Or can I even use a regular html table in it's place?

        <apex:pageBlock >

        <apex:pageBlockSection columns="1">

           <apex:pageBlockTable value="{!attachments}" var="attach" id="attachmentsTable">

               <apex:column >
                   <apex:outputText value="{!attach.name}"/>

               <apex:column >
                   <apex:outputText value="{!attach.description}"/>

               <apex:column >
                   <apex:outputLink styleClass="actionLink" target="_BLANK" value="/servlet/servlet.FileDownload?file={!attach.Id}">View</apex:outputLink>




Best Answer

Yes, you can overwrite it with your own CSS, just don't forget to insert !important. Or you can assign your own css class to the components using styleClass="myCssClass" parameter.

Of course you can create your own pure HTML table and iterate through attachments list using apex:repeat tag:

    <apex:repeat value="{!attachments}" var="attach">
            <td><apex:outputText value="{!attach.name}"/></td>
            <td><apex:outputText value="{!attach.description}"/></td>