The CSS font properties define the font family, boldness, size, and the style of a text. Difference Between Serif and Sans-serif Fonts CSS Font FamiliesIn CSS, there are two types of font family names: generic family – a group of font families with a similar look (like “Serif” or “Monospace”) font family – a specific […]
Text ColorThe color property is used to set the color of the text. With CSS, a color is most often specified by: a color name – like “red” a HEX value – like “#ff0000” an RGB value – like “rgb(255,0,0)” Look at CSS Color Values for a complete list of possible color values. The default […]
The CSS outline properties specify the style, color, and width of an outline. An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”. However, the outline property is different from the border property – The outline is NOT a part of an element’s dimensions; the element’s […]
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Explanation of […]
Setting height and widthThe height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of […]
CSS PaddingThe CSS padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of an element. With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left). Padding […]
CSS MarginsThe CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left). Margin – […]
The CSS border properties allow you to specify the style, width, and color of an element’s border. Border StyleThe border-style property specifies what kind of border to display. The following values are allowed: dotted – Defines a dotted border dashed – Defines a dashed border solid – Defines a solid border double – Defines a […]
The background-color property specifies the background color of an element. The background color of a page is set like this: Example body { background-color: lightblue;} Try it Yourself » With CSS, a color is most often specified by: a valid color name – like “red” a HEX value – like “#ff0000” an RGB value […]
How To Add IconsThe simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized […]
With CSS, links can be styled in different ways. Styling LinksLinks can be styled with any CSS property (e.g. color, font-family, background, etc.). Example a { color: hotpink;} Try it Yourself » In addition, links can be styled differently depending on what state they are in. The four links states are: a:link – a […]
HTML Lists and CSS List PropertiesIn HTML, there are two main types of lists: unordered lists (<ul>) – the list items are marked with bullets ordered lists (<ol>) – the list items are marked with numbers or letters The CSS list properties allow you to: Set different list item markers for ordered lists Set different […]
The look of an HTML table can be greatly improved with CSS: Table BordersTo specify table borders in CSS, use the border property. The example below specifies a black border for <table>, <th>, and <td> elements: Example table, th, td { border: 1px solid black;} Try it Yourself » Notice that the table in the […]
The display property is the most important CSS property for controlling layout. The display PropertyThe display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Block-level ElementsA block-level element always […]
Using width, max-width and margin: auto;As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can […]
The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute). The position PropertyThe position property specifies the type of positioning method used for an element. There are four different position values: static relative fixed absolute Elements are then positioned using the top, bottom, left, and right properties. […]
CSS OverflowThe CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area. The overflow property has the following values: visible – Default. The overflow is not clipped. It renders outside the element’s box hidden – The overflow is […]
The float property specifies whether or not an element should float. The clear property is used to control the behavior of floating elements. The float PropertyIn its simplest use, the float property can be used to wrap text around images. The following example specifies that an image should float to the right in a text: […]
It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property. However, the inline-block value of the display property makes this even easier. inline-block elements are like inline elements but they can have a […]
Center Align ElementsTo horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: Example .center { […]
