Front-end Development – CSS
Introduction:
CSS stands for Cascading Style Sheet, a standard language that specifies how to display content on a web page. With CSS, we can control the design layout and its components for various devices, such as desktops, tablets, and mobile phones. Examples of components are header, footer, body, section and contents.
HTML never intended to have tags for formatting the web page. Development of large websites where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide web Consortium(W3C) created CSS. CSS removed the style formatting from the HTML page.
CSS Syntax:
A CSS rule consists of a selector and declaration block.
The Selector points to the HTML element we want to style. The declaration contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and value, separated by a colon. Multiple CSS declarations separated with semicolons,and declaration blocks are surrounded by curly braces.
Example:
If we want to style a paragraph tag, the styling will be:
p{
color : red;
text-align: center;
}
Here p is the selector, color is the property and red is the value.
CSS Selectors:
CSS selectors are used to find or select the HTML elements we want to style. The selectors can be divided into five categories.
- Simple Selectors (Elements based on id,class name,name)
- Combinator selectors (Elements based on specific relationship)
- Pseudo-class Selectors (Elements based on state)
- Pseudo-elements Selectors (Select and style part of the element)
- Attribute Selectors (Select based on Attribute or attribute value)
We can group the selectors and provide the styling commonly which heps to reduce the code.
Ways to insert CSS:
- External CSS
- Internal CSS
- Inline CSS
External CSS:
An external style sheet can be written in any text editor and must be saved with “.css” extension. Using link HTML tag, we can insert the stylesheet in head scetion to apply the styles.
EX: <link rel=”stylesheet” href=”mystyle.css”>
Internal CSS:
An internal style sheet is used if a single HTML page contains a unique style. The style is defined inside <style> tag inside head section.
EX: <style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
Inline CSS:
This is used to apply styling for a single element.
EX: <p style=”color:red;”> This is Paragraph </p>
The style sheet is mainly responsible for developing the web page responsive.
For developing a web page mobile responsive, we need to use CSS properties like viewport, media queries, grid view, frameworks.
With the help of CSS, we can effectively develop a webpage that enhances its appearance and creates a more interactive user experience.
Previous Blog:
