Tag: dyssahagun.com
-
I’m Seeing Red: How the color red is being useful in CSS
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?
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
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
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
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
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,…
-
HTML5 Boilerplate & WordPress: Day 2 – CSS
::selection [code lang=”css” highlight=”2,3,8,9″] ::-moz-selection { color:#fff; background: #00b6f2; text-shadow: none; } ::selection { color:#fff; background: #00b6f2; text-shadow: none; } [/code] Hex color value #00b6f2 is a nice shade of cyan Font color is white Image replacement [code lang=”css” highlight=”6″] /* * Image replacement */ .ir { display:block; background-color: transparent; border: 0; overflow: hidden; /*…
-
HTML5 Boilerplate & WordPress: Day 1 – HTML
I’ve mashed up the HTML code of HTML5 Boilerplate and WordPress to come up with something useful for my projects at International Red. Take a look if this will suit yours. Inside the <head> [code lang=”html” highlight=”6,10,11,14-20″] <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link…
-
CSS Parts
Here are the basic parts of a CSS: [code lang=”css”] p {font-size:1em;} [/code] Which translates to: [code lang=”css”] selector {property:value;} [/code] Selectors Selectors are the ones you target in the HTML document to apply the styles to. Basically, selectors can be: HTML tags: html, body, h1, ul, li, p, etc. Classes: .main-nav, .footer, etc. IDs:…