CSS is the acronym for "Cascading Style Sheet". CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. Css are three types Class base css, Tag base css, ID base css.
Class Base : The css used to redefine the elements of html is called as class base css.It is denoted by dot(.) before the name. The class based css file is using to multiple times of single document.
ex: ( .sample{color:#000;} )
Tag Base : The css used to apply for tag of html is called as tag base css. Tag base css is denoted with tags(body,img, ul, li,p,table,h1 to h6..etc)
ID Base : The css used to create block elements is called as ID base css. Alternative for creating table(cell) without html.It is denoted by (#)before the name. The ID based css file is using to single time of single document.
Padding : Padding is used to define the space between the content and the border. (Inside Border)
Margin : Margin is the space outside the border. (Outside Border)
You can easily specify the different paddings and margins for the different sides of an element such as top, right, bottom or left side using the CSS individual padding and margin properties.
Multiple style sheets can be combined by using the <link> tag and the with the title attribute. The title value allows one or more <link> tags to link with each other. After combination that theme will be applied as combined and will be shown to the user.
Pseudo elements allow the use of the part of element and not the element itself. They are applied to block level element, which is used for the complete block for which the CSS is being written. This allow the subpart of an element to be styled like paragraphs and headings.
Pseudo-elements are used to add special effects to some selectors.
CSS in used to apply styles in HTML mark-up. In some cases when extra
mark-up or styling is not possible for the document, then there is a
feature available in CSS known as pseudo-elements. It will allow extra
mark-up to the document without disturbing the actual document.
Overlapping may occur while using CSS for positioning HTML elements. Z
index helps in specifying the overlapping element. It is a number which
can be positive or negative, the default value being zero.
Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.
We can add icons to the HTML webpage by using an icon library like font-awesome.
We have to add the name of the given icon class to any inline HTML element. (<i> or <span>) . Icons in the icon libraries are scalable vectors that can be customized with CSS.
By using navigation bars we can make an ordinary HTML page into a user-specific and more dynamic web page. Basically, it is a list of links, hence use of <ul> and <li> elements makes the perfect sense.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Benefits of using CSS sprites are : It is a technique where one has a large image containing a set of small images. Those images can be broken down with the help of CSS to disintegrate into multiple images.
It helps large images or pages to load faster hence, saving a lot of time. It cuts back HTTP requests. It is also flexible over website’s layout and design.
The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.
* A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #. Ex : g {color: #00cjfi}
* A mixture of red, green and blue represents a color. The value of a color can also be specified.
Example : rgb(r,g,b):
In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown.
Basically it is not case sensitive but the class names are considered as case sensitive in HTML 4.01 nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.
It is an instruction that tells browser on how to render a specific element on the HTML page. It consists of a selector with a declaration block that follows.
Rule set : Rule set Selectors can be attached to other selectors to be identified by rule set.
RWD is the abbreviated form of Responsive Web Design. It is used to display the designed page suitably on any kind of screen size depending on the device under consideration.
Graceful degradation is about creating a website design that will be compatible with the latest browsers and, at the same time, will remain functional to an extent on smaller screens and older browsers. I use the principle of graceful degradation in my web development work, as many of our viewers still use older browsers and it is important that they should be able to access and view our website.
File splitting is about splitting the CSS code into many separate files and organizing them according to the component type or site section to facilitate better management of CSS. You can create and assign a separate style sheet for each of these files for further convenience. So, when someone visits a section of the website, only the style sheets for that section will load. The style sheets for the other website sections will not load until specifically needed. I've found that this reduces the time taken for the page to load on the browser. That then leads to quicker access to websites and enhances user experience.
The opacity is mainly used in defining the transparency of the element. In other words, it specifies the clarity of an image by allowing some fixed size of light to pass through it.
The background-repeat property is responsible for controlling the image repetition. Using this property, we can repeat an image horizontally, vertically, or both. It has the following different values:
repeat: it repeats the image horizontally and vertically
repeat-x: it repeats the image horizontally
repeat-y: it repeats the image vertically
no-repeat: it does not repeat the image.
Example :
<style>
div {
background-image:url(freetimelearn_logo.jpeg);
background-repeat:no-repeat;
}
</style>
The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
Example :
div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}
The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.
The counter-increment property increases or decreases the value of one or more CSS counters. The counter-increment property is usually used together with the counter-reset property and the content property.
Example :
body {
/* Set “my-sec-counter” to 0 */
counter-reset: my-sec-counter;
}
h2:before {
/* Increment “my-sec-counter” by 1 */
counter-increment: my-sec-counter;
content: “Section ” counter(my-sec-counter) “. “;
}
The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated.
