CSS Tutorial

Cascading style sheets, generally known as CSS, is a simple design language that helps design web pages creatively and makes them presentable.

Why Should you use CSS?

CSS handles the user interface part of your website, which helps in making these web pages more attractive and presentable. CSS controls the layout of your web pages, the images to put in, color, styles of the fonts, paragraph spacings, column settings, and variations in displaying these web pages on different platforms and devices.

CSS helps you describe how to display your HTML elements on the screen and allows you to control multiple layouts of the web pages at one stretch. It can also be used with certain XML documents.

Thus, CSS can be used along with HTML, XML, and Javascript elements to create new and more attractive user interfaces for your website and also can be used to design user interfaces for mobile applications. Hence, it helps in

• Saving a lot of time

• Solving bigger problems

• Provides more detailed attributes than plain HTML

The Syntax

CSS comes with specific style rules elucidated by the browser, and then these are bound with certain HTML elements.

• Selector

• Property

• Value

CSS style rule can be denoted as follows:

Selector {property : value}

• Selector - helps you to style certain HTML elements.

• Property - defines the type of attributes of HTML like font, color, etc.

• Value - you can assign values for the defined HTML properties.

Types of selectors in CSS

• CSS Element selector : Select the HTML elements by their name.

• CSS ID selector : It selects a single or unique HTML element and is written with “#” followed by ID.

• CSS Class selector : It selects specific attributes of particular HTML elements and is denoted with a period symbol(.) followed by a class name.

• CSS Universal Selector : This is used to set a particular style for all the elements in the HTML page or all the elements within an element in the HTML page.

• CSS Group selector : It is used to select all the elements where you want to define the same style for all of them,. So, all the elements are separated through commas.

How is CSS added?

• Inline CSS : CSS is applied on a single line or element.

• Internal CSS : CSS is applied on a single page or document, which will affect all the elements embedded in it. It is written under the header section of the HTML within the style tag.

• External CSS : CSS is applied on all the pages or multiple pages. This is written in a separate CSS file with the extension “.css,” and then this CSS file is linked to the HTML document through the link tag written in the head section of HTML.

CSS Properties

CSS Border : CSS Border property is used on the elements to set their borders. These CSS Border properties are used to specify the size, color, and style of the border of an element.

The CSS border properties are as follows:

• CSS Border-Style - This property is used on the web page to define its border. The border-style values are- none, dotted, dashed, solid, double, etc.

• CSS Border-Width - The border’s width can be defined by this property, which also sets the pixels. You can also make use of the default border values such as thin, medium, or thick.

• CSS Border-Color - There are three different methods that you can use to set the border color.

• You can specify the color Name.

• You can set the RGB value.

• You can define the color with its Hex value.

• If not the above three methods, the default transparent value is inherited from the color property and is applied to the element.

CSS Border Radius 

The defined radius determines the width of the border. To specify the four corners of the border, you can make use of the following properties.

• Top-left radius

• Top-right radius

• Bottom-right radius

• Bottom-left radius

CSS Border Collapse 

To specify the border of the adjacent cells of a table, you can use the CSS border-collapse property. There are two central values to determine this property.

• Separate  : It Separates the borders of the cells of a table. Thus, each cell can have its border. This can be done through border-spacing property.

• Collapse : To collapse the borders into the single border of a cell the collapse value is used. Here the border-spacing property doesn’t take effect.

CSS Margin : Through this property, you can determine the space around the elements. The margin is transparent and doesn’t have any color.

CSS Margin properties

• Margin - used to set all the properties of the margin at once.

• Margin-left

• Margin-right

• Margin-top

• Margin-bottom

CSS Margin values

• Auto - here, the browser is free to calculate the margin.

• Inherit - margin can be inherited from the parent element.

• Length - pt,px,cm, etc are used to specify the margin. Default value here is 0px.

• % - specifies the margin of the particular element content through the percent of its width.

CSS Padding

CSS padding is used to determine the space between the content and margin of an element. CSS padding is affected by the background color.

CSS Padding properties

• Padding- used to specify all the padding properties at once.

• Padding-left

• Padding-right

• Padding-top

• Padding-bottom

To determine the padding values, you can make use of % and length.

CSS Box Model

A web page can have many components, and these components can be identified through one or more rectangular boxes.

The CSS Box Model is used to design and structure the web page. Thus, it has many components, and many tools and properties can handle these components.

CSS Box Model Properties

• Border

• Margin

• Padding

• Content

The above-mentioned are some of the CSS Properties. There are more of them that you can explore.

Why Choose this free CSS tutorial?

This free CSS tutorial course is specially designed for those who want to explore more properties of CSS. To understand this course better, you need to know a few prerequisite topics like Introduction to HTML, HTML Attributes and Tags, HTML Tutorial, Introduction to CSS, and a few CSS properties.

This free CSS Tutorial contains 1.5 hours of video content to learn about CSS Border, CSS Margin, CSS Padding, and CSS Box Model. This free course not only helps you understand these properties, but also you can learn how to implement them through the hands-on explanation provided within the sessions. You can also learn to apply these properties through the project provided with a hands-on explanation. To test your knowledge of what you have learned in this CSS Tutorial, attend the quiz at the end of the course. 

Hurry Up! Enroll in this free course Now! And get hold of this free CSS Tutorial on Great Learning to not only strengthen your theory on CSS but also strengthen your practical knowledge through hands-on sessions. You can have the free certificate of completion of this course.