Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 67 of 130
Setting Font Size with Keywords Using CSS
The CSS font-size property can be set with absolute and relative keywords to scale text as desired. These predefined keywords provide consistent font sizing across different browsers and devices. Syntax selector { font-size: keyword; } Font Size Keywords The following table lists the standard keywords used with the font-size property − Keyword Description medium Sets the font-size to a medium size (default value) xx-small Sets the font-size to an xx-small size x-small Sets the font-size to an extra ...
Read MoreFormatting Unordered and Ordered Lists in CSS
The style and position of unordered and ordered lists can be formatted using CSS properties like list-style-type, list-style-image, and list-style-position. The list-style shorthand property allows you to set all these values in one declaration. Syntax selector { list-style: list-style-type list-style-position list-style-image; } Possible Values PropertyValuesDescription list-style-typedisc, circle, square, decimal, upper-roman, lower-roman, noneSets the marker type list-style-positioninside, outsideSets marker position relative to content list-style-imageurl(), noneUses custom image as marker Style Ordered List With Upper Roman Marker The following example styles an ordered list with upper roman numerals ...
Read MoreOutlines Vs Borders in CSS
Outline doesn't take up space and is displayed around the border if set. It is used for highlighting elements and we can't specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline. Borders can be customized to a greater extent. We can style individual sides of a border and round their edges. Borders take up space and affect the box-sizing. Syntax /* Outline Syntax */ outline: outline-width outline-style outline-color; /* Border Syntax */ border: ...
Read MoreStandard Link Styles in CSS
We can style links as per our requirements. It is recommended that links have styles which distinguish them from normal text. The default link styles for different link states is as follows − Link State Color active #EE0000 focus #5E9ED6 or a similar shade of blue outline in case of Windows and Mac, #F07746 outline for Linux while text color remains the same hover #0000EE link #0000EE visited #551A8B Note − The above colors may change with newer versions of browsers. For proper functionality, ...
Read MoreText Transformation Working with CSS
The CSS text-transform property allows us to control the capitalization and casing of text content. It can transform text to uppercase, lowercase, capitalize words, or leave it unchanged. Syntax selector { text-transform: value; } Possible Values ValueDescription uppercaseTransforms all text to uppercase letters lowercaseTransforms all text to lowercase letters capitalizeCapitalizes the first letter of each word noneNo transformation (default value) Example 1: Basic Text Transformations The following example demonstrates uppercase, lowercase, and capitalize transformations − h2 ...
Read MoreSet Text Alignment Working with CSS
The CSS text-align property is used to horizontally align text content within an element. It controls the alignment of text and inline elements inside block-level containers. Syntax selector { text-align: value; } Possible Values ValueDescription leftAligns text to the left (default for most languages) rightAligns text to the right centerCenters the text justifyStretches text to align both left and right edges Example 1: Basic Text Alignment The following example demonstrates different text alignment options − .container ...
Read MoreStyling Links Working with CSS
CSS allows us to style links as desired. We can format text by adding colors, backgrounds, changing sizes, and even adding animations to create pleasant visual effects. Links can be styled using various pseudo-classes to define their appearance in different states. Syntax a { property: value; } a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:active { /* selected link */ } Pseudo-Class Order For proper functionality, the order of pseudo selectors must be: :link, ...
Read MoreAdjacent Sibling Selectors in CSS
The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It selects only those elements which immediately follow the first selector. The + sign is used as a separator between the two selectors. div p span Element 1 Adjacent Sibling Element 3 + ...
Read MoreUsing the combination of Percentage and Em in CSS
We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers. Both percentage and em are relative measurements that scale based on their parent elements, making them ideal for responsive design. Syntax selector { font-size: value; } Where value can be a percentage (e.g., 80%, 120%) or em unit (e.g., 1.2em, 2em). Percentages are relative to the parent element's font size, while em units are also relative to the parent's font size. ...
Read MoreIncluding CSS in HTML Documents
Adding CSS to an HTML document enhances the appearance of the web page. Various styles for images, borders, margins, and colors can be easily added. To include CSS in HTML documents, we can either include them internally, inline, or link an external file. Syntax /* Inline CSS */ /* Internal CSS */ selector { property: value; } /* External CSS */ Method 1: Inline CSS With inline CSS, use the style attribute ...
Read More