The Stunning CSS
Ultimate Guide To Learn The Basics of CSS
What is CSS?
The CSS stands for Cascading Style Sheets.
After learning HTML, the second most important skill is to learn CSS to become a Web Developer. The CSS has the ability to add style or look and feel to the websites.
It adds some special features like color, size, fonts, layout, etc that are used to present the information to the visitors.
The CSS allows you to separate the style and content from the web pages.
Benefits of CSS :
- Faster web page loading.
- Easy to maintain.
- Consumes less time.
- Support multiple devices such as large screens and small screens.
— → CSS Syntax :
The CSS syntax has three rules, Selector, Property, and a value.
Selector :
The Selector points out which type of HTML element is to edit or style. We can select a particular element to add style.
We can add multiple HTML elements in the selector, which are separated by a comma(,).
e.g :
h1, p, body, title, ID, class, etc.
Property :
It is the property in which is used to change a particular part of the selector visually.
e.g :
color, font-family, border, etc.
Values :
The values are used to change a particular property.
e.g:
blue, sans-serif, 15px, etc.
Declaration :
In the declaration block, it is the collection of properties and values which is separated by a colon, known as statements.
The collection of statements is separated by semicolons between the curly({}) brackets in the declaration block.
— → Selectors In CSS:
To style any element first you have to select the specific element with the selector.
Id Selector :
An ID selector is a unique selector which is used to select a particular HTML element to style.
The # character is written at the beginning of the selector without using any number or other character.
Example:
Class Selector :
To select the class selector we can use the period(.) operator followed by the class name after the HTML element that is in the class.
The selector can be applied to more than one class.
Example :
Element Selector :
The element selector can be used to select the particular HTML element to style.
Example :
— → Ways To Insert CSS :
1. Internal or Embedded CSS:
The Internal CSS must be applied to the single HTML element. It is defined in the head section of the HTML file using <style> element.
Example :
2. External CSS :
It is the most efficient way to write CSS style using a separate file. The CSS file can be linked to the HTML using the <link> tag and the CSS file is saved using the .CSS extension.
Example :
3. Inline CSS :
The inline CSS is used to style only one individual HTML element. In the inline CSS, you can add as many values as you want to be separated by a semicolon(;).
This method is not recommended using as it is a bad practice.
Example :
— → Colors In CSS :
Color is used to represent information to the users, and they can recognize it quickly. The more web pages are visually beautiful, the more users can enjoy reading content on the websites.
In CSS, you can set the background color, text color, and border color of the content.
RGB Color :
In CSS, you can define the colors using the built-in method RGB(). The RGB() method is nothing but the combination of three colors i.e. Red, Green, and Blue.
RGB(RED,GREEN,BLUE)
The three parameters show the quality of the color using the numbers from 0 to 255 only.
Example :
HEX Color :
HEX color uses the color units to display the colors on the screen.
#RRGGBB
In this method, the colors are defined using the RR(red), GG(green), and BB(blue).
Example :
Background Color :
This CSS property can change the background color of the content.
Example :
Text Color :
Text color can change the text color of the content. The text color can be set using a color name, HEX value, and RGB value.
Example :
Border Color :
The four sides of the text border can be changed using this property.
Example :
— → Texts In CSS :
Text is the most important aspect of any webpage. The text represents the information to the users to visit a particular web page.
The text is like emotions that have the ability to engage the audience to the websites.
Text Alignment :
Text alignment property places the text in a horizontal way. The text positioning such as right left and center are used to set the text.
Example :
Text Transformation :
It transforms the text into uppercase or lowercase.
Example :
Text Decoration :
The text-decoration is used to underline, over-line, and line-through text.
Example :
— → Fonts In CSS :
The fonts play a major role to attract users to the web pages. It is the main thing to present information in an easy and simple manner. It also helps the users to understand the information from the web page.
There are two different types of font families.
1. Generic Font Family :
The generic font family is a collection of the same types i.e. serif, sans-serif, monospace, cursive, fantasy.
Example :
2. Font Family :
The font family is used for the particular font to define the style i.e. Times New Roman, Arial, Verdana, etc.
Example :
— → Box Model In CSS :
In this section, we are going to discuss some important concepts. The two concepts are quite similar, but they are very different from each other.
Margin :
The margin property creates the empty space between any HTML element and outside the border.
Margin is used to set the four sides, i.e. Top, Right, Bottom and Left.
Padding :
It creates space between the content and the border around the content.
Border :
Border property defines the color, style, and size of the border. It can be of any type i.e. solid, dashed, dotted, double border, etc.
If we do not specify the style of the border, it will be invisible.
Content :
Content is the heart of the page that is where the information and the images are displayed.
Example:
Conclusion :
You learned the basics of CSS from this article. Now you can build your own landing page with the CSS.
There are lots of resources available on the internet if you need to dig deep in CSS.
If you enjoyed this post, then feel free to clap, comment, and share with your friends. Don’t forget to follow me for more interesting articles.
Thank you for reading!
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
