Skip to Main Content 

Examples & Take Home Activity

Creating a Clickable Button: In-line CSS

Instructions:

  1. Add an opening and closing paragraph html tag around the code: <p><button><a href="url">Basic Coding Review</a></button></p>
  2. In the opening paragraph tag add in the in-line CSS style tag: <p style="
  3. Add in the CSS attributes you would like to apply to the button's text: <p style="text-align: center; font-size: 28px; font-weight: bold;>
  4. In the opening button tag add in the in-line CSS style tag: <button style="
  5. Add in the CSS attributes you would like to apply to the button: <button style="background-color: #0f2047;">
  6. In the opening link tag and after the URL attribute add in the in-line CSS tag: <a href="url" style="
  7. Add in the CSS attributes you would like to apply to the link: <a href="url" style="color: #ffffff;">

End Product: 

<p style="text-align: center; font-size: 28px; font-weight: bold;"><button style="background-color: #0f2047;"><a href="https://guides.hsict.library.utoronto.ca/basiccoding" target="_blank" style="color: #ffffff;">Basic Coding Review</a></button></p>