Category: Simple CSS Tutorials

  • 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 […]

  • 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 […]

  • CSS Tutorial: Using Text Shadows

    I’m seeing more and more designs utilizing text shadows to increase legibility or create beautiful typographic effects. While I was planning my redesign, I wanted to incorporate the text-shadow effect to maximize the flat illustrative look that I was going for. Text shadows are a cool CSS trick that can apply a blurry or solid […]