Cascading Style Sheet
Aug 20, 2020 by Ravindra Reddy

CASCADING STYLE SHEET is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

Structure of CSS:

Selector {Property: Value}

Selectors

• Universal selector
• Class selector
• ID selector
• Element selector
• Grouping selector

1. Universal Selector

• It matches any element.
• We will define with “*” symbol.

Ex: *{padding: 10px; margin: 10px; ....}

2. Class Selector

• It matches multiple elements.
• We will define with “.” symbol.

Ex: .class name {height: 100px; width: 100px; ....}

3. ID Selector

• It matches unique element.
• We will define with “#” symbol.

Ex: #id name {color: blue; ....}

4. Element Selector

• The Element Selector selects all elements with the specified element name.

Ex: p {font-size:20px;color: blue; ....}

5. Grouping Selector

• The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

Ex: h1,h2, p {font-size:20px;color: blue; ....}

Types of ways to insert CSS

We have Three types of ways to insert CSS.

• Inline CSS
• Internal CSS
• External CSS.

1. Inline CSS

We are writing CSS with in tag.

2. Internal CSS

We are writing styles inside the ‘head’ section by giving style-tag

3. External CSS

It will be as external document to use this.

CSS Properties:

Float: left/right/none

Width: 100px/100%

Min-width: 100px/100%

Max-width: 100px/100%

Background: red/#fff

Border: 1px solid #000/1px dotted #000/1px dashed #000

Position: static/relative/absolute/fixed

Font-size: 20px/120%/larger/xx-small

Text-align: center/left/right/justify

Text-transform: uppercase/lowercase/capitalize

Text-decoration: uppercase/lowercase/line through

Font-style: italic/normal

Font-weight: bold/normal/400/700

Line-height: 20px

Color: blue/#000

Display: none/block/inline/inline-block

Visibility: hidden/visible

Benefits of Using CSS

• Easier to maintain and update.
• Greater consistency in design.
• Save time.
• Lightweight code.
• Ease of presenting different styles to different viewers.
• Faster Download Times.
• It has better Device Compatibility.

Drawbacks of CSS

• Lack of Security.
• Cross Browser Issues.
• Can't perform any Arithmetical and Logical operations
• There is no way to interact with database

In Symphisys we are using HTML, CSS, Bootstrap, Javascript and JQuery for front-end developments.We are following the designs for all standard screen resolutions and all compactable mobile devices. We are also implementing window resize designs. This helps the sites to be more effective and user friendly to the users.