Found 1566 Articles for CSS

Effect of Color Property on Borders and Outlines in CSS

AmitDiwan
Updated on 01-Nov-2023 16:22:58

264 Views

We can define the border color and outline color for an element. Unlike borders, outline doesn’t take up any space. The border-color property is used to set an element’s border color and the outline-color property is used to set its outline color. Syntax The syntax for CSS border-color and outline-color property is as follows − /*for setting border-color*/ Selector { border-color: /*value*/ } /*for setting outline-color*/ Selector { outline-color: /*value*/ } The following examples illustrate CSS border-color and outline-color property − Set Outline and Border for Span and div In this example, ... Read More

Setting the element's text color using CSS

AmitDiwan
Updated on 09-Jan-2020 11:15:19

132 Views

The CSS color property is used to change the text color of an element. We can specify values as standard color name, rgb(), rgba(), hsl(), hsla() and hexadecimal value.SyntaxThe syntax for CSS color property is as follows −Selector {    color: /*value*/ }The following examples illustrate CSS color property −Example Live Demo div {    height: 50px;    width: 50px;    float: right;    color: white;    background-color: #2f5587; } p {    color: rgba(225, 5, 135, 0.7);    border: 2px solid #16c618;    box-shadow: 0 7px 0 5px hsl(90, 60%, 70%); } Example Heading ... Read More

Grouping Selectors in CSS

AmitDiwan
Updated on 09-Jan-2020 11:10:55

14K+ Views

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.SyntaxThe syntax for CSS grouping selector is as follows −element, element {    /*declarations*/ }The following examples illustrate CSS grouping selector −Example Live Demo article, p, img {    display: block;    margin: auto;    text-align: center;    border-bottom: double orange; } Demo Text This is demo text. OutputThis gives the following output −Example Live Demo ... Read More

General Sibling Selectors in CSS

AmitDiwan
Updated on 02-Nov-2023 11:50:15

1K+ Views

The CSS general sibling selector is used to select all elements that follow the first element such that both are children of the same parent. Syntax The syntax for CSS general sibling selector is as follows element ~ element { /*declarations*/ } The following examples illustrate CSS general sibling selector − Example 1 In this example, we have tags. We also have a tag between two tags − We provide learning tutorials, quizzes and video tutorials. Tutorials on databases and programming ... Read More

Setting Font Size with Keywords Using CSS

AmitDiwan
Updated on 09-Jan-2020 11:03:01

194 Views

The CSS font-size property can be set with absolute and relative keywords. This scales the text as desired.SyntaxThe syntax of CSS font-size property is as follows −Selector {    font-size: /*value*/ }The following table lists the standard keywords used in CSS −Sr.NoValue & Description1mediumSets the font-size to a medium size. This is default2xx-smallSets the font-size to an xx-small size3x-smallSets the font-size to an extra small size4smallSets the font-size to a small size5largeSets the font-size to a large size6x-largeSets the font-size to an extra-large size7xx-largeSets the font-size to an xx-large size8smallerSets the font-size to a smaller size than the parent element9largerSets ... Read More

The border-color Property in CSS

AmitDiwan
Updated on 28-Dec-2023 18:16:24

124 Views

The CSS border-color property is used to specify a border color for elements. We can also set color for individual sides using the − border-top-color border-right-color border-left-color border-right-color Syntax The syntax of CSS border-color property is as follows − Selector { border-color: /*value*/ } Above, the value can be any color. The following examples illustrate CSS border-color property − Set border color The border color for the border is set using the border-color property. Let us see the example − ... Read More

The border-style Property in CSS

AmitDiwan
Updated on 28-Dec-2023 18:17:18

113 Views

The CSS border-style property is used to specify the border style for an element. We can also define border-style for individual sides using the − border-top-style border-right-style, border-left-style border-bottom-style Syntax The syntax of CSS border property is as follows − Selector { border-style: /*value*/ } The value can be any of the following − dotted − Set a dotted border dashed − Set a dashed border solid − Set a solid border double − Set a double border groove − Set a 3D grooved border ridge − Set a 3D ... Read More

Styling Tables Working with CSS

AmitDiwan
Updated on 09-Jul-2020 09:25:55

181 Views

We can define styles for tables using CSS. The following properties are used to style and its elements −borderThe CSS border property is used to define border-width, border-style and border-color.border-collapseThis property is used to specify whether a elements should have a shared or separate border.captionThe caption-side property is used to vertically position the table caption box.empty-cellsThis property is used to specify the display of empty cells of a table.table-layout To define the algorithm to be used by the browser for laying out rows, columns and cells of a table.ExampleThe following examples illustrate styling of tables − Live Demo ... Read More

Essential CSS Properties for Styling Tables

AmitDiwan
Updated on 02-Nov-2023 11:07:35

70 Views

We can define styles for tables using CSS. The following properties are often used to style and its elements − border − The CSS border property is used to define border-width, border-style and border-color. border-collapse − This property is used to specify whether a elements should have a shared or separate border. caption − The caption-side property is used to vertically position the table caption box. empty-cells − This property is used to specify the display of empty cells of a table. table-layout −To define the algorithm to be used by the browser for laying out rows, ... Read More

Formatting Unordered and Ordered Lists in CSS

AmitDiwan
Updated on 02-Nov-2023 11:47:54

157 Views

The style and position of unordered and ordered lists can be formatted by CSS properties with list-style-type, list-style-image and list-style-position. Syntax The syntax of CSS list-style property is as follows − Selector { list-style: /*value*/ } Style Ordered List With Upper Roman Marker The following example illustrate the CSS list-style property and styles the ordered list. We have set the upper roman values for the ordered list − list-style: upper-roman; Example Let us see an example − ol ... Read More

Advertisements