CSS Pseudo Classes are representation of special states of different elements, these classes not only depict basic elements in document but also their external factors such status, position, history, etc. Using these pseudo classes developer can even style elements which cannot be directly selected via CSS selectors. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has ... Read More

We can center horizontally a block-level element by using the CSS margin property, but CSS width property of that element should be set. The auto value is set for the margin property. Let’s see some examples to center an element using the CSS margin property − Create a Symbol and Align to the Center In this example, we have created a symbol with CSS. The alignment is done to the center using the margin property with value auto − div { width: 50%; margin: 10px auto; border:4px solid black; } ... Read More

Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on several properties such as − Dimensions Type − atomic inline-level, block, inline, or inline-block Positioning − absolute, float, or normal Relation with child and neighbour elements of document External Information − viewport’s and image’s width - height, etc. CSS Box Generation of processed elements − Block ... Read More

The CSS :last-child pseudo-class selects an element that is the last child element of some other element. As the name suggests, it will select the last child of its parent. Let us see some examples to implement the :last-child pseudo class. Syntax The following is the syntax for the :last-child class − :last-child{ /*declarations*/ } Style a table with the :last-child pseudo class Let’s see an example of the CSS last-child Pseudo class. In this example, we have set a table − Demo ... Read More

CSS Image Sprite is a combined image file of all pictures in a document page. Image sprites come is useful as image resources will have to be loaded only once. Using the CSS background-position different parts of the combined image can be shown.Let’s see an example for CSS Image Sprites −Example Live Demo .sprite {    background: url("Capture.png") no-repeat;    width: 280px;    height: 200px;    display: inline-block; } .flag1 {    background-position: 0px 0px; } .flag2 {    background-position: -255px 0px; } .flag3 {    background-position: -510px 0px; } .flag4 {    background-position: -765px 0px; } body {    text-align: center; } Flag Image Sprite Output

CSS Media Types are the device types on which the document is rendered and specific styles can be defined for every media type. The following are the Media Types in CSS3 and Media Queries − Sr.No Value & Description 1 allStylesheet applies to all media type devices 2 printStylesheet applies to printers 3 screenStylesheet applies to computer screens, tablets, smart-phones etc. 4 speechStylesheet applies to screen readers that "reads" the page out loud NOTE − Several media types (such as aural, braille, embossed, handheld, projection, ttv and tv) ... Read More

The first-line Pseudo Element selects the first line of the content of an element or a container. It is denoted by double colon i.e. − ::first-line Let’s see some examples of CSS ::first-line pseudo element − Style the first line In this example, we will style the first line using the pseudo element − p::first-line { background-color: lightgreen; color: white; } Example Let us see the example − ... Read More

Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document. The following are some examples to implement the z-index property. z-index In this example, we have set a positive z-index value to stack − Example .dropbtn { background-color: rgb(76, 78, 175); ... Read More

Using CSS pseudo-class selectors, namely, :active, :hover, :link and :visited we can style different states of a link/anchor. For proper functionality, the order of these selectors should be −:link:visited:hover:activeThe syntax of CSS psudo-class property is as follows −a:(pseudo-selector) {    /*declarations*/ }ExampleLet’s see an example to use CSS Anchor Pseudo Classes − Live Demo div {    display: flex;    float: left; } a {    margin: 20px;    padding: 10px;    border: 2px solid black;    text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;    font-size: 1.1em; } a:link {    text-decoration: ... Read More

Using CSS selectors, we can specifically style desired elements based on our preference. There are various methods for selecting elements in the HTML DOM. The CSS Selectors include − Class selector Id selector Grouping Selectors Syntax The syntax for CSS selectors is as follows − Selector { /*declarations*/ } CSS class selector The class attribute is used to set the class selector. This will select a specific element. You need to write the . i.e., the period character and follow it by the class attribute to select the element with a specific ... Read More