Menu
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table> .
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
You can display the document’s title element:
head, title {
display: block;
}
Apply multiple styles/classes to an element like this class="bold red GoldBg"
<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
I really like CSS sprites.
Rather than have 20 images for all your site buttons and logos (and therefore 20 http requests with the latency around each one) you just use one image, and position it each time so only the bit you want is visible.
It's difficult to post an example as you'd need to see the component image and the placement CSS - but I've blogged Google's use of it here: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
The fact that floating a parent element will cause it to expand to contain all of its floated children.
Maybe negative margins and absolute positioned elements in relative positioned elements.
See How would YOU do this with CSS? for examples.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With