www.webdeveloper.com
Results 1 to 4 of 4

Thread: Inline CSS beginner guide (how to use tools)

  1. #1
    Join Date
    Aug 2014
    Posts
    5

    Inline CSS beginner guide (how to use tools)

    Hello!
    I'm learning how to use inliner tools like the mailchimp one http://templates.mailchimp.com/resources/inline-css/

    I'm learning code so this makes little sense to me yet, i need a quick lesson.
    My code is standard HTML in 1.0 strict that has a CSS externally linked to it. When i paste my HTML into the designated area (and click generate of course), the outcome looks the same as what i pasted. Of course, i dont want to go as far as manually inlining CSS since it's an error prone method and I'm not skilled enough.

    If you feel there's a better way to do it, share it as well! I'm focusing this task on learning after all

  2. #2
    Join Date
    Mar 2012
    Posts
    1,650
    Why are you learning inline-CSS (manual or automated)?

  3. #3
    Join Date
    Aug 2014
    Posts
    5
    There's lots of good reasons, most are for learning purposes.
    Being able to link CSS into a HTML file with 3 different methods will help me understand CSS mechanics much better.
    Secondly I've read that inlining CSS is a good way to check you own work for errors.
    And lastly its a practice useful for emails, as externally linked CSS wont apply to a HTML crafted email. It would be fun and educational to practice web coding by making simple emails for myself. I need more variety in things i practice on, so far I've been making only simple webpages

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    Should be pretty simple to convert everything to inline.

    Your CSS may look something like this:

    Code:
    p {margin: 10px 0; font-size: 1.2em;}
    .sub-text {font-size: 1em; color: #555;}
    li {margin-left: 1em; list-style: none;}
    You may have HTML that looks like this:

    Code:
    <p>Paragraph here.</p>
    <p class="sub-text">Sub text here.</p>
    <ul>
       <li>List 1</li>
       <li>List 2</li>
    </ul>
    You'd simply convert it like this:

    Code:
    <p style="margin: 10px 0; font-size: 1.2em;">Paragraph here.</p>
    <p style="margin: 10px 0; font-size: 1em; color: #555;">Sub text here.</p>
    <ul>
       <li style="margin-left: 1em; list-style: none;">List 1</li>
       <li style="margin-left: 1em; list-style: none;">List 2</li>
    </ul>
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles