Brian Dys

Tag: CSS

  • CSS border box, here we come

    —

    by

    Brian Dys
    in

    Hey, remember that time when you switched from the table layout to div layout? This is the time to be “out with the old and in with the new”. We’ll be leaving behind the contraption that alleviate the pains of the CSS box model. Just to refer to that contraption, familiar with this? [code] <div…

  • Unwrap those URLs

    —

    by

    Brian Dys
    in

    You have a paragraph with a URL in it–chances are the boundaries might wrap or cut your URL into two lines. Notice that it is an actual URL in the form of http://[address] and not just a linked bunch of text. [code lang=”html” gutter=”false”]<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi ante, hendrerit…

  • Center your unnumbered lists

    —

    by

    Brian Dys
    in

    Say you want to center your navigation on the page: [code lang=”html”] <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> [/code] Simply tell CSS to: [code lang=”css”] ul {text-align:center;} li {display:inline-block;} [/code] And don’t forget to remove any float on those elements, if any.

  • How to code in HTML and CSS, really?

    —

    by

    Brian Dys
    in

    Update on February 22, 2013 Let’s get to the details on how to write the HTML markup, really. Write pure text of everything Enclose all texts in semantic HTML tags — don’t use <div> and <span> Add lists — <ul>, <ol> Add headings — use only <h1> Add sectioning elements like <header>, <nav>, <section> Check…

  • I’m Seeing Red: How the color red is being useful in CSS

    —

    by

    Brian Dys
    in

    So, you want to visualize how large your background is with margins and paddings? Utilize the color “red”. It’s easy to type in the keyboard and it appears instantly like a bright red fruit in the midst of the forest. For example: [code lang=”html” title=”HTML”] <div class="favorite-things"> <ul> <li>Mobile phone</li> <li>Television</li> <li>Couch</li> </ul> </div> [/code]…

  • In CSS, what’s first in Mobile First?

    —

    by

    Brian Dys
    in

    Remember when I suggested that you forget about the CSS while writing the HTML? Now that you’ve got your HTML markup ready, it’s time to mind the CSS. So what’s the first thing to do in applying the Mobile First principle? Forget about the floats Forget about which goes to the left or right. Remember,…

  • Background Check: Use background-color to set the background color

    —

    by

    Brian Dys
    in

    Don’t simply use the shorthand if you want to set only the background color: [code lang=”css” title=”CSS”] div {background:red;} [/code] Because what that really means is: [code lang=”css” title=”CSS”] div {background:none repeat scroll 0 0 red;} [/code] The background values in order are: background-image background-repeat background-attachment background-position background-color One of the conflicts in using the…

  • Round Off Your HSBs

    —

    by

    Brian Dys
    in

    This doesn’t have much importance other than satisfying one’s obsessive-compulsivity. We all take the hexadecimal values of colors to put as background-color or color of elements on our webpages. If you could see the HSB (hue, saturation, brightness) values of your color, they are in degree, percentage, percentage, respectively. Round them off to the nearest…

  • Break It Down: Breaking a line thru CSS and HTML

    —

    by

    Brian Dys
    in

    Let’s say you have this line on your webpage: Hey guys, you may email me at yoyo@whatsup.heh or call me at 14344. and you want to break the line right after the word “or”. Do you do this: [code lang=”html” title=”HTML”] <p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or<br> call me at <a…

  • HTML5 Boilerplate & WordPress: Day 3 – Module Block

    —

    by

    Brian Dys
    in

    Module block [code lang=”html”] <div class="mod"> <div class="mod-cr"> <div class="mod-hd"><h3 class="mod-heading">Heading label</h3></div> <div class="mod-ct"></div> </div> </div><!–.mod–> [/code] This is the basic structure of every content block in your webpage. This way, it would be modular, meaning, you could move it anywhere in the page without too much dependency on other elements. Update – Nov 12,…