Four Simple CSS Tips

Tip #1: Child Combinator

Several <a> tags in a footer you may be familiar with

CSS

//format
element1 > element2 {
style properties
}
span {
font-weight: normal;
}

div > span {
font-weight: bold;
}

HTML

<div>
<span>Span #1, inside the div.
<span>Span #2, inside the span that's inside the div.</span>
</span>
</div>
<span>Span #3, outside of the div.</span>

Result

Tip #2: Selecting Multiple Elements

.article, img, .toolbar {
border: 1px solid #78c5c5;
font-family: Verdana;
background-color #323232
}

Tip #3: Drop Caps

p:first-letter {
float: left;
font-size: 3rem;
line-height: 0.65;
margin: 0.1em 0.1em 0.2em 0;
color:#60c0c0;
}

Tip #4: Hovering

CSS

img {
border: 1px solid #000;
}
img {
border: 1px solid #f00;
filter: invert(100%);
}

HTML

<img>
<%= image_tag(Album.last.artwork, size: “400”) %>
</img>
<%= image_tag(Album.last.artwork, size: “400”) %>
<%# Please note that this is written in ruby %>

Result

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store