An overview of CSS
Hi, I'm an undergraduate student majoring in computer science and engineering. I'm learning full stack development right now and trying to share my learnings here. I'm enthusiastic about exploring new technologies. Apart from that, I am a sports enthusiast and enjoy watching test cricket.
What is CSS and Why do we use it?
Cascading Style Sheets (CSS), if explained in simple words, is a language used to design web pages. We use HTML elements along with JavaScript to give the page functionality, it does not focus on giving the user a good experience while using the website. Imagine using any of your favourite apps without colours and styling, just black and white pages, having improper borders and margins, and inappropriate spacing between buttons, you would probably quit using that app. When we use only HTML with JavaScript, that's how the website looks. To make the website visually appealing, which is essential as we want people to use our website, it's important for us to understand CSS. People get attracted by good animations and using symmetric patterns in displaying content gives the user more clarity too. We are going to take an overview of the most common topics of CSS, as it is a huge topic which we cannot cover in one blog. Remember, do not just try to memorize all the stuff in CSS, first read about the basics, then immediately start bringing it into practice. Seeing a ton of videos or reading thick books won't make you good at it unless you apply it frequently. Practice is the key here. That's the way to learn not just CSS but any other language, or for that matter any other skill in life.
How are HTML and CSS connected...
We read about a couple of HTML elements in the previous blog, you can read it here. There we read about the <script> tag, which is used to link the JavaScript code to the HTML page. Similarly to link the style sheet externally, we write the CSS code in a different file and save it by naming it and adding .css at the end. A CSS file alone has no value, the purpose of CSS is to beautify the webpage, so without HTML we cannot use CSS. To link the file externally, we commonly use the HTML element <link/> and it is to be used inside the <head> element. The syntax is, <link rel="stylesheet" href="/styles.css" />. The link tag is a self-closing or empty tag, which means that it does not need a closing tag like </body> or other elements because they do not have their own content. Here too, like the <script> tag, we have the <style> tag which can be used to style the HTML page internally without creating a separate styles.css file. It needs to be used in the <head> tag. Again it is a good practice to make a separate file rather than styling it in the HTML file itself, as it helps maintain all the styling parts in one place easy to modify later as needed.
CSS rules, selectors, properties, and values
CSS rules are the ones that contain the CSS selectors and properties, and the values which are given or assigned to those properties.
CSS properties: There are a bunch of pre-defined properties in CSS like the color(text color), background-color, width, height, etc. They are used to identify which feature we want to apply to certain content. They are to be put in curly braces { }. Note that we can put multiple properties in any such { }.
CSS values: This is the data that needs to be given to a CSS property by us. For example, we say width: 50rem; (rem is a unit, more about it below) which means we assign the content to be of 50rem width only not more not less. Another example, color: red; which means we want the text color to be red.
CSS selectors: In simple words, these are used to select the HTML elements to which we want the CSS properties along with their values to be applied. There are 2 common ways of selecting HTML elements, either we can directly name the HTML tag and all properties inside the { } will be applied to that entire tag, or we can select them using the identifiers, class (.) and id(#). We saw the differences between them in the previous HTML blog. The syntax for both is mentioned below.
// directly using the tag name
body {
margin: 0; // margin is a property and 0 is the value given to it
}
// using a class, notice the dot used at the start
.section-type1 {
background-color: blue;
}
// using a id, notice the hashtag at the start
#header {
text-align: center;
}
// we can even select certain tags inside body tag
body p {
color: blue;
}
// or we can do it with class too
.section-type1 .input-headings {
color: white;
}
Commonly used properties and units in CSS
There are many properties in CSS and mentioning all of them is not possible and would bore the readers. I'm not aware of all the properties, but as I said earlier, that's the way I think we should learn CSS, we should have a basic idea of what we can do, and the rest is supposed to be learned on the way (googling the property names, syntax, etc) as and when we feel the need for more features. Here are a few common properties used in CSS:
- Color: This property is used to give the text a certain color. The syntax is
color: black;or we can use hexadecimal codes, for example, the code for black is #000000, so we can also usecolor: #000000;. For more colors and color codes check this website. - Background-color: Same logic as color, but as the name suggests, this gives the background some color. Syntax,
background-color: red; - Display: This is a very useful property, we saw in the HTML blog, there are block and inline-level elements, but most of the time we need few inline ones to act as a block one (eg. a button tag) or vice versa. For that purpose we use this property, we can display a block element as inline by writing
display: inline;and the vice versa can be done asdisplay: block; - Text-align: To align the text to the center, we use
text-align: center;and to align it to the start or end or left or right, just use these words in place of the center. - Width: To decide the width of a text block or any element we use the width property. We can use the units mentioned below, for example,
width: 50rem;. If we design text width based on the size of a computer display, then the text will not be displayed on a mobile screen properly, half of it will be out of the main screen and users will have to scroll left-right to see it which makes it very inconvenient. To avoid this, we usemax-width: 80%;, which puts a limit that the maximum width the text can occupy should be 80% of the display screen. Using % solves the issue as whatever the screen size be it'll adjust accordingly. - Height: It is used to give the content, or images a certain height as per need. Here too like width we have the max-height property.
- Font: It can be used to give font size, select font family, font style. But generally, we use the specific sub-properties, like
font-size: 10rem;,font-weight: 200;,font-style: italic;andfont-family: "Montserrat", sans-serif;as it is more convenient. - Text-decoration: Sometimes we want a certain text to be highlighted, for that we can either underline them or color them, to underline we use
text-decoration: underline;and if we want some links to not have underlined to color, we can usetext-decoration: none;
Properties padding, border, and margin are covered below in the CSS box model.
Following are the some commonly used units:
Relative units: It is a good practice to use these units as they can adjust their dimensions appropriately even if a user changes his device's font size. They are also called scalable units, as they are relative to font size, if the user sets the font size to x, and the em value = 3em, then it means the text will get size 3x (3 times of user font size).
- REM and EM: Both these are the most commonly used units in CSS. REM is called root EM. Both can be used, but rem is preferred more so over em, as in some cases em unit faces some issues and in some rem shows issues, it is a very debatable topic as to which one is better.
- vw and vh: The V in both stands for the viewport, which means the visible part on the screen. W and H stand for width and height respectively. 1vw is width equal to 1/100th of the viewport width and 1vh is height equal to 1/100th of the viewport height. If we use
width: 100vw;it means that the content will occupy all of the width available on the display screen, whether it is a laptop or a mobile phone. - %: It is a very useful unit in quantities like max-width, where we do not know what will be the display size of the user's device(we saw max-width above). It will occupy only that percent of screen size as that we enter, for example,
width: 80%;means in all devices, the width of the content will be 80% of the display size.
Absolute units: These don't change their size as per the screen
- px: px stands for pixels, which is a very small unit usually used for very thin lengths, like borders of small input or output boxes.
- in, cm, mm: in, cm, mm stand for inch, centimeter, millimeter respectively. They are not used very commonly as they are not relative units like em or rem, so if we say
width: 3in;then regardless of the display size, the width will remain 3 inches.
CSS: Box Model
Image source: Wikipedia
The CSS box model represents each HTML element as a block. Be it a block-level or inline-level element, every element can be represented as a box, with the following 4 properties.
- Content: The innermost darkest box represents the content whatever we put between the HTML tags i.e. text or images.
- Padding: It is a space between the border and the content, it is used to create extra space inside the element. For example, in a
<button>tag, if we usepadding: 1rem;it will create a space between the border of the button and the button name which was inside on all 4 sides. The padding behaves like a part of the content only, for example, if we give padding to<a>tags, the link along with the space around it which is its padding will be clickable too. This should be avoided as we don't want users to see pointer cursors even when the cursor is a bit away from the link. For this, we must use margin. We can also choose to have padding on only one, two, or three sides. For that, we use padding-left, padding-right, padding-top, padding-bottom as the property, same syntax. - Border: Used to give border to an output text box, or any piece of text on all of its 4 sides. The syntax here is a bit different,
border: 1px solid black;. First the border thickness then the type of border like solid, dashed, etc, then third is the color of the border. We can also choose to have borders on only one, two, or three sides. For that, we use border-left, border-right, border-top, border-bottom as the property, same syntax. It is usually thin, so we use units pixel only. - Margin: It is the space outside the border, it is used to create extra space outside the element. For example, between 2
<input>tags if we want some spacing, we must use the margin property.margin: 2rem;will create a space equal to 2 rem on all 4 sides of the element, thus pushing away any close by elements. We can also choose to have margin on only one, two, or three sides. For that, we use margin-left, margin-right, margin-top, margin-bottom as the property, same syntax.
For padding, border, and margin, we have another way to apply these properties to only one, two, or three sides. For example in the border property, we can do it by simply by writing,border: 0 1rem 2rem 3rem; It follows the clockwise order starting with the top = 0, then right = 1rem, then bottom = 2rem, and finally left = 3rem. Notice that they don't have commas in between the syntax. When we write value 0, we can omit the unit. This same logic is applicable for padding and margin too!
