Quick CSS Tips

Quick links for CSS questions.

These are some CSS tips for quick reference.

Definition & Advantages

CSS(Cascading Style Sheets) is a style language to define fonts, colors, background colors / images, height, width, marns, positions and many other things in HTML documents. HTML itself can be used to describe these properties, but CSS is more powerful, accurate and efficient. Also, CSS is cached and it will shorten the overall loading once it’s cached.

In HTML

In CSS

to the top

to the top

to the top

to the top

Three ways to use CSS in HTML documents

1. Internal Style Sheet

2. Inline Style: Define the CSS codes in the HTML “style” attribute.

3. External Style Sheet: Insert it as an external file.

The external style sheet is the most recommended method because it makes HTML documents lighter, one CSS file can be used for multiple HTML documents and it’s easier to maintain.
to the top

Cascading Order (CSS Hierarchy, CSS Priority)

When there is more than one style defined for an HTML property, in what order are the styles applied to the property?

External style sheet

Inline style (inside an HTML element)

It might sound that the one with the highest priority of the three styles is used exclusely, but actually all styles are “cascaded” into one by their priority. (The last one has the highest priority.)
to the top

CSS Grouping

1. You can group selectors that share the same declarations. Separate selectors by comma.
(Selectors are the HTML tags/elements.)

2. You can group property declarations that are applied to the same selector. Separate the declaration by semicolon.

3. You can combine the ae two by grouping both selectors and declarations.

CSS ID and CSS Class

CSS ID is used to identify unique layout for a single element. It must be referenced once within a HTML document. Use a hash character(#) for ID.


CSS class is used when you want to apply declaration multiple s within a HTML document. Use a period(.) for CSS class.

You can apply multiple classes at the same .

You can limit the elements to which the class should be applied.

Difference between CSS ID and CSS Class
ID must be called only once.
ID can be referenced in JavaScript by getElementByID() function.
ID generally takes a higher precedence.

CSS class can be called multiple s. Therefore, classes are useful to apply the same declarations to multiple elements.

Both of them are case sensite.

Example cases

1. If you want all external links in blue and all internal links in green, CSS classes are very useful.


2. If you want all links in menu in green and all links in con in blue, CSS IDs are appropriate.






3. Using ID and class together


4. Conflicts and Precedences between ID and CSS


The ence is in blue with font size 14px in a solid green .

5. ID, class and inheritance

6. Which one to use?
CSS class certainly ges you more flexibility, but CSS ID makes a HTML document more structured. It can be easier to maintain HTML documents with IDs if you dide a document into several blocks and assign IDs to them.
to the top

CSS Nesting

You can declare selectors within other selectors. This helps optimize long CSS codes.

Title


This is the first paragraph of the con


Example – Boxes

Source