info@enlightsolution.com           01710-318199           9:00AM - 6:00PM

  • Home
  • Services
    • Custom Software Development
    • Web Application
    • Mobile Application
  • Products
    • Enlight Business Solutions
    • Enlight Accounting
    • Enlight HR & Payroll
    • Enlight POS
    • Asset Management System
  • Portfolio
  • Insights
  • About Us
  • Career
  • Contact US

Advanced CSS

Advanced CSS

by Admin / Tuesday, 25 June 2019 / Published in C#, Web Development application

CSS is a complex language that packs quite a bit of power. We know that CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.

All styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses. We already know that CSS is a vast thing, so, I’ll discuss some important rules. Such as,

  • Class and Id selectors
  • Grouping and Nesting
  • Pseudo Classes
  • Shorthand Properties
  • Background Images
  • Page Layout

Class and Id selectors

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

 

 

 

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Grouping and Nesting

You can give the same properties to a number of selectors without having to repeat them.

You can simply separate selectors with commas in one line and apply the same properties.

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

Margins and Padding

Margin allows you to amalgamate margin-top, margin-right, margin-bottom,

and margin-left in the form of property: top right bottom left;

Borders

Border-width can be used in the same way as margin and padding, too. You can also combine border-width, border-color, and border-style with the border property.

 

Background image

CSS background images are a powerful way to add detailed presentation to a page.

Page Layout

Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose. You can place these chunks absolutely or relative to another chunk.

The position property is used to define whether a box is absolute, relative, static or fixed

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns. Using float, you can float: left or float: right.

Positioning

The position property is used to define whether a box is absolute, relative, static or fixed:

  • static is the default value and renders a box in the normal order of things, as they appear in the HTML.
  • relative is much like static but the box can be offset from its original position with the properties top, right, bottom and left.
  • absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left.
  • fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.

How a box’s position is calculated

A box can be positioned with the top, right, bottom, and left properties. These will have different effects depending on the value of position.

relative: Position is offset from the initial position.

absolute: Taken out of the flow and positioned in relation to the containing box.

fixed: Taken out of the flow and positioned in relation to the viewport. It will not scroll with the rest of the page’s content.

Floating

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.

Using float, we can use float: left or float: right

Example:

 

 

Rounded Corners

Rounded corners used to be the stuff of constricting solid background images or, for flexible boxes, numerous background images, one per-corner, slapped on multiple nested div elements.

Border radius?

Border radius. Fear not, though — don’t have to have borders. The border-radius property can be used to add a corner to each corner of a box.

Before                                                                                                                                   After

Example: different type of borders –radius measurements

Box Shadows

  • The first value is the horizontal offset — how far the shadow is nudged to the right (or left if it’s negative)
  • The second value is the vertical offset — how far the shadow is nudged downwards (or upwards if it’s negative)
  • The third value is the blur radius — the higher the value the less sharp the shadow. (“0” being absolutely sharp). This is optional — omitting it is equivalent of setting “0”.
  • The fourth value is the spread distance — the higher the value, the larger the shadow (“0” being the inherited size of the box). This is also optional — omitting it is equivalent of setting “0”.
  • The fifth value is a color. That’s optional, too.

Targeting media types

@media can be used to apply styles to a specific media, such as print.

Embedding fonts

It is now widely used as a technique for embedding fonts in a web page

Reference

  • https://www.htmldog.com/guides/css/beginner/
  • https://www.w3schools.com/css/
  • https://devdocs.io/css/
  • https://learn.shayhowe.com/advanced-html-css/

About Admin

What you can read next

Basic HTML & CSS
Statements in JavaScript
 Async & Await

Leave a Reply Cancel reply

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

ENLIGHT SOLUTIONS

Enlight Solutions is working with Leading software development system. We provide out clients nice and fluent software solutions in minimum amount of time.

Quick Links

  • About Us
  • Products
  • Services
  • Portfolio
  • Blog
  • Career

All right reserved.
ENLIGHT SOLUTIONS @ 2019

  • Home
  • contact us
TOP