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 { […]
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS3: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) Descendant SelectorThe descendant selector matches all elements that are descendants of a specified element. The […]
Colors in CSS are most often specified by: a valid color name – like “red” an RGB value – like “rgb(255, 0, 0)” a HEX value – like “#ff0000” Color Names Colors set by using color names: Example Try it Note: Color names are not case-sensitive: “Red” is the same as “red” or “RED”. HTML […]
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: External Style Sheet With an external style sheet, you can change the look of an entire website by changing just […]
CSS Syntax A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with […]
A pseudo-class is used to define a special state of an element. SyntaxThe syntax of pseudo-classes: selector:pseudo-class { property:value;} Anchor Pseudo-classesLinks can be displayed in different ways: Example /* unvisited link */a:link { color: #FF0000;}/* visited link */a:visited { color: #00FF00;}/* mouse over link */a:hover { color: #FF00FF;}/* selected link */a:active […]
A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements: selector::pseudo-element { property:value;} Notice the double colon notation – ::first-line versus […]
The opacity property specifies the opacity/transparency of an element. Transparent ImageThe opacity property can take a value from 0.0 – 1.0. The lower value, the more transparent: Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent. Example img { […]
Navigation BarsHaving easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of LinksA navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically […]
CSS can be used to create an image gallery. Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Image GalleryThe following image gallery is created with CSS: Example <html><head><style>div.gallery { margin: 5px; border: 1px […]
Image SpritesAn image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites – Simple ExampleInstead of using three separate images, […]
Create tooltips with CSS. Demo: Tooltip ExamplesA tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: Basic TooltipCreate a tooltip that appears when the user moves the mouse over an element: Example <style>/* Tooltip container */.tooltip { position: relative; display: inline-block; […]
Style HTML Elements With Specific Attributes It is possible to style HTML elements that have specific attributes or attribute values. CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. The following example selects all <a> elements with a target attribute: Example a[target] { background-color: yellow;} Try it » […]
The look of an HTML form can be greatly improved with CSS: Styling Input Fields Use the width property to determine the width of the input field: First Name Example input { width: 100%;} Try it » The example above applies to all <input> elements. If you only want to style a specific input type, […]
