CSS Basics

Photo by Greg Rakozy on Unsplash

CSS Basics

CSS or Cascading Style Sheets, is the markup language that we use to describe how elements on websites should look. CSS is all about style. All CSS begins with what is known as a rule set. A rule set is made up of two parts, a selector, which is the code that selects the html elements that you want to style, and a declaration block, which is the code that describes the styles you want to apply to said a HTML. Declarations are lines of code written inside the curly braces.

div{
text-align:center;
}

Style is one of the pieces of information that goes inside the head. Anything that goes inside these styles tags is CSS.Properties are always written in plain English.

Comments A comment is a human-readable message inside code. Comments are usually surrounded by or preceded by special characters that instruct computers to completely ignore whatever text is inside the comment. Comments are great because they allow you, the developer, to leave clarifying messages and instructions for other developers (as well as your future self!). Every programming language gives you the ability to write comments.

p {
    color: blue;
}        
/* add CSS here */
h1 {
    color: red;
}

Attributes Attributes help us to describe the content of the page inside the html markup.Id should be used sparingly. As an html element can have only one ID and IDs can only be used once per page. Classes can be added to multiple HTML elements And html elements can have multiple classes. These are also called CSS selectors. In CSS we use px and %. Absolute units- Fixed units of measurement. Ex- px Relative units refer to units that are a comparison to another linked property. Ex- %, em, vw, vh

Stylesheets A stylesheet is a file containing the code that describes how elements on your webpage should be displayed. How to Link to a Stylesheet Before your webpage can use the stylesheet, you need to link to it. To do this, you'll need to create a to your stylesheet in your HTML. To create a link, simply type the following inside the of your HTML.

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

The href attribute specifies the path to the linked resource (you can link to other resources besides stylesheets, more on this later) and the rel attribute names the relationship between the resource and your document. In this case, the relationship is a stylesheet.

<head>
  <title>My Webpage</title>
  <!-- ... -->
  <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
  <!-- ... -->
</head>