Introduction to CSS

Cascading Style Sheets, fondly referred to as CSS, is a style sheet language used to define visual appearance and formatting of HTML documents. WordPress themes use CSS and HTML to output the data generated by WordPress. Every WordPress theme contains a style.css file that has style rules to define the formatting of pages generated by WordPress.

Before CSS was released, there was only HTML and JavaScript. Developers would have to sit and style each individual element, which happens to be not only tedious but also a cumbersome process. Today, with the help of CSS, enterprise-level websites can be stylized in a matter of hours. This is due to the cascading nature of CSS.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

Advantages of CSS

CSS saves time

You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

Pages load faster

If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

Easy maintenance

To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

Superior styles to HTML

CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

Multiple Device Compatibility

Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

Global web standards

Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

CSS Cascade

A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet.

The major ways CSS cascade

Elements – The same CSS style can be applied to multiple elements to achieve the same style.
Multiple Style One Element – Multiple styles can be applied to a particular HTML element to achieve a unique style.
Same style, Multiple Pages – The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.

Selectors

The selectors are the piece of content that we want to target and style. It is either an HTML element or a Class Name.Basic selectors

Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax:

* ns|* *|*

Type selector: Selects all elements that have the given node name.

Syntax:

elementname

Class selector: Selects all elements that have the given class attribute.

Syntax:

.classname

ID selector: Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

Syntax:

#idname

Attribute selector: Selects all elements that have the given attribute.

Syntax:

[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

Grouping selectors

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.For eg:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    
    <style>
h1{
    color:green;
}
h3{font-style: italic; font-family: fantasy;}
ul{background-color: cornflowerblue; width: 20%; padding: 1% 2%; border-radius: 50px;}
h2{text-decoration: line-through red;}
p{font-style: italic;}
</style>

</head>

<body >
<h1>____'s blog</h1>
<h3>Contents</h3>
<ul>
<li>First post!</li>
</ul>

<h2>First Post</h2>
<p>Posted on some date in some year</p>
</body>
</html>

Output :

Some of the important CSS properties

Display

The display property specifies the display behavior (the type of rendering box) of an element.

block
inline
inline-block
none

Height and width

The height and width properties are used to set the height and width of an element.The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Px
Em
Rem
%
auto

Margin and padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is a space outside something, whereas padding is the space inside something.

Border

The CSS border properties allow you to specify the style, width, and color of an element’s border.
border-width
border-style
border-color

Floats

Float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around