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 […]
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 […]
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 […]
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 […]
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, […]
CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document. Automatic Numbering With CountersCSS counters are like “variables”. The variable values can be incremented by CSS rules […]
Create a hoverable dropdown with CSS. Basic DropdownCreate a dropdown box that appears when the user moves the mouse over an element. Example <style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; […]
