CSS – brown-salmon-372873.hostingersite.com

Advanced Selectors

CSS Attribute Selectors CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both. Attribute selectors are enclosed in square brackets []. CSS has the following attribute selectors: [attribute] – Select elements with the specified attribute [attribute=”value”] – Select elements with a specific attribute and an exact value [attribute~=”value”] – […]

Overflow & Scroll

CSS overflow Property Definition and Usage The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. Example

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
}

div.ex2 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: hidden;
}

div.ex3 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

div.ex4 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: clip;
}

div.ex5 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: visible;
}
</style>
</head>
<body>

<h1>The overflow Property</h1>

<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>

<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: clip:</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible (default):</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

background-color: lightblue;

width: 110px;

height: 110px;

overflow: scroll;

}

div.ex2 {

background-color: lightblue;

width: 110px;

height: 110px;

overflow: hidden;

}

div.ex3 {

background-color: lightblue;

width: 110px;

height: 110px;

overflow: auto;

}

div.ex4 {

background-color: lightblue;

width: 110px;

height: 110px;

overflow: clip;

}

div.ex5 {

background-color: lightblue;

width: 110px;

height: 110px;

overflow: visible;

}

</style>

</head>

<body>

<h1>The overflow Property</h1>

<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>

<h2>overflow: scroll:</h2>

<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden:</h2>

<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto:</h2>

<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: clip:</h2>

<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible (default):</h2>

<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>

</html>

Result Property Values Value Description Demo visible The overflow is not clipped. It renders […]

CSS Variables

CSS Variables The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it […]

Units Deep Dive

CSS Units CSS has several different units for expressing a length. Many CSS properties take “length” values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-size: 60px;

}

p {

font-size: 25px;

line-height: 50px;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Result Absolute Lengths The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. […]

Animations

CSS Animations CSS allows animation of HTML elements without using JavaScript! What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must specify some keyframes for the animation. Keyframes […]

Transform

CSS translate Property Change position of an element: Definition and Usage The translate property allows you to change the position of elements. The translate property defines x- and y-coordinates of an element in 2D. You can also define the z-coordinate to change position in 3D. Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y- and z-coordinates. To […]

Transitions

CSS transition-property Property Definition and Usage The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element. Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no […]

Responsive Design

Responsive Web Design Introduction to Responsive Web Design Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports. Best Experience For All Users Web pages can be viewed with many different devices: desktops, tablets, and mobile phones. Your […]

Forms Styling

CSS Forms CSS Styling Forms CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS: First Name Last Name Country AustraliaCanadaUSA Example:

<!DOCTYPE html>
<html>
<style>
form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

label {display: block;}

input[type=text], select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
</style>
<body>

<h2>Style an HTML Form with CSS</h2>

<form action="/action_page.php">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name..">

  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lastname" placeholder="Your last name..">

  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
  </select>
  
  <input type="submit" value="Submit">
</form>

</body>
</html>

<!DOCTYPE html>

<html>

<style>

form {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

label {display: block;}

input[type=text], select {

width: 100%;

padding: 12px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

input[type=submit] {

width: 100%;

background-color: #4CAF50;

color: white;

padding: 14px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

</style>

<body>

<h2>Style an HTML Form with CSS</h2>

<label for="fname">First Name</label>

<label for="country">Country</label>

<option value="australia">Australia</option>

<option value="canada">Canada</option>

</select>

</form>

</body>

</html>

Result: Styling Form Input Fields With CSS, you can style most of the different input types, like text fields, password fields, checkboxes, radio buttons, and file inputs. […]

Lists & Tables Styling

CSS Lists CSS Styling Lists In HTML, there are two main types of lists: <ul> – unordered lists (list items are marked with bullets) <ol> – ordered lists (list items are marked with numbers or letters) CSS has the following properties for styling HTML lists: list-style-type – Specifies the type of list-item marker list-style-image – Specifies an image […]

Category: CSS