CSS stands for Cascading Style Sheets. It controls the visual aspects of web pages, allowing designers to choose fonts, colors, layout, and more. Along with HTML and JavaScript, CSS is a part of the fundamental blocks of web development.
You may ask yourself, “Have I run into CSS before?”
The answer is a definite yes. CSS adds style to your website. Without it, you would just see a bland HTML elements with no structure, no colors, and lines of text and images thrown in the mix. That’s not very attractive, is it? CSS steps in to provide your website with that makeover it needs. CSS files turn your web page from a bland document into a work of art.
So let’s go ahead, get our digital art supplies ready, and begin to paint a pretty picture of our journey into tech by learning about the purpose of CSS.
What is CSS Exactly?
CSS stands for Cascading Style Sheets. It is a styling language that controls many of the visual elements for a web page.
Before CSS, developers had a tough time working with HTML code to format their content in a document, and even then the content was very limited. HTML only was intended to be only a markup language to link various online documents together. HTML was never meant for formatting a page.
When HTML 3.2 presented style formatting tags for properties like fonts, it caused difficulties for developers. Programmers would spend a long and expensive process coding lengthy pages of HTML code. This made it difficult to find errors within the HTML syntax if things went wrong in the web page.
The World Wide Web Consortium (W3C) saw this and adopted CSS to settle the issue. They later went on to create the CSS Working Group dedicated to developing the version of CSS we have today.
CSS did HTML, and the tech world in general, a favor and removed all style formatting HTML tags from the page and replaced them with lists of rules called style sheets.
If you think of the development of a house or any type of building, HTML represents the basic structure of the building: the walls, stairs, and doors. CSS would represent the paint, decorations, and style of the building. While HTML provides your base structure, CSS provides the style of your webpage— making it stand out among other webpages on the Internet.
The style includes the background colors, layout, and even the display style for various types of devices. You can even add animations with CSS keyframes. Additionally, CSS is completely separate from HTML and it can be used by any markup language, including XHTML (a variant of HTML), and XML (Extensible Markup Language).
How Does CSS Work?
CSS brings style to your web pages by interacting with individual HTML components called elements. The language enables the separation of presentation and content. This improves accessibility and performance in web page processing. It also provides more flexibility across many pages and reduces repetition and difficulty in the HTML code. Developers style their CSS through a word processor or text editor and link the CSS to HTML in three different ways.
External style sheets, the most recommended method, are saved as a separate file from the HTML document with a .css extension. Then every HTML page will pull the style rules from just one CSS reference. This method is recommended if you have several rules that can span across many pages on your website. To use your external style sheet, you include a link tag in your header section of the HTML file that sources to your .css file.
Internal style sheets are included within the header section of your HTML file but within a style tag. Internal style sheets are recommended if you have a single page with a couple of rules that are unique to the other pages on your website.
Inline style sheets are within the elements in your HTML file. These are small segments of CSS written into the code. Inline style sheets should only be used when the style is a single coding instance in your entire webpage.
How Do I Use CSS?
CSS syntax is simple and consists of a plain text document called a style sheet. Style sheets separated into blocks of code are called rules. A CSS rule consists of two parts to work with the HTML code.
The first part of a CSS rule is the selector. Selectors declare which elements in the HTML document the developer wants to style. You can call a rule with a selector that applies to paragraphs (identified with the ‘p’ tag) and it will affect all paragraphs within your HTML document.
Selectors apply to the HTML in two ways. You either apply your styles to all elements on the page like mentioned earlier or apply it to certain ones within a page through attributes. CSS selectors for HTML attributes are identified in two forms: id and class.
The id affects a unique identifier within the document. They would be marked with a ‘#’ symbol. The id cannot share the same identifying name with another id in the document. If you would like to use the same identifier name for multiple elements in the document, you would use the class attribute. The ‘.’ symbol represents the class attribute you want to style in your CSS code. Both attributes are case-sensitive and start with their identifying symbols and letters. They can include alphanumeric characters, hyphens, and underscores in their names.
The second part of the CSS rule is the declaration block. This block is a list of declarations consisting of a property, a value, and a colon between the two items. These declarations are surrounded by curly brackets or braces within the CSS rule.
Properties are items that are affected in the selector. These include, but are not limited to, the font size, color, layout, and margins. Properties are specified in the CSS standard and have a set of possible values. Values are the settings that you want to insert into your properties to change their presentation on the HTML page. Values can be a wide range of keywords, numerical values, or measurements.
If many declarations are included in a block, a semicolon must separate each declaration for them to work in the rule.
Now that we know what a CSS rule is and what it includes we need to learn the running order of CSS. This is where the “cascading” in CSS comes in.
You can include several rules across many style sheets, but what if they conflict with each other? When this occurs, the styles will cascade into new styles by using a priority order to define which one the HTML code answers to. The priority levels are:
- Priority 1: Inline styles
- Priority 2: External and internal style sheets
- Priority 3: Browser defaults
But what if you have two styles that have the same priority level? Executing two styles with similar priority levels will cause the code to run from top to bottom. Therefore, the last one gets the highest priority.
How Do I Start Learning CSS?
CSS, along with HTML, is very easy to pick up when you want to start learning code. There are many resources available all over the Web where you can start learning CSS.
W3Schools and Mozilla Developer Network are useful as you learn the concepts of the programming languages. They provide online tutorials and articles on languages like CSS.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
To start developing your brain with syntax and learning the basics, you should use applications like Grasshopper, SoloLearn, and Codecademy. These applications are available in both browser and mobile formats. They provide many activities to help you grasp a basic understanding of languages such as HTML and CSS.
When you feel that you want to push the bar a bit more, take a look at the best free online resource for learning web development at freeCodeCamp. This non-profit organization helps beginners learn to code through free online courses and resources in various media formats.
Summary
CSS provides the presentation, character, and personality in a website. You wouldn’t want to go outside looking plain and bland. You wouldn’t want your house, your car, or anything that represents what you are to lack style. Even if you just put a flag on your car or a wreath on your front door, it is something that provides style.
The same concept applies to your websites. CSS gives you the ability to play around with colors, fonts, and layouts to build attractive websites for the public. It also eases the workload for developers by separating the style formatting from the actual structure of the webpage. So that if you run into any issues with your code, you can figure out where your problems lie simply with separate coding files. No need to spend hours to find where the syntax went wrong in one long document.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
