{"id":360,"date":"2014-05-21T15:57:21","date_gmt":"2014-05-21T14:57:21","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=360"},"modified":"2014-05-21T15:57:21","modified_gmt":"2014-05-21T14:57:21","slug":"styling-content-using-html-and-css","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/05\/21\/styling-content-using-html-and-css\/","title":{"rendered":"Styling Content using HTML and CSS"},"content":{"rendered":"

Content on webpages is described using HTML and the layout and look of it can be styled using a language called CSS: Cascading Style Sheets<\/strong>.<\/p>\n

HTML and CSS is largely out of scope for this blog, as it’s well described on a number of other excellent sites (I recommend w3schools<\/a>) and we largely aim our T4 provision at content providers not designers or developers – if you wish to work with a custom template and designer, please contact us using it.servicedesk@ncl.ac.uk<\/a>, and we’ll discuss your requirements.<\/p>\n

Please note that CSS and HTML coding is not<\/em> supported by ISS beyond providing this documentation and links – site owners are expected to develop their own knowledge of HTML\/CSS or have an appropriate budget to work with a designer\/developer.<\/p>\n

CSS by Example<\/h2>\n

The site below (Years Ahead) has three requirements:<\/p>\n

    \n
  1. Remove the Header from the page as it duplicates the Banner (highlighted in red)<\/li>\n
  2. Change the links under the pictures so that they’re in coloured blocks joined to the images (highlighted in yellow). The grid has been created using the threecol class<\/a>.<\/li>\n
  3. Amend the style of the navigation buttons as the dark blue template makes them difficult to read (highlighted in blue)<\/li>\n<\/ol>\n

    \"Years<\/a><\/p>\n

    1: Hiding the Header on the Homepage<\/h2>\n

    Go to the homepage section, and add a piece of content of the type\u00a0Raw HTML\/Javascript. Give it a name – “Styles for Homepage” is a good name. Note that these styles will only effect the section in which they’re added.<\/p>\n

    \"rawhtml\"<\/a><\/p>\n

     <\/p>\n

    Paste the following into the content area:<\/p>\n

    <style>
    \nh3
    \n{
    \ndisplay:none;
    \n}
    \n<\/style><\/p>\n

    \"CSS-Remove-Header\"<\/a><\/p>\n

    What does this mean?<\/h2>\n