CSS Tools

With high quality css tools, you can create the css codes required for your webpage. By previewing the settings you've made, you can make your work more efficient. Here are some of our popular css generators.

Border Radius Generator Text Shadow Generator Box Shadow Generator Reset CSS Minify CSS Gradient Generator


Latest Posts

Pseudo-classes and Pseudo-elements

Though you’ve probably used pseudo-classes and pseudo-elements in your code, you may not have thought about what they are or the difference between them.

Pseudo-classes let us style objects based on information distinct from the document tree, or that’s unable to be expressed using simple selectors. For example, an element can only have a hover or focus state once the user interacts with it. With the :hover and :focus pseudo-classes, we can define styles for those states. Otherwise, we’d have to rely on scripting to add and remove class names.

Pseudo-elements, on the other hand, let us style elements that aren’t directly present in the document tree. There’s no firstletter element in HTML, so we need another way to select it. The ::first-letter pseudo-element gives us that capability.

Pseudo-elements

The CSS Pseudo-elements Module Level 4 specification 6clarifies behavior for ex- isting pseudo-elements and defines several new ones. Only a few, however, have any degree of support in current browsers. Those are the ones we’ll focus on here:

::before inserts additional generated content before the content of an element
::after inserts additional generated content after the content of an element
::first–letter selects the first letter of an element
::first–line selects the first line of an element
::selection styles text selected by the cursor

Of these, ::first–letter, ::first–line, and ::selection affect content that’s part of the document source. The ::before and ::after pseudo-elements, on the other hand, inject content into a document without it existing in the document source.

 

CSS padding property syntax and examples

The CSS padding feature is a feature of CSS1 that is used to set the margins of the content of HTML elements.

The padding values of the elements are zero by default. For example, if the padding attribute of a paragraph element is not assigned a value, it may appear adjacent to other visual content since the inside margins are zero. The padding-top, padding-right, padding-bottom and padding-left properties can also be used to avoid this situation.

The CSS padding feature can be applied to all html elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

CSS margin property syntax and examples

CSS margin property the values of the outer edge of an element. The margin-top, margin-right, margin-bottom, and margin-left properties are used to set the margins separately.

 

css margin property

 

The margin property can be applied to all elements except the elements of the table type.

Responsive Social Footer With Counts

Hello, this post explains in detail how to make responsive social footer, which can often be used in the footer section of web pages.

responsive social footer

We will use the box-sizing feature of CSS and the calc() function for this. If we mention these features briefly;

Under normal conditions, padding and border values are added in addition to the box width and height values. In other words, border and padding values will be added in addition to the width of a box that you define your width as 200px.

CSS Definition, Syntax and Usage – What is CSS

CSS (Cascading Style Sheets) is a web technology used to format HTML elements. The syntax of this coding technique, which is very simple to use, consists of a selector and the brackets {} that define the properties of this selector. The syntax is shown as an example below.

body {
color:red;
margin:0;
padding:0;
}

Cascading Style Sheets is a markup language. The distinguishing feature of it from other programming languages is that it is not a standalone function.

CSS Inheritance, inherit, initial and unset values

CSS Inheritance is one of the basic features of CSS. With this basic feature, the style applied to an element is also passed to its sub-elements. The main purpose of inheritance is undoubtedly to save developers from repetition of code. As a matter of fact, it would be very difficult to code font family, color, font size separately for each element.