Technology

CSS Tips

css

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”

Leave a Reply

Your email address will not be published. Required fields are marked *