CSS Tips

By Murari NayakTechnology
css

CSS Tips lists out some simple ways to do things that normally might take quite some time finding out.

You can learn more on CSS from MDN.

Limitations of CSS

=> Limitation of vertical control
=> No expressions
=> No column declaration

The head element can contain the css declaration.

CSS3 Modules

=> Selectors
=> Box Model
=> 2d/3d transitions
=> Animations, etc

Using custom fonts

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

.class-name {
    font-family: 'YourFontName';
}

Flexbox

It allows to design a flexible structure without using float or positioning property.

.flex-container {
    display: flex;
}

pseudo-class is used to define a particular state of an HTML element (selector:pseudo-class)
pseudo-element is used to define a particular part of an HTML element, like firstLetter (selector::pseudo-element)

inline-elements don’t have a width, height or a line-break. Example: em, strong
Block elements do have all those features and also contain the line break.

CSS Box Model

The box defines the design and the layout of the elements
Margin, Border, Padding, Content

Image Sprite

A collection of images to improvise loading speed.

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

Contextual Selector

The selector used to select special occurrences of an element. .nav li a { }

a[href^=”https”]
Select every <a> element whose href attribute value begins with “https”

a[href$=”.pdf”]
Select every <a> element whose href attribute value ends with “.pdf”:

a[href*=”css”]
Select every <a> element whose href attribute value contains the substring “css”

More CSS Tips will be added to this list as and when time permits. Read more on JavaScript, HTML and Angular here.

Leave a Reply