CSS: Cascading Style Sheets
“Code is read more than it is written.”― Daniel Roy Greenfeld
While HTML provides the basic framework of a website, an HTML-coded website looks very simple and bland. No one likes to visit a black and white website with similar positioning defaulted to every element.
As developers and designers, we love to dance around with colors, enhance the images, add fonts and create a stylish webpage. This is precisely the job of a cascading stylesheet.
Syntax:
As with any other coding language, CSS consists of its very own syntax and set of reserved keywords. The basic syntax of a basic CSS line is:
Selector {
Property: Value;
}
The selector may refer to any specific part of HTML elements.
The properties comprise of style changes added to the selector.
The value given to the property brings about changes in the selected element.
Selectors:
CSS allows us to style specific HTML elements by using various selectors, their combinations, as well as pseudo-classes.
*{ } : Selects all elements.
Tag Name { }: A simple HTML tag can be styled by simply mentioning the tag name as the selector.
Class Name{ }: A specific class of elements can be styled by adding a dot before the class name as the selector.
#Id Name { }: A specific Id of elements can be styled by adding a # sign preceding the id name.
We can use a combination of 2 or more HTML elements by selecting them without any space(Ex: .class1.class2{ }).For the in-depth selection of elements, CSS provides a hierarchical selection so that we can style specific elements inside their parent element.
For ex: <div class= ”Hello”>
<div></div>
</div>
Now we can select the div inside the
class Hello:
.Hello, div (Give space in between class name and tag).
Special pseudo-classes are also available like hover, enabled, etc which can be selected using a colon (Ex: div:hover{ }).
Comments:
Comments are really important in programming languages, especially in CSS as it gives a clear record of the usability of the code. Always keep the practice of writing some comments so that you can revisit the code or even reuse it in the future.
CSS comments can be mentioned inside /* */
Colors:
Styling the website is incomplete without colors. As a designer, we love to play around with all colors. CSS provides the freedom to choose colors based on the RGB system, hex system, HSL system, etc. We can modify color properties like opacity, gradient, etc.
We can choose basic colors by mentioning their names (color: blue;)Colors can also be picked via their RGB value (color: RGB(255,0,0);)
For more advanced color searches, designers use the hex code of colors. It is a sequence consisting of 6 alphanumeric characters which are unique to each color. Add a # sign before the hex code. (color: #03Y28M)
Detailing colors can be achieved by using the HSL property which stands for hue, saturation, and lightness. Ex = HSL(180,50%,50%)Various color pickers are available across the internet which specifies hex codes and RGB values of the colors.
Background:
Every creative webpage contains an appealing background in its contents. CSS has a separate background property that can be used for every separate division or the entire body.
Background Color: One can add background colors using the RGB, HSL, Hex code systems. (background-color: #60R456)
Background Image: We can also paste a suitable image of our choice as the background. Make sure to paste the correct URL. (background-image:URL(‘apples.jpg’))
Background position: To move the background, we can use the background-position property.Background Attachment: The “scroll” value allows the background to scroll up and down when the user uses the scroll bar.
Prioritizing one style over another:
HTML elements might require multiple styles that conflict with each other. In such cases, a few selectors are overridden by others.
For example, In the body element’s CSS declaration, the font color is declared as green. But after declaring another class as ”pink-text” which has the font color pink and applying it to the h1 element, we can observe that the “pink-text” class overrode the body element’s CSS declaration and pink color persists. Therefore classes override body element’s CSS.
Browsers read CSS from top to bottom in the order of their declaration. This implies that in the case of a conflict, the browser will use whichever CSS declaration came last.
Hence, when there are 2 classes such as “pink-text” and “yellow-text” declared in the respective order for an element, the latter one i.e., “yellow-text takes charge.
Apart from these, there are other ways to override CSS.
• Id declarations override class declarations, regardless of where or in what order they are declared in your style element of CSS.
•Inline styles override all the CSS declarations of the style element including class and id declarations.
•In several situations, we use CSS libraries. These might accidentally overrun the CSS that we provide. In order to avoid that we use can use this very powerful method of all which is to add ‘!important’ to a particular element’s declaration to ensure it has a specific CSS.
CSS Borders:
The CSS border properties allow us to specify the style, width, and color of an element’s border.
1.Border-style allows us to what kind of border need to display
2.The Border-width property specifies the width of the four borders
3.The border-color property is used to set the color of the four borders.
Syntax:
{
Border-property: Effect;
}
Margins:
The CSS margins properties are used to create space around elements, outside of any defined borders. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Syntax:
{
Margin: top right bottom left;
}
Css height/width:
The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
Syntax:
{
Height:50px;
Width:20px;
}
Paddings:
Padding is used to create space around an element’s content, inside of any defined borders.
Syntax:
{
Padding-top:20px; padding: top right bottom left
}
Every HTML page has a body element that can be styled uniquely using CSS. By using this, all the other elements inherit the body element’s style.
Output:
Usage of borders, paddings, margins, height, and width
The slight touch of colors everything beautiful like a rainbow coloring the plain sky.
Don’t stop with HTML but make way and reach to learn CSS to make any website astonishing.
Till then We will be posting many more blogs to make things easier and happier.
BE HAPPY FOR THIS MOMENT, THIS MOMENT IS YOUR LIFE
Happy HUSTLING…..
