Awesome Features of CSS3
To learn CSS3, you have a knowledge of HTML5 and web foundation well. So you can learn CSS and CSS3 techniques very quickly and easily.
What is a CSS (Cascading Style Sheet)?
A cascading style sheet is a style sheet language to make a presentation like a layout, design, background color, text color, shadow box or shadow text and of any HTML document. Also help to adapt presentations to different devices like small, medium, large screen and printers. It is not either programming languages like C, C++, java and markup language like HTML.
HTML is a HyperText Markup Language, Made up of markup tags. CSS is used parallel to HTML and JavaScript. It is officially created and maintained by W3C(World Wide Web Consortium). Today in the web industry if you want to make a career as a UI developer, web developer, front-end developer or full-stack developer, then you must have knowledge of HTML5 and CSS3.
To make a website in HTML 5 CSS 3, you need a text editor like
- Notepad++
- Sublime text
- Dreamweaver
- visual studio code
And to test and run your website in any web browsers like
- Google Chrome
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera
How to use CSS?
CSS is used in HTML documents to make the presentation of layout and design according to the information provided in the stylesheet.
Suppose if you want to give a red color to a paragraph in the HTML document.
You have to first define p tag with content in HTML document like
<p> This is a paragraph of multiple lines. </p>
Then in CSS file, you have to define a color property with value red in declaration block { } to selector p like
From the above example, you understand the basic syntax of CSS
A selector may be any HTML elements like semantic (header, footer, section, article) and non-semantic tags (div, span), id, class, etc.
In declaration block { } you can declare the number of properties with values separated by a semicolon.
There are three methods to use CSS in HTML. They are given below –
- Inline CSS
- Internal CSS
- External CSS
- What is Inline CSS?
Inline CSS is used when you want to apply a unique style to a single HTML element. Inline CSS is always used in HTML opening tags with help of style attributes. Tags always come in pairs like opening tag <> and closing tag </>.
For Example
If you want to give text color to content h1 tag as green color by inline CSS.
<h1 style=”color: green;”> Heading One </h1>
If you reload the HTML page in the browser, then the content of h1 tag default text color black changes to green color.
- Internal CSS
Internal CSS define in a single HTML page between style tags in the head section of an HTML page. If you want to define a unique style to a single HTML page you can apply internal CSS.
For Example
If you want to give text color to the content of the h1 tag as red color by internal CSS.
<head>
<style>
h1{
color:#ff0000;
}
</style>
</head>
<body>
<h1> Heading Two</h1>
</body>
- External CSS
This CSS is beneficial when you want to make a multiple page website.
The external CSS file is a separate external file that you can save by any name. Suppose if I want to create an external CSS file by name ‘style’. I write some code in a text editor and save the file as style.css, now if I want to attach this file with an HTML file then I give a link path of external CSS in the HTML page in the head section.
For Example
Index.html page
<head>
<title> index page</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1> Heading Two </h1>
</body>
In an external CSS file, you don’t need to define the style tag or style attribute. You can directly define the CSS selector.
Style.css
h1{
color: blue;
}
What is the cascading order?
Cascading refers to hierarchical order, which means how styles are applied and what order, then which styles take precedence over others.
- When using multiple stylesheets
Suppose if we define the same CSS properties for an identical selector, in the different stylesheet, then value take from the last one stylesheet.
For example
Suppose in external stylesheet we define background-color property for h2 element.
h2{
background-color: gray;
}
Suppose in internal styles we define background-color property for h2
<style>
h2{
background-color: lightblue;
}
</style>
If the internal stylesheet defines after external stylesheet, then h2 takes light blue as a background color OR vice versa.
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<style>
h2 {
background-color: lightblue;
}
</style>
</head>
So from the above example we understand, when two styles come in competency, the last one used takes precedence.
When we are using an inline style that must be placed in the body section of the HTML document. While another stylesheet like internal and external must be placed in the head section of the HTML document. As a result, the inline style takes precedence because the inline style is the last one used.
- Specificity – when two rules apply
What will happen when these rules apply to the same selectors.
Check below code –
h1{
color:green;
}
h1{
color:blue;
}
<h1> Heading 1 </h1>
In the above code, we apply two rules to h1. But in HTML it will take blue color because h1 with the color blue is the last one used in CSS file, then it will take the first precedence.
What is specificity in CSS?
If there are two or more adverse CSS rules that apply to the same elements, then browsers define which CSS property value most important to an element and applied CSS property to that element. These matching rules, applied by different sorts of CSS selectors.
Every selector has its own space in specificity. You can see below the hierarchy of the selector’s specificity.
- Inline style
Specificity level 1000 for style attribute.
The inline style we always used in the opening tag of any HTML element.
<h1 style=”color: green”> Heading One </h1>
- ID
Specificity level 100 for style ID.
Id is a selector that used to identify unique elements like
<div id=”box”></div>
If you want to apply CSS you can define in CSS file
#box{ width: 100%; color: blue;}
- Class, Attributes and pseudo-classes
Specificity level 10 for class, attribute and pseudo-classes.
Class define with period(.) character in css like
.clr{ color: brown;}
Attributes define in css with [ ] brackets like
input[type=”text”] { padding:10px; }
Pseudo classes like :hover, :active, :focus
- Elements
Specificity level 1 for the element name.
These includes elements name like h1 to h6, div, p
p{ text-align: center;}
CSS Measurement Units
CSS supports a number of measurement units, which are categorized in absolute units like inches, centimeters, millimeters, picas, points, pixels and relative units like em, percentage, vh,vw, rem, etc. Absolute units are mostly used for print layout, they are not recommended for screen media. Because screen sizes vary according to different devices while relative units are used for screen media. If you look at the given charts, then you understand units and their value.
| Absolute units | |
| Units | Measurements |
| cm | 1 centimeters = 10 millimeters |
| in | 1 in (inches) = 2.54 cm |
| mm | millimeters |
| px | 1 px (pixels) = 1/96th of 1 in |
| pt | 1 pt (point) = 1/72 of 1 in |
| pc | 1 pc (picas) = 12 pt |
| Relative units | |
| Units | Measurements |
| em | Relative to font-size of the element. OR 1 em = 16px |
| rem | Relative to font-size of the root element. |
| vw | One % of the width of the viewport |
| vh | One % of the height of the viewport |
| % | Relative to the parent element |
The above CSS units expressing a length of some CSS properties like width, height, padding, margins, font-size, etc. if you set any properties value to 0 then you don’t have to mention unit with 0.
For example
body{
padding: 0;
margin: 0;
}
How to set font-size measurements in CSS?
Font size is the setting of the text in web design is an important concept. You can’t set the font size of paragraphs that look like heading and heading looks like a paragraph. For that you have to use proper tags for heading like <h1> to <h6> and for paragraph you can use <p> tag.
For font-size property, you may use absolute or relative units. When you are using a pixel unit then the browser can’t resize font-size. Because it is a static or absolute unit. So absolute units can’t be fixed for screen output. It is best for print output. By default paragraphs have default font-size = 16px.
So for browser accessibility, you can use a combination of relative unit em and percentage.
1 em = 16px
For example
body{
font-size:100%
}
h1{
Font-size: 2.5em;
}
This is the best solution for the older version of Internet Explorer. Because when you are using only an em unit then font-size should be either larger or smaller than expected in different devices. So the combination of percentage and em is the best solution for browser compatibility issues of font-size property.
Advanced or Awesome features of CSS3
CSS3 is the advanced feature of CSS. CSS3 is backward compatible with CSS. While making web design pages, we require some creative styling effects, that can only achieve through HTML/HTML5 tags and with the help of graphic design software like photoshop. But today that styling effects we can achieve by help of CSS3 advanced features. Sometimes if you want to edit or make changes in design. You can change a few lines of CSS style code and prepare your design. This is much easier than opening an image in Photoshop and making changes and updating the design on the website.
Below are some awesome CSS3 features given –
- Rounded Corner –
If you want to make the corner of the box soft and curve, you can use border-radius CSS3 property.
For example
.box{
width:450px;
height: 250px;
border-radius: 8px;
background:lightblue;
}
2. Box shadow –
If you want to give shadow to the above box you can add box-shadow property.
For example
.box{
box-shadow: 0px 0px 10px #333;
}
3. CSS3 colours
CSS3 brings an advanced concept of describing colors. We always describe color or background-color properties value by hexadecimal code like #FFF or #FFFFFF. In hexadecimal code the first two digits indicate red, middle two digits indicate green and the last two digits indicate blue colors. So we are using the RGB color code for the website another color code is CMYK but that is used in most print media.
Today CSS3 color modules bring another format like HSL, HSLA, RGBA.
- RGBA
RGBA works like RGB. In RGBA add fourth value alpha or transparency.
For example
h1{
color: rgba(255, 124, 128, 0.5)
}
In the above example the first three values are red, green, blue and last fourth is opacity. In rgb() notation values are integers between 0 to 255. In rgba() notation alpha value may be integer or fraction between 0 to 1. Zero( 0 ) indicates fully transparent and 0.6 indicates 60% opaque and 1 indicates fully opaque.
- HSL and HSLA
HSL means Hue, Saturation, Lightness. It is specified with HSL(hue, saturation, lightness).
- Hue is a degree on color wheel. 0 = red, 120 = green, 180 = cyan, 240 = blue.
- Saturation is a percentage value. 100% means full color. And 0 means the shade of gray.
- Lightness is also in percentage. The Lightness of 100% will be white, lightness of 50% will be actual hue, lightness of 0% will be black.
When you are using alpha(opacity) in HSL then it will be HSLA().
For example
When applying green color
#demo {background-color: hsl(120, 100%, 50%);}
When applying green color with opacity
#demo {background-color: hsla(120, 100%, 50%, o.3);}
- Background gradient
Gradient means if you want to apply background property to any HTML selector with multiple color combinations like sunrise, or sky color. You can make it by linear or radial gradients.
- Linear gradient
W3c recommended standard syntax for linear gradient as given below.
selector{
background-image:linear-gradient(direction, color1, color2);
}
.box{
background-image:linear-gradient(to right, red, yellow);
}
You can also use degrees instead of direction in some cases.
.box{
background-image:linear-gradient(45deg, red, yellow);
}
- Radial gradient
Radial gradients are circular or elliptical gradients that are defined from a center point or ending shape.
W3c recommended standard syntax for the radial gradient as given below.
selector{
background-image:radial-gradient(shape at position, color1, color2);
}
.box{
background-image:radial-gradient(circle, #c3601a, #000a80);
}
- Text shadow –
If you want to give shadow to any text box you can add text-shadow property.
For example
h3{
text-shadow: 0px 0px 10px green;
color:green;
}
- CSS Counters –
CSS counters are an awesome feature of CSS3. It replaces javascript in some situations because that works like variables. With counters you can count pictures in a gallery, you may create pagination. These CSS3 properties work in Internet Explorer 8 also.
Below is an example that counts an h3 element.
body {
counter-reset: menu;}
h3::before {
counter-increment: menu;
content: “Menu ” counter(menu) “: “;
}
Output will be
In the above example, counter-reset is used to create counter and counter-increment that increases the value. counter() or counters() function to add value of counter to an element.
So these are some awesome features of CSS3, that I want to show you. Along with this, there are some other CSS3 features that are also included like 2D transform, 3D transform, transition, multiple columns, animations, box-sizing and so on. I hope all of you like my mini tutorial-like blog on CSS3.
Author-
Prasanna Kadu
Call the Trainer and Book your free demo Class for now!!!
© Copyright 2019 | Sevenmentor Pvt Ltd.