Tag: css

  • CSS Font Weights Explained

    CSS Font Weights Explained

    Those not too hip with typography might at one point wonder, “Why are the font weights on a ranking scale from 100 to 900?” Where are those numbers coming from? It was actually an interesting questions brought up to me recently that I hadn’t thought much of. After all, no one’s breaking the internet over […]

  • Coding a 1 to 6 Column Layout in HTML & CSS

    Coding a 1 to 6 Column Layout in HTML & CSS

    One of the consistent things I notice while teaching web is that a lot of students understandably have a hard time lining up columns, setting up to create columns and understanding the box model and how it relates to positioning columns in HTML and CSS. Since this seems to be a pretty common hurdle for […]

  • Using CSS Attributes Selectors

    Using CSS Attributes Selectors

    A CSS Attribute Selector, in its most simple format looks like this: selector[attribute] Its purpose is exactly as it sounds, it allows you to select an element based upon its attribute and using css attributes selectors is exactly what we’re talking about today. While you might be wondering how or why that’s useful, given that […]

  • CSS: Using Transform: Translate() for Animations and Position

    CSS: Using Transform: Translate() for Animations and Position

    The CSS Translate Transformation function comes in three flavors: translate(), translateX() and translateY(). It can be used to move elements around on your screen, either statically for positioning or coupled with a transition to create attention-grabbing effects. I’ve seen translate used a lot on images and sections to showcase a pull up or pull out […]

  • Wrapping Text With CSS Shapes (Shape-Outside)

    Wrapping Text With CSS Shapes (Shape-Outside)

    CSS Shapes is a relatively new technology being developed by the team at Adobe Platform that not a whole lot of websites use yet, but will undoubtedly become very popular when more browsers support it with consistency. It involves Wrapping text with CSS Shapes. This allow you to flow text and other forms of content […]

  • Anatomy of a CSS Rule

    Anatomy of a CSS Rule

    One of the basic skills in CSS is knowing the anatomy of a CSS Rule. A CSS Rule is a chunk of code (written in CSS) that styles certain components in HTML, typically its element, class or ID. There are other ways to style HTML components, but they’re a little beyond the scope of this […]

  • CSS Tutorial: Simplifying :nth-child

    CSS Tutorial: Simplifying :nth-child

    I’m going to take a moment to explain a class that tripped me up when I first heard about it and started using it: nth-child. This is a really basic and quick overview of the nth-child class so it won’t go into any specifics or lots of details. It does assume that you already understand basic CSS terminology (ex. you know what a pseudo class is, you understand how to write CSS). So without further ado…

  • Coding a Button with CSS Only

    Coding a Button with CSS Only

    When I found out how to create CSS buttons, it was like someone handed me a big, free piece of candy. Finally, no more time spent in Illustrator drawing buttons, variations for buttons and making sure all of them lined up and worked when someone moused over them! So here’s a beginner’s guide to creating […]

  • Colors on the Web RGB vs. HEX vs. HSLa

    Colors on the Web RGB vs. HEX vs. HSLa

    For people just starting out in web design, finding out about all the different languages and their various nuances is difficult enough. Add in the fact that web languages change on a daily basis–even plain old HTML and CSS have hundreds of considerations to take into account, and all this stuff can be pretty overwhelming. […]

  • CSS Tutorial: Simple Text Transitions with CSS3

    CSS Tutorial: Simple Text Transitions with CSS3

    With CSS3 comes some very fancy effects including text transitions that you can use to create a bit of animation and interest in your websites. Some CSS3 transitions work with pseudo classes to create an effect when a user hovers their mouse over a link or image. I will only be covering transition effects for […]

  • How to Remove the Smiley Face on WordPress

    So you’re working with WordPress, possibly editing a theme, maybe making your own, or applying a theme you just downloaded. Everything is working OK and looking fine until you get to the bottom of the page and notice this: What the heck is that smiley face doing there? At this point, you might be going […]