
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.
Share
Tags
Categories

Ravindra Reddy
UI Developer
Symphisys
Aug 20, 2020