CSS Archives

How to embed your latest YouTube Video with responsive CSS

by

I’ve recently had to update the code that’s responsible for pulling in my latest YouTube upload on the front page. I had previously used a solution that uses the channel name rather than the channel ID. Apparently that API has stopped working and I had to find a workaround.

In addition to making it work again, I also wanted my embed to be responsive and look handsome on all screen sizes. The trouble is that regular iFrame embeds use a static size for the video (like 600×360 or 800×480), but being the future-proof thinking kind of guy that I am, I wondered if there was a way to make this dynamic. The “height=auto” trick didn’t work for me, but thankfully I came across a great piece of CSS that adds this feature.

Let me show you both parts to solving this puzzle.

Read more

How to centre an element in CSS

by

In the olden days of HTML development, in the late 90ies, we only had inline styles. Centring an element was done using the <center> property. That approach isn’t very elegant anymore in modern CSS 🙂 Today we can use something like this: #your-id .your-class { display: block; margin-left: auto; margin-right: auto; } It’s slightly more … Read more

How to use the new Apple System Font SAN FRANCISCO on your website

by

Apple have a new System Font in El Capitan and all of their other products starting 2015: it’s called San Francisco. It’s very similar to their previous font Helvetica Neue, but apparently San Francisco is better for your eyes (not to mention the fact that Helvetica Neue isn’t owned by Apple, and obviously we can’t … Read more

How to replace and add HTML text elements with CSS

by

In some circumstances you may can replace HTML text elements via CSS. This is useful if you don’t have access to the source files, or if you want to override text in a Child Theme’s stylesheet. There are several approaches to this conundrum, I’ll show you two of them. Both require that you have a … Read more

How to style block quotes in P2

by

I’ve just snazzed up the blockquotes styling on a couple of my P2 sites and thought I’d share the code that did it. Here’s an example of the final result in P2: This is a block quote. You can create one by adding blockquote tags to the beginning and end of a block of text … Read more