CSS - tutorial

CSS Introduction¶

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a document written in markup languages like HTML and XML.

CSS provides a way to separate the presentation of a web page from its content, allowing for more flexibility and control over the appearance of the content. With CSS, you can specify the layout, fonts, colors, and other visual aspects of a web page.

CSS works by defining rules that are applied to specific HTML elements. These rules can be written directly into an HTML document using the style tag, or they can be saved in a separate file and linked to the HTML document using the link tag.

CSS Syntax¶

The syntax of CSS is based on a set of rules that are used to define the styling of HTML elements. Here is an overview of the basic syntax of CSS:

Selectors: CSS selectors are used to target specific HTML elements that you want to style. Selectors can be based on element names, class names, ID names, or other attributes of the HTML elements. For example, the following selector targets all p elements on a page:

p {
    /* CSS rules here */
}

And this selector targets all elements with a class of "my-class":

.my-class {
    /* CSS rules here */
}

Declarations: CSS declarations define the styling rules for the selected HTML elements. Declarations consist of a property and a value, separated by a colon. Multiple declarations can be separated by semicolons. For example, the following declaration sets the font-size property of a p element to 16 pixels:

p {
    font-size: 16px;
}

Comments: CSS comments are used to add notes to the code that explain what it does. Comments are not interpreted by the browser, and they do not affect the styling of the page. CSS comments can be added using the /* and */ symbols:

/* This is a CSS comment */

Grouping: CSS selectors can be grouped together to apply the same styling to multiple elements at once. Selectors are separated by commas within a rule. For example, the following rule sets the font-size and color properties for both h1 and h2 elements:

h1, h2 {
    font-size: 24px;
    color: blue;
}

Overall, the syntax of CSS is relatively straightforward and easy to learn, but mastering it takes time and practice.

CSS Selectors¶

CSS Selectors are a fundamental part of CSS (Cascading Style Sheets) which are used to target specific HTML elements and apply styles to them. CSS Selectors provide a way to define styles based on the element type, class, ID, attributes and their relationships with other elements on a page.

Here are some common CSS Selectors with examples:

Element Selector: This selector targets all the elements of a particular type.

p {
  color: blue;
}

Class Selector: This selector targets all elements that have a specific class name.

.myClass {
  font-size: 20px;
  color: red;
}

ID Selector: This selector targets a specific element with a unique ID.

#myId {
  border: 1px solid black;
}

Descendant Selector: This selector targets all the elements that are descendants of a specified element.

ul li {
  margin: 5px;
}

Child Selector: This selector targets all direct child elements of a specified element.

ul > li {
  margin: 5px;
}

Attribute Selector: This selector targets elements based on their attributes.

input[type="text"] {
  width: 100%;
}

Pseudo-Class Selector: This selector targets elements in a particular state or condition.

a:hover {
  color: red;
}

These are just some examples of CSS Selectors, and there are many more available. By using a combination of CSS Selectors, you can apply styles to specific elements on a web page, making it more visually appealing and easier to read.

Three Ways to Insert CSS¶

External Style Sheet:

An external style sheet is a separate file that contains CSS code and is linked to an HTML document using the tag. Here's an example:

<head>   
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head>

In this example, the CSS code is stored in a file called styles.css, which is located in the same directory as the HTML file. The rel attribute specifies the relationship between the HTML document and the external style sheet, and the type attribute specifies the type of document being linked. The href attribute specifies the location of the external style sheet file.

Internal Style Sheet:

An internal style sheet is defined in the head section of an HTML document using the style tag. Here's an example:

<head>   
<style>     
body {       
background-color: #F5F5F5;     
}     
h1 {       
color: #000;       
font-size: 36px;     
}   
</style> 
</head>

In this example, the CSS code is defined within the style tag. The styles apply to the entire HTML document (the body tag) and to all h1 elements. This method is useful when you want to apply styles to a single page, but don't want to create a separate external style sheet.

Inline Style:

Inline styles are defined directly within an HTML element using the style attribute. Here's an example:

<h1 style="color: #000; font-size: 36px;">Hello, World!</h1>

In this example, the styles are defined within the style attribute of the h1 element. This method is useful when you want to apply styles to a single element, but don't want to create a separate external style sheet or define an internal style sheet. However, it can make your HTML code more cluttered and difficult to read if you have a lot of inline styles.

CSS Comments¶

CSS comments are a way to add notes or reminders to your CSS code without affecting the styles applied to your HTML document. Comments are ignored by web browsers and are used by developers to explain their code, make notes, or temporarily disable styles. Here are a few examples of CSS comments:

Single-Line Comments: Single-line comments begin with / and end with /. They are used to add a comment on a single line. Here's an example:

/* This is a single-line comment */

In this example, the comment explains the code on the same line. The comment is ignored by the web browser and is only visible in the CSS code.

Multi-Line Comments: Multi-line comments are used to add comments that span multiple lines. They begin with / and end with /. Here's an example:

/*
This is a multi-line comment.
It can span multiple lines.
*/

In this example, the comment spans multiple lines and is used to provide more detailed explanations or to temporarily disable styles.

Commenting Out Code: You can also use comments to temporarily disable a section of your CSS code. This is useful when you want to test different styles or make changes without deleting the original code. Here's an example:

/*
body {
  background-color: #F5F5F5;
}
*/

h1 {
  color: #000;
  font-size: 36px;
}

In this example, the code for the body element is commented out, so it won't be applied to the HTML document. This allows you to test different background colors without deleting the original code. When you're ready to use the original code again, simply remove the comment symbols.

CSS Colors¶

CSS Backgrounds¶

CSS Borders¶

CSS Margins¶

CSS Padding¶

CSS Height/Width¶

CSS Box Model¶

CSS Outline¶

CSS Text¶

CSS Fonts¶

CSS Icons¶

CSS Links¶

CSS Lists¶

CSS Tables¶

CSS Display¶

CSS Max-width¶

CSS Position¶

CSS Z-index¶

CSS Overflow¶

CSS Float¶

CSS Inline-block¶

CSS Align¶

CSS Combinators¶

CSS Pseudo-class¶

CSS Pseudo-element¶

CSS Opacity¶

CSS Dropdowns¶

CSS Image Gallery¶

CSS Image Sprites¶

CSS Attr Selectors¶

CSS Forms¶

CSS Counters¶

CSS Website Layout¶

CSS Units¶

CSS Specificity¶

CSS !important¶

CSS Math Functions¶

CSS Advanced CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Color Keywords CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Media Queries CSS MQ Examples CSS Flexbox

CSS Responsive RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid Grid Intro Grid Container Grid Item

CSS SASS SASS Tutorial

CSS References CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support