Category: 2. CSS

CSS Display Property The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline. Changing the Default Display Value Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element…

CSS Visual Formatting Model The CSS visual formatting model is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is depends on the following factors: Note: The document…

Styling Tables with CSS Tables are typically used to display tabular data, such as financial reports. But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables. CSS provides several properties that allow you to control the layout and presentation…

Types of HTML Lists There are three different types of list in HTML: See the tutorial on HTML lists to learn more about the lists and how to create them. Styling Lists with CSS CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow…

Styling Links with CSS Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the site. Therefore styling the links properly is an important aspect of building a user-friendly website. See the tutorial on HTML links to learn more about links and how to create them. A link has four different…

Formatting Text with CSS CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively. The commonly used text properties are: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties give you precise control over the visual appearance of the characters, words, spaces, and so on. Let’s see how to…

Styling Fonts with CSS Choosing the right font and style is very crucial for the readability of text on a page. CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on. The font properties are: font-family, font-style, font-weight, font-size, and font-variant. Let’s discuss each of…

Setting Background Properties Background plays an important role in the visual presentation of a web page. CSS provide several properties for styling the background of an element, including coloring the background, placing images in the background and managing their positioning, etc. The background properties are background-color, background-image, background-repeat, background-attachment and background-position. In the following section we will discuss each of these…

Setting Color Property The color property defines the text color (foreground color in general) of an element. For instance, the color property specified in the body selector defines the default text color for the whole page. Let’s try out the following example to see how it works: Example Note: The color property normally inherits the color value from their parent element, except the case…

Understanding CSS Syntax A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then applied to the corresponding elements such as paragraphs, headings, etc. in the document. A CSS rule have two main parts, a selector and one or more declarations: The selector specifies which element or elements…